Carbon Components Svelte: библиотека пользовательского интерфейса для Svelte

Если вы ожидаете, что библиотека пользовательского интерфейса Svelte будет иметь тот же уровень зрелости, что и некоторые аналоги React, вы будете разочарованы. Они идут к этому, но с развитием Svelte такими быстрыми темпами авторам трудно за ним угнаться. В этой статье рассматривается библиотека Carbon Components Svelte и почему мы считаем, что на данный момент это лучшая библиотека пользовательского интерфейса для Svelte.

Фон

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

Библиотека углеродных компонентов

Мы искали библиотеку компонентов пользовательского интерфейса, которая соответствовала бы нашим потребностям, и наткнулись на эту библиотеку. Эта библиотека представляет собой реализацию Carbon Design System от IBM, аналогичную тому, как React Material UI (MUI) реализует Material Design от Google. Ниже приведены основные факты, которые нам понравились.

  • Компоненты
    В библиотеке есть множество компонентов для работы. Названия некоторых компонентов могут отличаться от тех, к которым привыкли некоторые из нас. Например, Автозаполнение называется ComboBox. Поэтому рекомендуется просмотреть их библиотеку компонентов, прежде чем внедрять пользовательский компонент или импортировать новый пакет.
  • Документация
    Документация первоклассная (как и MUI) с большим количеством примеров. Кроме того, API компонента очень хорошо написано. Другие библиотеки определенно могут научиться кое-чему тому, как писать документацию у этих ребят.
  • Настройка
    Одним из важных аспектов библиотеки пользовательского интерфейса является предоставление способов настройки компонентов. Библиотека предоставляет способы глобального изменения стилей, настройки отдельных компонентов и, где это необходимо, имеет реквизиты слотов. Мы часто удивлялись тому, как легко было настроить дизайн, когда это необходимо.
  • Активно поддерживается
    Библиотека активно поддерживается, и мы надеемся, что так и останется. Проверьте их репозиторий на github.
  • Репозитории портфолио
    Они также предоставляют значки, пиктограммы и библиотеку диаграмм, которые идут вместе с их библиотекой компонентов. При добавлении значков или диаграмм в ваше веб-приложение хорошо не искать что-то еще.

Некоторые особенности

  • Текст в кнопке выравнивается по левому краю, а не по центру. Хотя его можно легко настроить.
  • Они не обеспечивают возможности настройки того, какой должна быть структура значения реквизита. Например, В MultiSelect массив объектов должен иметь свойства id и text. Нет никакого способа обойти это. Если ваш сервер предоставляет значения в другом формате, вам нужно будет запустить операцию, чтобы получить их в ожидаемом формате.

Заметные упоминания

Мы оценили и другие библиотеки. В частности, Svelte Material UI (SMUI) и Flowbite Svelte. В случае SMUI мы обнаружили отсутствие документации и отсутствие некоторых компонентов, таких как DatePicker. Flowbite Svelte основан на Flowbite, и некоторые компоненты, присутствующие в родительской библиотеке, недоступны или находятся в экспериментальном состоянии в его версии Svelte. Тем не менее, эти библиотеки по-прежнему удобны в использовании, и если в них есть нужные вам компоненты, вы определенно можете их использовать.

Краткое содержание

В настоящее время у нас есть один проект, развернутый в производстве, в котором используются углеродные компоненты, и мы довольны тем, как все обернулось. Мы бы порекомендовали попробовать его и дать ему немного времени, чтобы он вырос на вас. Это определенно выросло на нас!