Olá Habr! Outro dia, me deparei com um artigo muito interessante em português. Felizmente, conseguimos encontrar sua versão em inglês. Trago à sua atenção uma tradução para o russo. Você pode encontrar minhas outras traduções na minha página no Habr.
Link original:
português ,
inglêsPara aqueles que não estão no assunto. Styled-Components é uma biblioteca muito popular entre os desenvolvedores nativos do React & Ract. Ele permite que você escreva CSS personalizado diretamente em JS.
No Vue, sabemos como é conveniente trabalhar com componentes de arquivo único (SFC), porque todos os componentes necessários são coletados em um único local. O padrão SFC aumentou significativamente a popularidade do Vue.
Nos últimos meses, tive a oportunidade de participar do desenvolvimento de um grande projeto sobre o React. Usamos componentes estilizados e foi uma experiência muito interessante.
No entanto, na maioria dos meus projetos eu uso o Vue, por isso é natural que eu queira combinar uma nova experiência com os Componentes com estilo e os benefícios do ecossistema do Vue.js. Foi então que descobri que essa solução já existe e é suportada pelos mesmos criadores de uma biblioteca semelhante em React:
vue-style-components .
Iniciar
Separe as conversas vazias e passe para o código. Como sempre, use fios ou npm.
// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components
No meu
github, você encontrará um repositório com exemplos de uso desta biblioteca.
Cada elemento usado nos exemplos pode ser processado por componentes com estilo vue como um componente isolado com suas propriedades individuais ou pelo recebimento de dados de outros componentes.
Nosso primeiro exemplo é apenas um botão com estilos padrão.
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;
Em qualquer lugar do nosso aplicativo, podemos usar este componente.
import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, }
Passando parâmetros
Em componentes com estilo vue, é possível definir dinamicamente estilos para um componente passando esses valores por meio de propriedades. Este exemplo ilustra que, quando o atributo principal for passado, o botão receberá um novo estilo de plano de fundo e cor da fonte.
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;
O exemplo acima pode ser aprimorado e até adicionado novas propriedades (você pode passar quantos atributos desejar). Tudo vai de acordo com as suas necessidades dentro do projeto.
Com a ajuda desta biblioteca, temos a oportunidade de gerenciar estilos através da lógica. No exemplo abaixo, você tem a oportunidade de escolher qual esquema de cores deseja atribuir ao seu botão sem afetar os outros, diversificando assim o seu aplicativo.
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 melhor o processo de criação desse botão: primeiro (sempre) importamos componentes com estilo vue, logo após (da linha 3 à linha 6) precisamos determinar quais tipos de propriedades serão passados para o componente. Da linha 8 à 31, criamos uma função que pega o valor da propriedade type, de acordo com o que foi passado, ela retorna os atributos do background. a cor e a cor do respectivo registro, se nada for passado como uma propriedade, o botão receberá o valor padrão.
Graças a esse conhecimento, você pode implementar novos atributos que tornarão seu componente personalizado muito dinâmico.
Deixei esses pequenos exemplos no meu GitHub para que você possa dar o primeiro passo no domínio desta biblioteca. Aproveite.
Link para o repositório com exemplos .