欧
@cplieger/ui 是一种设计语言和它上所建的组件,用于浏览器应用程序绘制其与平版HTML和DOM代码的接口.
样式表样式为浏览器自己的元素和一组 .cp-* 课,光和暗, 从几色种子 每个应用程序集。 每个脚本只添加浏览器所缺少的东西,如菜单的密钥或祝酒会队列. 它没有运行时间依赖和船舶作为只使用无害环境管理的TypeScript源,因此它需要一个编译TypeScript 6或更晚的捆绑器. 它需要Chrome或Edge 147,Firefox 147或Safari 26.4或后期.
为什么用它
- 对话框、弹出和披露是浏览器自己的
<dialog>, (中文(简体) ),popover财务报告和审定财务报表<details>,所以聚焦, Escape, 弹出器外的媒体 和顶层的工作 没有脚本. - 每个控件都为鼠标或从上个正指针取出指针的一高一大小本身,因此一行字段和按钮会排列在桌面上和拇指下.
- 样式表计算出每个颜色步骤,主题和和谐的颜色都来自口音和中和的花色,测试时会保存出每对文字并填充到它的对比.
- 每个组件都从你打的电话开始,在装入时不碰任何东西,所以一个捆绑器会掉入你没有导入的东西. 留在页面上的人需要
AbortSignal在它的一生中.
考虑 Pico CSS 软件 用于内容页面上的无类样式,或 肖莱斯 用于网络组件.
安装
npm i @cplieger/ui
# or
npx jsr add @cplieger/ui
使用量
导入样式表, 设置 class="cp" 打开 <html> 并设定种子:
import "@cplieger/ui/css/system";
:root {
--cp-accent-h: 255;
--cp-accent-c: 0.137;
}
以其类和浏览器的元素来构建,然后在启动时添加页面所需的脚本 :
<button class="cp-button" type="button" popovertarget="sort">Sort</button>
<div class="cp-popover cp-menu" popover id="sort" role="menu">
<button role="menuitemradio" aria-checked="true" type="button">Name</button>
<button role="menuitemradio" aria-checked="false" type="button">Added</button>
</div>
import { installAnchors } from "@cplieger/ui/anchor";
import { enhanceMenu } from "@cplieger/ui/menu";
import { installPress } from "@cplieger/ui/press";
import { toast } from "@cplieger/ui/toast";
const page = new AbortController();
installPress({ signal: page.signal });
installAnchors({ signal: page.signal });
enhanceMenu(sortMenu, { signal: page.signal, onSelect: (item) => sortBy(item.textContent) });
toast({ kind: "success", title: "Saved" });
子路径
| 从 | 它所持有的 |
|---|---|
@cplieger/ui/css/system | 设计语言的样式表,仅在 npm 上 |
@cplieger/ui/fonts/* | 其两个字体, 仅在 npm 上 |
@cplieger/ui/icons | 卢西德在包裹中的线条 自己画的几幅画 还有画的工厂 |
@cplieger/ui/<module> | 一个组件的脚本 |
API 密码
每个模块都是一个子路径,按其用途分类如下:
- 重叠 : 对话框, (中文(简体) ), 询问, (中文(简体) ), 锁定, (中文(简体) ), 菜单 财务报告和审定财务报表 工具提示。 。 。 .
- 反馈 : 祝酒词, (中文(简体) ), 发布 财务报告和审定财务报表 骨架。 。 。 .
- 按钮 : 确认, (中文(简体) ), 切换 财务报告和审定财务报表 转弯。 。 。 .
- 窗体和导航: 连接测试, (中文(简体) ), 公开 财务报告和审定财务报表 列表细节。 。 。 .
- 每个页面共享的行为 : 新闻, (中文(简体) ), 指针, (中文(简体) ), 无线电焦点, (中文(简体) ), 旋转焦点, (中文(简体) ), 滚动, (中文(简体) ), 药, (中文(简体) ), 主题 财务报告和审定财务报表 视图过渡。 。 。 .
- 图标数字 :
createIcons, (中文(简体) ),iconNames财务报告和审定财务报表ownIconNames。 。 。 .
本文全文取自文件评论 日 尔。对于信号,按键 DOM 渲染、请求和服务器动作,使用 @cplieger/reactive上面的应用程序通过它的主人 signal 这里每个组件.
文档
- 这个 原则 是否决定每一部分如下.
- 这个 设计语言 覆盖类型、布局、触摸、形状和运动,以及 颜色 种子、台阶、音调和和谐的颜色.
- 构成部分 列出每一类样式表船.
- 设计模式 覆盖加载、表单、表格、标签、对话框、通知、第一运行、导航和单词 设置 财务报告和审定财务报表 账户屏幕 在他们自己的页面.
- 从早期的子路径移动 绘制每个子路径 之前的释放带到它的替换.
贷项
- 图标是 卢西德包裹的中风重画.
- 字体为 Atkinson 超可视性下一个 财务报告和审定财务报表 阿特金森超能单曲。 。 。 .
- 和谐的颜色遵循 亲相色调。 。 。 .
捐款
见 捐款额。 。 。 .
免责声明
这个项目是精心设计的,遵循安全最佳做法,但打算供个人/自发使用。 不保证生产环境的适宜性. 自己冒险使用.
这个项目是在大赦国际的协助下建立的。 人类维护者定义建筑,监督执行,并作出所有最终决定.
许可证
阿帕奇2.0 (英语). 见 自由主义。 。 。 .
第三方的归属 第三次议会 NoTICES.md。 。 。 .