网站·基础知识·指南·组件·博客
Lion 是一组高性能、可访问且灵活的 Web 组件。!
它们提供了一个不固定的白标签层,可以扩展到您自己的组件层。
高性能:专注于在所有相关浏览器中以最少的依赖项提供出色的性能。
可访问性:旨在符合 WCAG 2.2 AA 标准,创建每个人都可以访问的组件。
灵活性:通过 Web 组件和 JavaScript 类提供解决方案,可以使用、采用和扩展以满足所有需求。
现代代码: Lion 作为纯 es 模块分发。
公开函数/类和 Web 组件:以最合适的形式提供功能。
注意:我们的演示示例可能看起来很简单而且不太时尚。这是故意的。它们被设计为基本的,因此您可以轻松地向其中添加自己的样式以匹配您的预期设计,而无需处理已有的样式。
探索狮子指南 ▶
npm 我@lion/ui
这是 lion 的主要用例。导入组件类,并将其扩展为您自己的设计系统的组件。
从 'lit' 导入 { css };从 '@lion/ui/input.js' 导入 { LionInput };class MyInput 扩展 LionInput { static get styles() {return [ super.styles, css` /* 这里是你的样式 */ `,]; }}customElements.define('my-input', MyInput);
lion 中有几个具有 JavaScript API 的“系统”。示例有localize
、 overlays
、 ajax
等。
<脚本类型=“模块”> 从'@lion/ui/ajax.js'导入{ajax}; ajax.fetch('data.json').then(response => response.json()).then(data => { // 对数据执行一些操作});</script>
您还可以直接使用 lion 元素,尽管这可能不是常见的用例。
<脚本类型=“模块”> 导入 '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>
如果您遇到我们提供的任何软件包的问题,请打开一个新的错误问题。请务必包含对预期行为和当前行为的描述 - 额外添加复制品总是有帮助的。
当您对我们如何改进有想法时,请查看我们的讨论,看看是否有类似的想法或功能请求。如果没有,请将您的功能请求作为新的讨论主题开始。添加标题[Feature Request] My awesome feature
以及您对改进的期望以及用例的描述。
姓名 | 版本 | 描述 |
---|---|---|
@lion/ui | 组件集 | |
@lion/ajax | 一个围绕 fetch 的小包装 | |
单例管理器 | 单例管理器提供了一种方法来确保从多个文件位置加载的单例实例保持单例。如果使用带有单例的包的两个主要版本,则主要有用。 | |
Babel 插件扩展文档 | 一个根据配置重写导入和模板的插件。这使得可以重用源包中的现有文档,同时仍然使用扩展代码。 | |
普罗维登斯分析 | 普罗维登斯是“全视之眼”,通过分析代码生成使用统计数据。它衡量软件的有效性和受欢迎程度。只需几个命令,您就可以衡量(重大)更改的影响,使您的发布过程更加稳定和可预测。 | |
发布文档 | 一种复制和处理您的文档(在单一存储库中)的工具,以便可以将其与您的包一起发布/发送。 | |
备注延伸 | 一个用于通过从源文件导入来扩展 Markdown 的备注插件。 | |
火箭预设扩展狮子文档 | 当维护您自己的 lion 扩展层时,您很可能希望维护类似的文档。复制和重写 Markdown 文件是可行的,但每当有东西发生变化时,你就需要再次复制和重写。要自动执行此操作,您可以使用火箭的此预设。 |
Lion Web Components 旨在面向未来并使用得到良好支持的成熟技术。我们选择的堆栈应该反映这一点。
点亮
新项目管理
打开 Web 组件
现代网络
摩卡
柴
ESLint
更漂亮
ES模块
很多很多的测试
我们从经验中知道,制作高质量、可访问的 UI 组件既困难又耗时:需要多次迭代、大量开发时间和大量测试才能获得适用于各种上下文、支持许多边缘情况并且易于使用的通用组件。可在所有相关屏幕阅读器中访问。
Lion 旨在为您完成繁重的工作。这意味着您只需应用自己的设计系统:通过提供样式、配置组件并在顶部添加一组最小的自定义逻辑。
查看我们的编码指南以获取更多详细信息。
请注意:该项目使用 Npm 工作区。如果您想在本地运行所有演示,您需要至少获得 npm 7+ 并通过执行npm install
安装所有依赖项。
Lion Web Components 的好坏取决于它的贡献。阅读我们的贡献指南并随意增强/改进 Lion。当我们不处理功能请求时,我们会关闭它们。
如果您有任何反馈或问题,请随意创建 github 问题。