Будущее родной библиотеки компонентов пользовательского интерфейса веб-компонентов

Web Components

xy-ui

xy-uiWeb ComponentsРазработка кросс-нормативной библиотеки компонентов пользовательского интерфейса.Посмотреть документацию

ссылка на стильAnt Design,Metiral Design.

Адрес проекта GitHub

Документация

Этот документ основан наdocsifyДинамически созданные все компоненты в этой статье являются интерактивными экземплярами.

теперь интегрированgitalkСистема комментариев, если у вас есть какие-либо связанные вопросы, вы можете оставить сообщение в области комментариев ниже.

характеристика

  • 跨框架。 Будь тоreact,vueЕго также можно использовать в нативных проектах.
  • компонентный.shadow domОн действительно реализует компонентизацию стилей и функций.
  • родной класс. Компонент подобен использованиюdivтот самый ярлык.
  • Нет зависимостей. Чистый натив, без компиляции препроцессора.
  • Доступность. Поддержка доступа клавиатуры.

в общем

При реализации функциональности компонента следуйтеCSSГосподин,JavaScriptЧто касается вспомогательных идей,UIРазделяйте бизнес-логику, делая структуру кода более простой.

Напримерxy-buttonНажмите на диффузию воды имеет волновой эффект, это использоватьCSSреализовать,JavaScript

.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: var(--x,0); 
    top: var(--y,0);
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}
.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}

Подробности смотрите в исходном коде. Большинство компонентов имеют схожую конструкцию.

совместимость

Современные браузеры.

Включая мобильный терминал, не поддерживаетсяIE.

IEРодной не поддерживаетсяcustomElements,webcomponentsjsМожет быть достигнутIEсовместимы, но многоCSSФункция по-прежнему не работает, так что сдавайся

Установить

В настоящее время не размещаетсяnpm, допустимыйgithubчтобы получить последние файлы.

Каталог выглядит следующим образом:

.
└── xy-ui
    ├── components //功能组件
    |   ├── xy-icon.js
    |   └── ...
    └── iconfont //图标库
        └── icon.svg

Будуcomponentsа такжеiconfontпапку в проект.

полагаться

Использование некоторых компонентов должно зависеть от других компонентов, зависимости следующие

компоненты зависимости описывать
xy-button xy-icon,xy-loading кнопка.组件使用了iconа такжеloadingАтрибуты.
xy-icon без значок.
xy-slider xy-tips Горка.组件使用了showtipsАтрибуты.
xy-select xy-button Выбросить селектор. Используется внутри компонентаxy-buttonКомбинация.
xy-tab xy-button Страница закладок. Кнопки навигации компонентов используютxy-button.
xy-loading без нагрузка.
xy-switch без выключатель.
xy-checkbox без Большой выбор.
xy-radio без Единственный выбор.
xy-tips без намекать.
xy-message xy-icon Глобальная подсказка. Используйте значок информацииxy-icon.
xy-dialog xy-icon,xy-button,xy-loading Всплывающая подсказка. Используйте значок информацииxy-iconУбедитесь, что кнопка «Отмена» используетсяxy-button. компонент используетloadingАтрибуты.
xy-layout без макет.
xy-input xy-icon,xy-button,xy-tips Поле ввода. компонент используетiconсвойства, при этомxy-buttonИнтерактивный, используется проверка формыxy-tipsуведомление о сообщении.
xy-textarea То же Многострочное поле ввода. То же.

Напрямую вводить отдельные компоненты без зависимостейjsТо есть есть зависимые компоненты, которые нужно ввестиjs.

Для использования в одиночкуxy-tipsкомпоненты, просто ссылкаxy-tips.js.

// .
// └── project
//     ├── components
//     |   └── xy-tips.js
//     └── index.html
import './components/xy-tips.js';

Для использования в одиночкуxy-inputкомпонент, на который следует ссылатьсяxy-input.js,xy-button.js,xy-icon.js,xy-tips.js.

// └── project
//     ├── components
//     |   ├── xy-input.js
//     |   ├── xy-button.js
//     |   ├── xy-icon.js
//     |   └── xy-tips.js
//     └── index.html
import './components/xy-input.js';

В большинстве случаев все ссылки

Цитировать

HTML-ссылка

<script type="module">
    import './components/xy-button.js';
</script>
<xy-button>button</xy-button>

Современные браузеры поддерживают роднойimportсинтаксис, но будьте осторожныscriptтипtype="module".

ссылка на реактивный проект

import './components/xy-icon.js';
ReactDOM.render(<xy-button>button</xy-button>, document.body);

оreactиспользуется вWeb ComponentsДетали внимания могут относиться кreact.doc — это China.org/docs/Web-co…

ссылка на проект vue

Аналогично нативному, исследования пока нет.

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

Существует несколько способов использования компонента:

HTML-тег

Это наиболее распространенное использование (рекомендуется).

<xy-button>button</xy-button>

document.createElement

также черезdocument.createElementсоздать элемент

const btn = document.createElement('xy-button');
document.body.appenChild(btn);

новый оператор

Пользовательские компоненты передаютсяclassОпределяетсяnewсоздать экземпляр.

import XyButton from './components/xy-button.js';
const btn = new XyButton();
document.body.appenChild(btn);

разное

В большинстве случаев компоненты можно рассматривать как обычныеhtmlЭтикетка,

такие как предоставление<xy-button>button</xy-button>Есть несколько способов добавить события

<xy-button onclick="alert(5)">button</xy-button>

btn.onclick = function(){
    alert(5)
}

btn.addEventListener('click',function(){
    alert(5)
})

Пользовательские события могут проходить толькоaddEventListenerСвязывать

Например, приобретение элементов полностью соответствуетhtmlправило

<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3" id="tab3">tab3</xy-tab-content>
</xy-tab>

const tab3 = document.getElementById('tab3');
tab3.parentNode;//xy-tab

Булевые атрибуты также соответствуют основной спецификации компонентов (Add и удаление атрибутов), такие как

<xy-dialog show></xy-dialog> <!-- 显示 -->
<xy-dialog></xy-dialog> <!-- 隐藏 -->
<xy-button loading>button</xy-button> <!-- 加载中 -->
<xy-button>button</xy-button> <!-- 正常 -->

Короче говоря, в большинстве случаев относитесь к этому как к обычномуhtmlМетка (не обращайте внимания на структуру теневого дома) просто прекрасна, как это сделать раньше, так и сейчас, просто добавьте новый метод.

Для получения более подробной информации, пожалуйстаПосмотреть документацию, добро пожаловать, звезда~

Категории