Crear una aplicación usando componentes con estilo en Vue.js

Hola Habr! El otro día me encontré con un artículo muy interesante en portugués. Afortunadamente, logramos encontrar su versión en inglés. Les traigo una traducción al ruso. Puedes encontrar mis otras traducciones en mi página en Habr.

Enlace original: portugués , inglés

Para aquellos que no están en el tema. Styled-Components es una biblioteca muy popular entre los desarrolladores nativos de React & Ract. Le permite escribir CSS personalizado directamente en JS.

En Vue, sabemos lo conveniente que es trabajar con componentes de un solo archivo (SFC), porque todos los componentes necesarios se recopilan en un solo lugar. El patrón SFC ha aumentado significativamente la popularidad de Vue.

Los últimos meses tuve la oportunidad de participar en el desarrollo de un gran proyecto sobre React. Usamos componentes con estilo, y fue una experiencia muy interesante.

Sin embargo, en la mayoría de mis proyectos uso Vue, por lo que es natural que quisiera combinar una nueva experiencia con Styled-Components y los beneficios del ecosistema Vue.js. Fue entonces cuando descubrí que tal solución ya existe y es compatible con los mismos creadores que una biblioteca similar en React: vue-styled-components .

Inicio

Ponga a un lado la charla vacía y continúe con el código. Como de costumbre, use hilo o npm.

// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components 

En mi github encontrarás un repositorio con ejemplos de uso de esta biblioteca.

Cada elemento utilizado en los ejemplos puede procesarse mediante componentes de estilo vue como un componente aislado con sus propiedades individuales o al recibir datos de otros componentes.

Nuestro primer ejemplo es solo un botón con estilos predeterminados.

 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; 

En cualquier lugar de nuestra aplicación podemos usar este componente.

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

Pasando parámetros

En vue-styled-components, puede definir dinámicamente estilos para un componente pasando estos valores a través de propiedades. Este ejemplo ilustra que cuando se pasa el atributo principal, 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; 

El ejemplo anterior se puede mejorar e incluso agregar nuevas propiedades (puede pasar tantos atributos como desee). Todo va de acuerdo a sus necesidades dentro del proyecto.

Con la ayuda de esta biblioteca tenemos la oportunidad de administrar estilos a través de la lógica. En el ejemplo a continuación, tiene la oportunidad de elegir qué combinación de colores 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; 

Para explicar mejor el proceso de creación de este botón: primero (siempre) importamos componentes con estilo vue, justo después (de la línea 3 a la línea 6) necesitamos determinar qué tipos de propiedades se pasarán al componente. De la línea 8 a la 31, creamos una función que toma el valor de la propiedad type, de acuerdo con lo que se pasó, devuelve los atributos del fondo. el color y el color de sus respectivos registros, si no se pasa nada como una propiedad, se le asignará el valor predeterminado al botón.

Gracias a este conocimiento, puede implementar nuevos atributos que harán que su componente personalizado sea muy dinámico.

Dejé estos pequeños ejemplos en mi GitHub para que pueda dar el paso inicial en el dominio de esta biblioteca. Disfrútalo.

Enlace al repositorio con ejemplos .