Shoelace

Библиотека веб-компонентов с передовым подходом.

• Работает со всеми фреймворками 🧩
• Работает с CDN 🚛
• Полностью настраиваемая с помощью CSS 🎨
• Включает официальную тему в стиле ночи 🌛
• Создана с учетом доступности ♿️
• Открытый исходный код 😸

Разработана в Нью-Хэмпшире Кори Лавиской.

Документация: shoelace.style

Исходный код: github.com/shoelace-style/shoelace

Twitter: @shoelace_style

Мастера обуви 🥾

Мастера обуви, или "разработчики Shoelace", могут использовать эту документацию для изучения того, как собирать Shoelace из исходного кода. Вам потребуется Node >= 14.17 для сборки и запуска проекта локально.

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

Если это не то, что вы пытаетесь сделать, страница документации — то, что вам нужно.

Что вы используете для сборки Shoelace?

Компоненты создаются с помощью LitElement, базового класса для пользовательских элементов, который предоставляет интуитивно понятный API и реактивное связывание данных. Сборка осуществляется с помощью кастомного скрипта с использованием esbuild для упаковки.### Создание вилки репозитория

Начните с создания вилки репозитория на GitHub, затем клонируйте его локально и установите зависимости.

git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install

Разработка

После клонирования репозитория выполните следующую команду.

npm start

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

Сборка

Чтобы создать производственную сборку, выполните следующую команду.

npm run build

Создание новых компонентов

Чтобы создать новый компонент, выполните следующую команду, заменив sl-tag-name на желаемое имя тега.

npm run create sl-tag-name

Это сгенерирует исходный файл, стилистику и страницу документации для вас. Когда вы запустите разработческий сервер, вы найдете новый компонент в разделе "Компоненты" в боковой панели.

Вклад

Shoelace — это проект с открытым исходным кодом, и вклады приветствуются! Если вы заинтересованы в вкладе, пожалуйста, ознакомьтесь с руководством по вкладу сначала.

ЛицензияShoelace был создан Cory LaViska и доступен под условиями лицензии MIT.

Независимо от того, строите ли вы Shoelace или что-то с помощью Shoelace — приятного творчества! 🥾