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 : 555  
 
Luigi Nori

Luigi Nori

Lavora in Internet dal 1994 (praticamente una mummia), specializzato in tecnologie Web fa felici i suoi clienti smanettando con applicazioni su larga scala e ad alta disponibilità, frameworks php e js, disegno web, intercambio dati, sicurezza, e-commerce, amministrazione database e server, hacking etico. Convive felicemente con @salvietta150x40, nel (poco) tempo libero cerca di addomesticare un piccolo nano selvaggio appassionato di astri.

 
 
 

Artículos relacionados