weightless скачать - Скачать weightless исходный код

weightless

Сторонние компоненты

1.0.0

Скачать

Этот проект достиг окончания его разработки. Не стесняйтесь просматривать код.

Высококачественные веб-компоненты с небольшим количеством следа
_{Большое спасибо за проявление интереса к этому проекту! Если вы хотите помочь нам накормить наш Octocat, вы обязательно должны стать Stargazer. Эти веб -компоненты созданы для использования. Они легкие, имеют простой API и легко расширяются и сочиняют. Перейдите сюда, чтобы увидеть демонстрацию https://weightless.dev/elements.}

Высококачественное: сосредоточено вокруг лучших практик.
Тестируемый: сотни тестовых счетов гарантируют, что библиотека стабильна.
Простой в использовании: но с простым и понятным API.
Доступно: все компоненты были построены с учетом доступности.
Одно отвечаемость: каждый компонент делает одну вещь действительно хорошо. Это делает их действительно легко расширять и сочинять.

➤ Соблюдение

Demo
➤ Установка
➤ Элементы
➤ Дорожная карта
Speak Guide
Speakers
➤ Лицензия

Demo

Иди сюда, чтобы попробовать демо.

➤ Установка

 $ npm i weightless

Если вы хотите начать очень быстро, вы можете использовать CLI.

 $ npm init web-config new my-project --lit

Если вы предпочитаете использовать комплект umd , вы можете импортировать https://unpkg.com/weightless/umd/weightless.min.js . Имейте в виду, что это импортирует все элементы, поэтому рекомендуется использовать его только для испытательных целей.

 < script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script >

➤ Элементы

Имя	Ярлык	Описание	Документация	Демо
Фон	`wl-backdrop`	Темный слой для использования за наложениями.	Документация	Демо
Баннер	`wl-banner`	Отобразить неинтерротивое сообщение и связанные с ним дополнительные действия.	Документация	Демо
Кнопка	`wl-button`	Позвольте пользователям предпринимать действия и делать выбор, с одним нажатием.	Документация	Демо
Карта	`wl-card`	Групповая контент и действие.	Документация	Демо
Флажок	`wl-checkbox`	Включите или выключите опцию.	Документация	Демо
Диалог	`wl-dialog`	Высоко прерывистые сообщения.	Документация	Демо
Делитель	`wl-divider`	Тонкая линия, которая группирует содержание в списках и макетах.	Документация	Демо
Расширение	`wl-expansion`	Предоставьте расширяемые детали-имурные представления.	Документация	Демо
Икона	`wl-icon`	Символы для общих действий и элементов.	Документация	Демо
Этикетка	`wl-label`	Сделайте элементы формы более доступными.	Документация	Демо
Список элемента	`wl-list-item`	Отобразить элемент в списке.	Документация	Демо
Навигация	`wl-nav`	Предоставьте доступ к направлениям в вашем приложении.	Документация	Демо
Попвер	`wl-popover`	Контекстуальные привязки элементов	Документация	Демо
Поп -карта	`wl-popover-card`	Дайте Popovers контекстуальный талант.	Документация	Демо
Прогресс	`wl-progress-bar`	Заполняет планку от 0% до 100%.	Документация	Демо
Прогресс спиннер	`wl-progress-spinner`	Заполняет круг от 0% до 100%.	Документация	Демо
Радио	`wl-radio`	Выберите один вариант из набора.	Документация	Демо
Пульс	`wl-ripple`	Укажите сенсорные действия.	Документация	Демо
Выбирать	`wl-select`	Выберите одно или несколько значений из набора параметров.	Документация	Демо
Слайдер	`wl-slider`	Сделайте выбор из диапазона значений.	Документация	Демо
Закусочная	`wl-snackbar`	Предоставьте краткие сообщения внизу экрана.	Документация	Демо
Выключатель	`wl-switch`	Включите или выключите опцию.	Документация	Демо
Вкладка	`wl-tab`	Организовать навигацию между группами контента.	Документация	Демо
Группа таб	`wl-tab-group`	Организовать навигацию между группами контента.	Документация	Демо
Текст	`wl-text`	Групповой текст в абзацы.	Документация	Демо
Textarea	`wl-textarea`	Многослойные текстовые поля.	Документация	Демо
Текстовое поле	`wl-textfield`	Одиночные текстовые поля.	Документация	Демо
Заголовок	`wl-title`	Укажите начало нового раздела.	Документация	Демо
Подсказка	`wl-tooltip`	Информативный контекст, связанный с текстом.	Документация	Демо

➤ Дорожная карта

На дорожной карте много интересных вещей. До v1.0.0 вы можете ожидать, что API будет довольно стабильным, но рефакторинг все еще может произойти и сломать обратную совместимость. Вы можете использовать библиотеку, создавать запросы на притяжение или добавить проблемы.

Speak Guide

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

Клонировать это хранилище, используя git clone https://github.com/andreasbm/weightless.git .
Запустите npm i , чтобы установить все зависимости.
Сверните сервер разработки с помощью npm run s . Браузер должен автоматически открываться при правильном URL. Если нет, вы можете открыть свой браузер и перейти к http://localhost:1350 .
Запустите тесты с помощью npm run test .
Заполните файлы с помощью npm run lint .
Скомпилируйте документацию, запустив npm run docs .

Элементы написаны в TypeScript, а таблицы стилей написаны в SASS. Все веб-компоненты используют Lit-Element.

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