硅
一个定制、可访问和完全输入的React组件库。 它将核心的UI原始相配上更高级的构件,都可以通过CSS自定义属性来进行主题.
安装
npm install @fairshare/silicon
React和React DOM是同级依赖关系. 反应18和19得到支持.
图标来自Font Cousidon Pro(工具箱规范,固件规范 IconByName 财务报告和审定财务报表 IconPicker因此,安装需要 Pro
npm 标志。 点 @fortawesome 在Font Wousne 的注册中显示范围( 此 repo ) .npmrc 并设定一个符号:
npm config set "//npm.fontawesome.com/:_authToken" YOUR_TOKEN
使用
在应用程序根附近导入样式表, 然后从包中导入组件 :
import '@fairshare/silicon/styles.css'
import { Badge, Button, Card } from '@fairshare/silicon'
export function Project() {
return (
<Card title="Project" extra={<Badge variant="success">Active</Badge>}>
<Button>Open</Button>
</Card>
)
}
包船作为无害环境管理,包括类型脚本申报.
构成部分
- 原始内容: Antonion, Avatar, Badge, Banner, Board, Breadcrumbs, Button, Card, Checkbox, Combobox, Dialog, Drawer, 可编辑文本, 字段, 过滤器, IconPicker, 输入, 标签, Menu, Meter, 数字字段, PGination, Popover, 进步, RadioGroup, Row Menu, 选择, 设置, Skeleton, 滑动器, Spinner, Switch, Table, Tabs, Tabs, Tag Input, Toast, Tooltip
- 构件: Agent status, ReceptGate, 附件,分支, ChainOfThought, Ceckpoint, CodeBlock, CommunityBadge, Connecting, Connecting, Connecting, Connecting, DiffView, 反馈按钮, InlineCitation, Message Actions, OrgSwitcher, Plan, 即时输入, 队列, simmer, Sidebar, Source, StackTrace, StattCard, 流图, SuggrectingChip, 终端, TestResults, ThinkingBlock, TokenMeter, ToolCallTimline, 树, 用户Profile, WebPreview
组件道具和辅助数据类型从同入站输出.
桌面窗口
WindowManager 提供可拖放、可调整的有界限的工作空间 AppWindow
表面 。 启动开发服务器并访问 /#windows 主题
演示(演示还带有暗模式切换).
import { Button, WindowManager } from '@fairshare/silicon'
<WindowManager
windows={[
{
id: 'notes',
title: 'Notes',
defaultBounds: { x: 24, y: 24, width: 440, height: 320 },
content: <textarea aria-label="Notes" />,
},
]}
style={{ height: 600 }}
>
{manager => <Button onClick={() => manager.open('notes')}>Open notes</Button>}
</WindowManager>
- 将标题栏自由拖过工作空间边缘;窗口可部分保留 关闭屏幕, 一个小标题栏抓取 保持可见的释放。 桌面剪贴板 关闭屏幕内容 。 调整任何边角大小 。 指针取消后退 手势。 双击标题栏以最大化或恢复.
- 将指针拖入工作空间左或右边缘的 24px 以预览 a half-width 版式; 预览在两个侧边外保持活性。 释放 来抓 逃避或指针取消 预览。 拖住一个被撕裂的标题栏可以恢复其浮动大小.
- 每个标题栏都有 安排 菜单 左半边, (中文(简体) ), 右半边,以及 恢复浮动窗口。在标题栏聚焦的情况下, Alt + 左/右坐标 和 Alt + Down 恢复。 演示会 并肩作战 按钮安排两个应用程序.
- 同步辅助 提供空半边的其他打开或最小化窗口. 选择一个组成一对。 逃逸,解开按钮,或点击外部 拾取者离开第一个窗口被打破。 不包括关闭的窗口; 没有拾取器 当没有符合条件的窗口或水平空格不足时出现.
- 佩尔德窗口共享一个分割器. 拖放以调整两者的大小, 尊重 两个最小宽度。 聚焦并使用左/右 (10px), 家/端(限制),或 双击重置为等分之一。 越狱/点球员取消 分数拖放。 比例仅在拖曳完成时保存 .
snapPair内WindowManagerState保留对子及其比例。 分裂者 当窗口最小化/最大化或工作空间太窄时隐藏, 然后当两者可见时返回。 浮动、关闭或去除一对 窗口溶解对子。 App 内容通过配对保留挂载.- 自定义 shell 可以使用
snapAssistId, (中文(简体) ),completeSnapAssist(id), (中文(简体) ),dismissSnapAssist(),以及setSplitRatio(ratio)。 。 。 .SnapAssist导出为 a 演示文稿选取器. 皮克州是短暂的,没有坚持下去. - 使用
manager.snap(id, 'left' | 'right')财务报告和审定财务报表manager.restore(id)习惯 任务栏。 Snaping 保持了正常的边框并包含在保存的布局中,通过 选项snap属性。 最大化崩溃窗口并恢复它 返回到该半个;通过排列返回到浮动边界. - 抓取了一半的工作空间大小 。 如果工作空间窄于两次
一个窗口
minWidth,而一个已断开的窗口则使用全宽并 当空间可用时,返回到它的一半。 边缘抓取和菜单动作 按此大小被禁用; 程序 API 仍然可以选择快取一面. - 标签到标题栏并使用箭头键来由 10px 移动,或 将 Shift + 箭头移动到 调整大小 。 窗口控制有可访问标签 。 聚焦内容提升了它的窗口.
- 最小化保存应用程序内容 。 关闭卸载; 重新打开使用
它保留了界限,但含有新的内容。 应用程序拥有未保存的更改处理.
设定
closable: false以省去亲密动作. minWidth编号 :minHeight默认为 240 / 160px。 工作空间界限 当取景端较小时优先。 调整工作空间的大小 普通并恢复内部的界限; 扩展后不会恢复已丢弃的几何.defaultLayout恢复一个WindowManagerState· ;onLayoutChange初次报告 状态和随后的变化。 该应用程序拥有验证和持久性. 尽可能使用独特而稳定的ID并记住窗口定义.useWindowManager揭露关于自定义贝壳的状态和行动;AppWindow实值 也可作为定位母体内的受控组件。 供应 父的维度为area当它直接使用.
工作空间切换、生产任务栏/开始菜单和自动 存储被故意留给下一层。 视窗是非模式的,并做 而非陷阱焦点;嵌入式跨源框架拥有其内部焦点行为.
公平共享应用程序
@fairshare/ui-kit/app 是 FairShare 应用程序的客户端,其服务器
用途 碳它涵盖:
- 仅邀请登录身份平台,使用设置
/api/config· ; - aPI 客户端发送 ID 令牌, 当它被刷新一次 被抛弃,如果它再次被拒绝,就签出字来;
- 页面助手.
这需要 @firebase/app 财务报告和审定财务报表 @firebase/auth,是可选对等点
依赖性:只使用组件的应用程序不需要.
import '@fairshare/ui-kit/styles.css'
import '@fairshare/ui-kit/app.css' // page layout: .shell, .page, .form, ...
import { start } from '@fairshare/ui-kit/app'
start({ name: 'Neon', noAccount: 'Ask an administrator to invite you.', app: (user) => <Shell user={user} /> })
页面使用 api, (中文(简体) ), useGet, (中文(简体) ), ApiError, (中文(简体) ), Page, (中文(简体) ), LoadError, (中文(简体) ), useChange, (中文(简体) ),
when 财务报告和审定财务报表 logout 从同一条目。 保留 /config,401处理和
页:1 /api 前缀与碳同步.
他们
覆盖软件包的 CSS 自定义属性 :
:root {
--ui-accent: #6d4aff;
--ui-accent-hover: #5938df;
--ui-radius: 0.5rem;
--ui-font: Inter, system-ui, sans-serif;
}
暗模式默认遵循系统偏好. 强制主题 data-theme="dark" 或者说 data-theme="light" 祖先,例如 <html>。 。 。 .
密度
对于数据重的屏幕,设置 data-density="compact" 打开 <html> (或任何祖先)将高地减半 平板和控制高度的尺度,堆放的块之间的间隙也是如此;图标到标签的间隙保持不变. 高地平面保持最小的相位,因此保持室外:Dialog和Drawer在0.75x站,Popover站和Toast在0.5rem站. 对于自定义密度, 设置 --ui-space 直接; 1 是默认,并且 0.5 是紧凑的 :
.my-grid {
--ui-space: 0.75;
}
大小 : --ui-control-h (32 / 26px,窗体控件和默认按钮), --ui-control-h-sm (24) / 20px, 小内线动作; <Button size="sm"> 财务报告和审定财务报表 <Button size="sm" iconOnly>),以及 --ui-header-h (36 / 28.px,头条的最低高度). 文本使用 --ui-line-height (20px)和 (中文(简体) ) --ui-line-height-sm (16px,用于0.75rem文本和更小的文本),所以排到整像素上,不管页面的行高.
弹出成 <body>,因此设定密度 <html> 如果菜单、选择和对话框都跟着它.
发展
npm install
npm test
npm run build
许可证
麻省理工学院