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

lion

Другой исходный код

0.17.2

Скачать

Лев

Веб-сайт · Основы · Руководства · Компоненты · Блог

Lion — это набор высокопроизводительных, доступных и гибких веб-компонентов.!

Они предоставляют независимый уровень «белой этикетки», который можно расширить до вашего собственного уровня компонентов.

Высокая производительность: ориентирована на отличную производительность во всех соответствующих браузерах с минимальным количеством зависимостей.
Доступность: нацелен на соответствие стандарту WCAG 2.2 AA для создания компонентов, доступных для всех.
Гибкость: предоставляет решения с помощью веб-компонентов и классов JavaScript, которые можно использовать, адаптировать и расширять для удовлетворения всех потребностей.
Modern Code: Lion распространяется в виде чистых модулей es.
Предоставляет функции/классы и веб-компоненты: предоставляет функциональность в наиболее подходящей форме.

Примечание. Наши демо-примеры могут выглядеть просто и не очень стильно. Это специально. Они спроектированы как базовые, поэтому вы можете легко добавлять к ним свои собственные стили, соответствующие задуманному дизайну, не обращаясь к уже существующим стилям.

Изучите путеводители по львам ▶

Как установить

 НПМ я @lion/ui

Как использовать

Расширение веб-компонента

Это основной вариант использования Lion . Импортировать классы компонентов и расширить их для компонентов вашей собственной системы проектирования.

 импортировать { css } из 'lit'; импортировать { LionInput } из '@lion/ui/input.js'; класс MyInput расширяет LionInput {
  static getstyles() {return [ super.styles, css` /* здесь ваши стили */ `,];
  }}customElements.define('мой-вход', MyInput);

Используйте систему JavaScript

В Lion есть пара «систем», которые имеют API JavaScript. Примеры: localize , overlays , ajax и т. д.

 <тип сценария="модуль">
  импортировать { ajax } из '@lion/ui/ajax.js';

  ajax.fetch('data.json').then(response => response.json()).then(data => { // делаем что-то с данными});</script>

Используйте веб-компонент

Вы также можете использовать элементы льва напрямую, хотя это, вероятно, не распространенный вариант использования.

 <тип сценария="модуль">
  import '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>

Проблемы

Если у вас возникла проблема с каким-либо из предлагаемых нами пакетов, откройте новую проблему с ошибкой. Обязательно включите описание ожидаемого и текущего поведения — дополнительное добавление воспроизведения всегда помогает.

Запросы функций

Если у вас есть идеи о том, как мы можем улучшить, пожалуйста, проверьте наши обсуждения, чтобы узнать, есть ли похожие идеи или запросы на добавление новых функций. Если их нет, начните запрос функции как новую тему обсуждения. Добавьте заголовок [Feature Request] My awesome feature и описание того, чего вы ожидаете от улучшения и каков вариант использования.

Содержание

Имя	версия	описание
@лев/UI		Набор компонентов
@лев/аякс		Небольшая обертка вокруг fetch
Синглтон-менеджер		Менеджер синглтона позволяет гарантировать, что экземпляр синглтона, загруженный из нескольких расположений файлов, останется синглтоном. В первую очередь полезно, если используются две основные версии пакета с одним элементом.
Расширение документации плагина Babel		Плагин, который переписывает импорт и шаблоны в соответствии с конфигурацией. Это позволяет повторно использовать существующую документацию из исходных пакетов, сохраняя при этом код расширений.
Провиденс аналитика		Providence — это «Всевидящее око», которое генерирует статистику использования путем анализа кода. Он измеряет эффективность и популярность вашего программного обеспечения. С помощью всего лишь нескольких команд вы можете измерить влияние (критических) изменений, что сделает процесс выпуска более стабильным и предсказуемым.
Публикация документов		Инструмент, который копирует и обрабатывает вашу документацию (в монорепозитории), чтобы ее можно было опубликовать/доставить вместе с вашим пакетом.
Примечание продлить		Плагин для примечаний, позволяющий расширить уценку за счет импорта из исходных файлов.
Предустановка Rocket расширяет документацию по льву		При поддержке собственного уровня расширения Lion вы, скорее всего, захотите поддерживать аналогичную документацию. Копирование и перезапись файлов уценки работает, но всякий раз, когда что-то меняется, вам нужно копировать и переписывать снова. Чтобы сделать это автоматически, вы можете использовать этот пресет для ракеты.

Технологии

Lion Web Components стремится быть ориентированным на будущее и использовать проверенные технологии с хорошей поддержкой. Выбранный нами стек должен это отражать.

горит
НПМ
Открытые веб-компоненты
Современная сеть
Мокко
Чай
ESLint
красивее
ES-модули
Много-много тестов

Обоснование

По опыту мы знаем, что создание высококачественных и доступных компонентов пользовательского интерфейса — это сложно и отнимает много времени: требуется множество итераций, много времени на разработку и большое количество тестов, чтобы получить универсальный компонент, который работает в любом контексте, поддерживает множество крайних случаев и доступен во всех соответствующих программах чтения с экрана.

Lion стремится сделать за вас тяжелую работу. Это означает, что вам нужно всего лишь применить свою собственную систему дизайна: предоставив стили, настроив компоненты и добавив сверху минимальный набор пользовательской логики.

Как внести свой вклад

Обратите внимание: в этом проекте используются рабочие пространства Npm. Если вы хотите запускать все демо-версии локально, вам необходимо получить как минимум npm 7+ и установить все зависимости, выполнив npm install .

Веб-компоненты Lion хороши настолько, насколько хороши их вклады. Прочтите наше руководство по вкладу и не стесняйтесь улучшать/улучшать Lion. Мы оставляем запросы на функции закрытыми, пока не работаем над ними.