Привет, Хабр! На днях наткнулся на одну очень интересную статью на португальском. К счастью, удалось найти её английскую версию. Предлагаю вашему вниманию перевод на русский. Другие мои переводы вы можете найти на мой странице на хабре.
Ссылка на оригинал: португальский, английский
Для тех кто не в теме. 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.
На моём гитхабе вы найдёте репозиторий с примерами использования этой библиотеки.
Каждый элемент, используемый в примерах, может обрабатываться vue-styled-компонентами как изолированный компонент с его индивидуальными свойствами или путем получения данных от других компонентов.
Наш первый пример просто кнопка с дефолтными стилями.
В любом месте нашего приложения мы можем использовать этот компонент.
В vue-styled-components вы можете динамически определять стили для компонента, передавая эти значения через свойства. Этот пример иллюстрирует, что при передаче основного атрибута кнопка получит новый стиль фона и цвет шрифта.
Приведенный выше пример может быть улучшен и даже добавлены новые свойства (вы можете передать столько атрибутов, сколько захотите). Все идет в соответствии с вашими потребностями в рамках проекта.
С помощью этой библиотеки мы получаем возможность управлять стилями через логику. В приведенном ниже примере у вас есть возможность выбрать, какую цветовую схему вы хотите назначить своей кнопке, не влияя на другие, тем самым разнообразив ваше приложение.
Чтобы лучше объяснить процесс создания этой кнопки: мы сначала (всегда) импортируем vue-styled-components, сразу после (от строки 3 до строки 6) нам нужно определить, какие типы свойств будут переданы компоненту. От строки 8 до 31 мы создаем функцию, которая принимает значение свойства type, в соответствии с тем, что было передано, оно возвращает атрибуты фона. цвет и цвет их соответствующего регистра, если в качестве свойства ничего не передано, то кнопке будет присвоено значение по умолчанию.
Благодаря этим знаниям вы можете реализовать новые атрибуты, которые сделают ваш пользовательский компонент очень динамичным.
Я оставил эти маленькие примеры в своем GitHub, чтобы вы могли сделать начальный шаг в освоении этой библиотеки. Наслаждайтесь.
Ссылка на репозиторий с примерами.
Ссылка на оригинал: португальский, английский
Для тех кто не в теме. 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, чтобы вы могли сделать начальный шаг в освоении этой библиотеки. Наслаждайтесь.
Ссылка на репозиторий с примерами.