君子耻不修,不耻见污;耻不信,不耻不见信;耻不能,不耻不见用。——荀子

github:

https://github.com/ing-bank/lion

官方文档:

https://lion-web.netlify.app/

Lion 是一组高性能、可访问且灵活的 Web 组件

它们提供了一个无主见的白标签层,可以扩展到您自己的组件层

高性能:专注于在所有相关浏览器中实现出色的性能,具有最少的依赖项

可及性:旨在符合 WCAG 2.2 AA 标准,以创建每个人都可以使用的组件

灵活性:通过 Web Components 和 JavaScript 类提供解决方案,这些类可以使用、采用和扩展以满足所有需求

现代代码:Lion 以纯 es 模块的形式分发

公开函数/类和 Web 组件:以最合适的形式提供功能

注意:我们的演示可能看起来有点平淡无奇,但这是故意的。它们仅带有功能性样式。这是有道理的,因为主要用例是扩展这些组件,如果您这样做,则不想覆盖现有样式。

Guides: Lion

安装:

1
npm i @lion/ui

使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { css } from 'lit';
import { LionInput } from '@lion/ui/input.js';

class MyInput extends LionInput {
static get styles() {
return [
super.styles,
css`
/* your styles here */
`,
];
}
}
customElements.define('my-input', MyInput);

js系统

1
2
3
4
5
6
7
8
9
10
<script type="module">
import { ajax } from '@lion/ui/ajax.js';

ajax
.fetch('data.json')
.then(response => response.json())
.then(data => {
// do something with the data
});
</script>

使用web组件

1
2
3
4
5
<script type="module">
import '@lion/ui/define/lion-input.js';
</script>

<lion-input name="firstName"></lion-input>