Bonjour, Habr! L'autre jour, je suis tombé sur un article très intéressant en portugais. Heureusement, nous avons réussi à trouver sa version anglaise. J'attire votre attention sur une traduction en russe. Vous pouvez retrouver mes autres traductions sur ma page Habr.
Lien d'origine:
portugais ,
anglaisPour ceux qui ne sont pas dans le sujet. Styled-Components est une bibliothèque très populaire parmi les développeurs natifs de React & Ract. Il vous permet d'écrire du CSS personnalisé directement dans JS.
Dans Vue, nous savons à quel point il est pratique de travailler avec des composants à fichier unique (SFC), car tous les composants nécessaires sont rassemblés en un seul endroit. Le modèle SFC a considérablement augmenté la popularité de Vue.
Ces derniers mois, j'ai eu l'occasion de participer au développement d'un projet majeur sur React. Nous y avons utilisé des composants stylés et ce fut une expérience très intéressante.
Cependant, dans la plupart de mes projets, j'utilise Vue, il est donc naturel que je veuille combiner une nouvelle expérience avec Styled-Components et les avantages de l'écosystème Vue.js. C'est alors que j'ai découvert qu'une telle solution existe déjà et est prise en charge par les mêmes créateurs qu'une bibliothèque similaire sous React:
vue-style-components .
Commencer
Mettez de côté le bavardage vide et passez au code. Comme d'habitude, utilisez du fil ou npm.
// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components
Sur mon
github, vous trouverez un référentiel avec des exemples d'utilisation de cette bibliothèque.
Chaque élément utilisé dans les exemples peut être traité par des composants de style vue en tant que composant isolé avec ses propriétés individuelles ou en recevant des données d'autres composants.
Notre premier exemple est juste un bouton avec des styles par défaut.
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;
Partout dans notre application, nous pouvons utiliser ce composant.
import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, }
Passer des paramètres
Dans vue-styled-components, vous pouvez définir dynamiquement des styles pour un composant en passant ces valeurs via les propriétés. Cet exemple montre que lorsque l'attribut principal est transmis, le bouton reçoit un nouveau style d'arrière-plan et une nouvelle couleur de police.
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;
L'exemple ci-dessus peut être amélioré et même ajouté de nouvelles propriétés (vous pouvez passer autant d'attributs que vous le souhaitez). Tout se déroule selon vos besoins au sein du projet.
Avec l'aide de cette bibliothèque, nous avons la possibilité de gérer les styles via la logique. Dans l'exemple ci-dessous, vous avez la possibilité de choisir la palette de couleurs que vous souhaitez attribuer à votre bouton sans affecter les autres, diversifiant ainsi votre application.
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;
Pour mieux expliquer le processus de création de ce bouton: nous importons d'abord (toujours) les composants de style de vue, juste après (de la ligne 3 à la ligne 6) nous devons déterminer quels types de propriétés seront passés au composant. De la ligne 8 au 31, nous créons une fonction qui prend la valeur de la propriété type, conformément à ce qui a été passé, elle retourne les attributs de l'arrière-plan. la couleur et la couleur de leur registre respectif, si rien n'est transmis en tant que propriété, le bouton se verra attribuer la valeur par défaut.
Grâce à cette connaissance, vous pouvez implémenter de nouveaux attributs qui rendront votre composant personnalisé très dynamique.
J'ai laissé ces petits exemples dans mon GitHub afin que vous puissiez faire le premier pas dans la maîtrise de cette bibliothèque. Profitez-en.
Lien vers le référentiel avec des exemples .