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

Crear PDF con Javascript y jsPDF

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

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…

Clicky