Создание приложения с использованием Styled-Components в Vue.js

Привет, Хабр! На днях наткнулся на одну очень интересную статью на португальском. К счастью, удалось найти её английскую версию. Предлагаю вашему вниманию перевод на русский. Другие мои переводы вы можете найти на мой странице на хабре.

Ссылка на оригинал: португальский, английский

Для тех кто не в теме. Styled-Components это библиотека очень популярная в среде React & Ract-native разработчиков. Она позволяет писать пользовательский CSS прямо в JS.

Во Vue мы знаем сколь удобно работать с однофайловыми компонентами(SFC), ведь всё необходимое компоненту собрано в одном месте. Паттерн SFC существенно повысил популярность Vue.

Крайние несколько месяцев мне довелось принять участие в разработке крупного проекта на React. В нём мы использовали Styled-Components, и это был очень интересный опыт.

Однако, в большинстве своих проектов я использую Vue, поэтому естественно, что мне захотелось объединить новый опыт со Styled-Components и преимущества Vue.js экосистемы. Именно тогда я обнаружил, что такое решение уже есть и оно поддерживается теми же создателями, что и аналогичная библиотека под React: vue-styled-components.

Начало

Отложим пустую болтовню и перейдём к коду. Как обычно, используйте yarn или npm.

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

На моём гитхабе вы найдёте репозиторий с примерами использования этой библиотеки.

Каждый элемент, используемый в примерах, может обрабатываться vue-styled-компонентами как изолированный компонент с его индивидуальными свойствами или путем получения данных от других компонентов.

Наш первый пример просто кнопка с дефолтными стилями.

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;

В любом месте нашего приложения мы можем использовать этот компонент.

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

Передача параметров

В vue-styled-components вы можете динамически определять стили для компонента, передавая эти значения через свойства. Этот пример иллюстрирует, что при передаче основного атрибута кнопка получит новый стиль фона и цвет шрифта.

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;

Приведенный выше пример может быть улучшен и даже добавлены новые свойства (вы можете передать столько атрибутов, сколько захотите). Все идет в соответствии с вашими потребностями в рамках проекта.

С помощью этой библиотеки мы получаем возможность управлять стилями через логику. В приведенном ниже примере у вас есть возможность выбрать, какую цветовую схему вы хотите назначить своей кнопке, не влияя на другие, тем самым разнообразив ваше приложение.

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;

Чтобы лучше объяснить процесс создания этой кнопки: мы сначала (всегда) импортируем vue-styled-components, сразу после (от строки 3 до строки 6) нам нужно определить, какие типы свойств будут переданы компоненту. От строки 8 до 31 мы создаем функцию, которая принимает значение свойства type, в соответствии с тем, что было передано, оно возвращает атрибуты фона. цвет и цвет их соответствующего регистра, если в качестве свойства ничего не передано, то кнопке будет присвоено значение по умолчанию.

Благодаря этим знаниям вы можете реализовать новые атрибуты, которые сделают ваш пользовательский компонент очень динамичным.

Я оставил эти маленькие примеры в своем GitHub, чтобы вы могли сделать начальный шаг в освоении этой библиотеки. Наслаждайтесь.

Ссылка на репозиторий с примерами.