Como construir una web application con Styled Components en Vue.js

by Luigi Nori Date: 16-09-2019 javascript vue reactive node


Styled-Components es una biblioteca muy popular dentro de la comunidad React y React Native, y ahora puedes usarla en Vue.js.

Para aquellos que no lo saben, Styled-Components es una biblioteca muy popular dentro de la comunidad React y React Native, donde proporciona a los desarrolladores la capacidad de crear su código CSS dentro de JavaScript.

Quienes desarrollan con Vue saben lo fácil que es trabajar con la estilización de componentes, utilizando CSS junto con HTML y JavaScript en un solo archivo; y todo ello gracias a la potencia de SFC (Single File Components). Este fue sin duda un punto muy positivo y ayudó a aumentar la popularidad de Vue en la comunidad de Front-end.

Sin embargo, en los últimos meses, he estado utilizando React en el desarrollo de un gran proyecto, y fue a partir de ahí que conocí esta librería y la he estado utilizando en su parte de estilización; e incluso confieso que dejé la aplicación mucho más organizada y práctica. Al principio es un poco confuso, pero luego te empieza a gustar mucho esta biblioteca.

Pero como la mayoría de mis proyectos utilizan Vue, he decidido investigar una manera de combinar la practicidad de la biblioteca Style-Components con el poder de Vue.js y su ecosistema. Fue entonces cuando descubrí que existe una biblioteca específica para Vue, mantenida por los mismos creadores de los componentes de estilo de React, y que se llama vue-styled-components.

Y si tienes proyectos en React y quieres hacer el cambio a Vue (sí, el proceso de cambio también ocurre en esta dirección y ha aumentado mucho), con los estilos creados con los componentes estilizados, puedes migrar fácilmente, ganando agilidad, rendimiento y escalabilidad.

Primeros pasos

Dejemos la conversación a un lado y vayamos al código. El proceso de instalación y uso de los componentes vue-styled es muy sencillo y práctico. Ya con su proyecto creado, simplemente instale la librería usando su gestor de paquetes favorito (Yarn, NPM).

$ yarn add vue-styled-components
o
$npm install vue-styled-components

No es complicado en absoluto, y puede utilizar rápidamente el potencial de esta biblioteca en su aplicación. En mi GitHub dejé un proyecto con ejemplos de etiquetas estilizadas y algunas formas de interactuar con ellas usando vue-styled-components.

Cada elemento/etiqueta utilizado en los ejemplos puede ser tratado por vue-styled-components como un solo componente con sus propiedades individuales, o recibiendo datos de otros componentes.

En nuestro primer ejemplo, tan introductorio y básico como sea posible, crearemos un botón con un estilo estándar. No se preocupe en este punto, al personalizar estas etiquetas, estamos evolucionando gradualmente hacia un proceso en el que este componente puede ser mapeado y permitir actualizaciones de estilo dinámicas.

import styled from "vue-styled-components";

const CButton = styled.button`
  font-size: 1em;
  text-align: center;
  color: #FFFFFF;
  border-radius: 5px;
  padding: 10px 15px;
  background-color: #0057AA;
`;

export default CButton;

Después de crear el archivo Button.js, utilícelo de la misma manera que si estuviera importando cualquier componente a Vue y asignando al archivo un nombre para la etiqueta dentro del código HTML en SFC (aquí consideraré que ya está familiarizado con el uso de Vue.js y toda su arquitectura).

Normalmente uso la letra C como prefijo (que se refiere a la palabra Componente), para asignar los nombres a las etiquetas personalizadas que uso en Vue; esta es una buena práctica que aprendí de Angular. En este instante, en cualquier parte de nuestra aplicación, podemos utilizar este componente estilizado.

<script>
    import CButton from '@/components/elements/Button'
    export default {
        name: 'app',
        components: {
            CButton
        },
    }
</script>

Transmisión de propriedades

En vue-styled-components puede definir dinámicamente estilos para un componente pasando estos valores a través de las propiedades. Vamos a mejorar nuestro componente Button, poniendo la posibilidad de modificar el estilo del botón, de acuerdo a los parámetros pasados. En este ejemplo estamos informando que cuando el atributo primary es pasado, el botón recibirá un nuevo estilo de fondo y color de fuente.

import styled from "vue-styled-components";

const typeButton = { primary: Boolean };

const CButtonProps = styled('button', typeButton)`
  font-size: 1em;
  text-align: center;
  color: ${props =>props.primary ? '#0057AA' : '#FFFFFF'};
  border-radius: 5px;
  padding: 10px 15px;
  background-color: ${props =>props.primary ? '#FFFFFF' : '#0057AA'};
`;

export default CButtonProps;

No hay ningún secreto en este código, de una manera sencilla, acabamos de hacer un ternario informando si hay un atributo primario que devuelve un color, si no existe, devolverá otro. El ejemplo anterior se puede mejorar e incluso añadir nuevas propiedades (es posible pasar tantos atributos como se desee); todo va de acuerdo a sus necesidades dentro del proyecto.

Mejora de las propiedades

Manipular las propiedades recibidas nos da la oportunidad de obtener diversos componentes en un solo archivo, poniendo condiciones que satisfacen ciertos estilos. En el siguiente ejemplo, tiene la oportunidad de elegir la combinación de colores que desea asignar a su botón, sin afectar a los demás, diversificando así su aplicación.

import styled from "vue-styled-components";

const typeButton = {
    type: String,
    radius: Boolean
};

const styleButton = type =>{
    switch (type) {
        case "primary":
            return `
                background-color: #FFFFFF;
                color: #0057AA;
            `;
        case "error":
            return `
                background-color: #B4000B;
                color: #FDFDFD;
            `;
        case "success":
            return `
            background-color: #00C887;
            color: #37435F;
        `;
        default:
            return `
                background-color: #0057AA;
                color: #FFFFFF;
            `;
    }
}

const CButtonPropsCond = styled('button', typeButton)`
  font-size: 1em;
  text-align: center;
  padding: 10px 15px;
  border-radius: ${({ radius }) =>radius ? "6px" : null};
  ${(props) =>styleButton(props.type)}
`;

export default CButtonPropsCond;

Empezamos (siempre) llamando a los componentes de vue-estilo, justo después, necesitamos definir qué tipos de propiedades se pasarán al componente, en este caso creamos dos tipos, que son tipo y radio; esta segunda propiedad es sólo para mostrar si queremos un botón con bordes redondeados o no.

Creamos una función, que toma el valor de la propiedad tipo y hace un condicional (en este caso usamos el switch) y vemos el valor informado, de acuerdo a lo que se pasó, devuelve el color de fondo y los atributos de color de sus respectivos casos, si no se pasa nada como propiedad, entonces el botón recibirá un valor por defecto.

A partir de este conocimiento, se pueden implementar nuevos atributos como tamaño de fuente, relleno, margen, entre otros atributos que pueden dejar su componente personalizado de una forma muy dinámica y siendo utilizado en toda la aplicación.

Si te gusta este artículo, asegúrate de compartirlo y comentarlo. Si quieres saber un poco más, intercambiar algunas ideas, puedes dejar en los comentarios tu opinión sobre el tema e incluso sugerir algo para los próximos artículos.

 
by Luigi Nori Date: 16-09-2019 javascript vue reactive node visitas : 2694  
 
Luigi Nori

Luigi Nori

He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.

 
 
 

Artículos relacionados

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración