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 : 2109  
 
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

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…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Todas las funciones de javascript y los métodos para manipular los arrays

Este artículo mostrará las funciones prominentes de las arrays de JavaScript, entre ellas .map() , .filter() , y .reduce() , y luego pasará a través de ejemplos de casos en los que .every() …

Como construir mejores componentes de alto nivel (Higher-order components) con el Vue 3

El Vue 3 será lanzado pronto con la introducción del API de composición (Composition API). Viene con muchos cambios y mejoras en el rendimiento. Los componentes de orden superior (HOC…

Node.js: herramientas de código abierto para los desarrolladores

De la amplia gama de herramientas disponibles para simplificar el desarrollo de Node.js, aquí están las mejores. Una encuesta en StackOverflow afirma que el 49% de los desarrolladores usan Node.js para…

Renderización lado servidor de Vue.js on Php

¿Intentas que el renderizado del lado del servidor funcione con PHP para renderizar tu aplicación Vue.js pero se atasca? Hay un montón de grandes recursos por ahí, pero hasta ahra no…

Integración de Bootstrap 4 con Vue.js usando Bootstrap-Vue

React y Vue.js son dos marcos de trabajo líderes y modernos de JavaScript para el desarrollo del front-end. Mientras que React tiene una curva de aprendizaje considerable, y un proceso…

Cómo crear un aplicación Vue.js en 5 minutos

Vue.js se está volviendo cada vez más popular, convirtiéndose en un competidor significativo de frameworks como Angular o React.js. Como front-end framework para principiantes, conquista con éxito los corazones de…

Vue.js 3, la programación orientada al futuro que no hay que perderse!

Si estás interesado en Vue.js, probablemente conozcas la 3ª versión de este framework, que se publicará en breve. La nueva versión de momento está en desarrollo, pero todas las características…

Vue.js - Cómo usar (con seguridad) un plugin de jQuery con Vue.js

No es una buena idea usar jQuery y Vue.js en la misma interfaz. No lo hagas si puedes evitarlo, pero probablemente si estás leyendo esto no porque quieras usar jQuery…

10 librerías para machine learning en JavaScript

JavaScript es actualmente uno de los lenguajes de programación más populares. Su principal aplicación se encuentra en las aplicaciones web, utilizándose para dar funcionalidad a las páginas web dinámicas. Otro…

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