阿超 > web组件库lion

web组件库lion

2024-09-04

前端

君子耻不修，不耻见污；耻不信，不耻不见信；耻不能，不耻不见用。——荀子

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>