Привет всем!
Оригинальная статья находится здесь.
Для тех, кто не знаком, Styled-Components - очень популярная библиотека в сообществе React и React Native, где она предоставляет разработчикам возможность создавать свой код CSS в JavaScript.
Разработчики с Vue знают, как легко работать со стилями компонентов, используя CSS вместе с HTML и JavaScript в одном файле; и все это благодаря мощи SFC (однофайловые компоненты). Это, несомненно, было очень положительным моментом и помогло повысить популярность Vue в сообществе Front End.
Однако в последние месяцы я использовал React при разработке большого проекта, и именно оттуда я узнал эту библиотеку и использовал ее в ее стилизации; Даже признаюсь, что сделал приложение намного более организованным и практичным. Сначала это немного сбивает с толку, но потом эта библиотека вам начинает очень нравиться.
Но, как и большинство моих проектов, я использую Vue, поэтому я решил исследовать способ объединить практичность библиотеки Style-Components с мощью Vue.js и его экосистемы. Именно тогда я обнаружил, что существует специальная библиотека для Vue, поддерживаемая теми же создателями компонентов стиля React, которая называется vue-styled-components.
И если у вас есть проекты в React и вы хотите переключиться на Vue (да, процесс изменения тоже происходит в этом направлении, и он сильно увеличился), со стилями, созданными с помощью styled-components, их можно легко перенести, таким образом доход, маневренность, производительность и масштабируемость.
Начать
Но давайте оставим разговор в стороне и перейдем к коду! Процесс установки и использования vue-styled-components очень прост и практичен. Создав свой проект, просто установите библиотеку с помощью предпочитаемого диспетчера пакетов (Yarn, NPM).
Это совсем несложно, и вы можете быстро использовать потенциал этой библиотеки в своем приложении. В моем GitHub я оставил проект с примерами стилизованных тегов и некоторыми способами взаимодействия с ними с помощью vue-styled-components.
Каждый элемент / тег, используемый в примерах, может обрабатываться vue-styled-components как изолированный Компонент с его индивидуальными свойствами или путем получения данных от других компонентов.
В нашем первом примере, максимально вводном и базовом, давайте создадим кнопку со стилем по умолчанию. Не волнуйтесь прямо сейчас, настраивая эти теги, мы постепенно переходим к процессу, в котором этот компонент можно сопоставить и разрешить динамическое обновление стиля.
После создания файла Button.js просто используйте его, как если бы вы импортировали любой компонент в Vue, и дайте файлу имя для тега в HTML-коде в SFC (здесь я буду считать, что вы уже знакомы с его использованием ). из Vue.js и всей его архитектуры).
Я обычно использую букву C в качестве префикса (который относится к слову Component), чтобы назвать пользовательские теги, которые я использую во Vue; Это хорошая практика, которую я усвоил в Angular. На этом этапе в любом месте нашего приложения мы можем использовать этот стилизованный компонент.
Передача свойств
В vue-styled-components вы можете динамически определять стили для компонента, передавая эти значения через свойства. Мы доработаем наш компонент Button, сделав возможным изменение стиля кнопки в соответствии с переданными параметрами. В этом примере мы сообщаем, что при передаче основного атрибута кнопка получит новый стиль фона и цвет шрифта.
В этом коде нет никакого секрета, просто мы просто сделали троичное, информирующее, если есть первичный атрибут, он возвращает один цвет, если нет, вернет другой. Приведенный выше пример можно улучшить и даже добавить новые свойства (вы можете передавать сколько угодно атрибутов); В рамках проекта все идет в соответствии с вашими потребностями.
Улучшение свойств
Манипулирование получаемыми нами свойствами дает нам возможность получить различные компоненты в одном файле, задав условия, удовлетворяющие определенным стилям. В приведенном ниже примере у вас есть возможность выбрать цветовую схему, которую вы хотите назначить для своей кнопки, не затрагивая другие, тем самым разнообразив ваше приложение.
Чтобы лучше объяснить процесс создания этой кнопки: мы начинаем (всегда) вызывать vue-styled-components, сразу после (от строки 3 до строки 6), нам нужно определить, какие типы свойств будут переданы компоненту, и в этом случае мы создадим два типа. , которые являются типом и радиусом; Это второе свойство просто показывает, хотим ли мы кнопку с закругленными краями или нет.
В строках с 8 по 31 мы создаем функцию, которая принимает значение свойства type и делает условное (в данном случае мы используем переключатель) и видим введенное значение в соответствии с тем, что было передано. , он возвращает фоновые атрибуты. цвет и цвет соответствующего случая, если ничего не передается как свойство, тогда кнопке будет присвоено значение по умолчанию.
Обладая этими знаниями, вы можете реализовать новые атрибуты, такие как размер шрифта, отступы, поля, среди других атрибутов, которые могут сделать ваш настраиваемый компонент очень динамичным и использоваться во всем приложении.
Я оставил эти небольшие примеры в моем GitHub, чтобы вы могли сделать первый шаг по реализации этой библиотеки. Наслаждайтесь и отправляйте новые стилизованные поля, чтобы помочь другим друзьям, которые также хотят учиться.
Если вам понравилась эта статья, обязательно поделитесь и прокомментируйте. Если вы хотите узнать немного больше, обменяться некоторыми идеями (я все еще улучшаю свой английский, но мы можем поговорить), вы можете оставить свои комментарии по этой теме и даже предложить что-то для следующих статей.
Наслаждайтесь и узнавайте немного о моей работе, посетите сайт www.fsenaweb.me, у него есть мое портфолио, мои социальные сети (в том числе GitHub, где у вас есть несколько примеров приложений для практики с Vue.js) и небольшое пространство для контактов.
И все, увидимся в следующий раз! Меня зовут Матеус Рикелли, и большое спасибо за внимание!
