@ 导出者- by- 89soone/ react
为导体设计系统提供可访问回放原始. 互动行为建立在Radix UI上,视觉造型来自 @conductor-by-89soone/css。 。 。 .
安装
pnpm add @conductor-by-89soone/react @conductor-by-89soone/css lucide-react
React and React DOM 18或19是同级依赖关系.
使用
导入样式表一次, 然后从包根导入组件 :
import "@conductor-by-89soone/css";
import { Button, Card } from "@conductor-by-89soone/react";
export function Example() {
return (
<Card>
<Button variant="primary">Continue</Button>
</Card>
);
}
设定 data-cdt-theme="dark" 或者说 data-cdt-theme="light" 在文档根上。 当“导师”样式表缺失时, 开发会建立警告 .
从右到左
设定 dir="rtl" 在文档上将应用程序包入 DirectionProvider。基于 Radix 的组件( Tabs, RadioGroup, ToggleGroup, Selection, 菜单)和 DatePicker 日历从中读取它们的方向,包括哪个箭头键向前移动. Toast.Provider 没有:通过 swipeDirection="left" 在右到左的应用程序.
import { DirectionProvider } from "@conductor-by-89soone/react";
export function App({ children }) {
return <DirectionProvider dir="rtl">{children}</DirectionProvider>;
}
所需资源
节点.js 20或更新,回放18或19,回放DOM 18或19,并 lucide-react 0.400.0或更新(低于2.0.0).
许可证
麻省理工学院
工作台API(CR-041,审查延期)
以下新增为本地审查扩展; 安装先前发布的 0.3.1 包件不提供。 构建并安装匹配的符号, CSS, 和在评估这种变化时一起反应焦油球。 没有组件获取, 认证、 解析搜索语言、 推断关系或重复工作 没有消费者回电.
装入 @conductor-by-89soone/css 一次在应用程序根。 设定
data-cdt-theme="dark" 或者说 data-cdt-theme="light" 打开 html;两个调色板使用
相同的语义键。 没有新的提供者或远程字体要求。 对a
以当地为主的岛屿,通过该岛屿的元素作为 Popover.Content container
因此门户内容继承了它的主题. 一个正文门户继承文档
主题,而不是触发器被嵌入的主题.
在 Next App 路由器中,从根版式导入 CSS,并将状态/召回代码放入
一个小 "use client" 组件。 软件包保存客户端指令
组件模块,并保持其再出口桶无标记。 一个服务器组件
可以使客户端组件具有可序列的数据; 回调函数必须是
在客户端边界内创建。 仅SSR输出不能显示水分
或 RSC 兼容性; 查看执行的消费者的本地验证记录.
披露和重叠
"use client";
import { Tabs, Popover, Collapsible, Button } from "@conductor-by-89soone/react";
export function Filters() {
return <Tabs.Root defaultValue="results" activationMode="manual">
<Tabs.List aria-label="Investigation view">
<Tabs.Trigger value="results">Results</Tabs.Trigger>
<Tabs.Trigger value="history">History</Tabs.Trigger>
<Tabs.Trigger value="restricted" disabled>Unavailable</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="results" forceMount>
<Popover.Root>
<Popover.Trigger asChild><Button>More filters</Button></Popover.Trigger>
<Popover.Content aria-label="Additional filters">
<Collapsible.Root>
<Collapsible.Trigger>Advanced conditions</Collapsible.Trigger>
<Collapsible.Content>Consumer-owned filter fields</Collapsible.Content>
</Collapsible.Root>
<Popover.Close asChild><Button>Close</Button></Popover.Close>
</Popover.Content>
</Popover.Root>
</Tabs.Content>
<Tabs.Content value="history">History supplied by the consumer</Tabs.Content>
</Tabs.Root>;
}
Tabs.Root接受 Radix 选项value/onValueChange, (中文(简体) ),defaultValue, (中文(简体) ),orientation财务报告和审定财务报表activationMode。导师默认为 手动:箭头/家/端移动 焦点, Enter/ Space 激活.automatic选择使用廉价内容. 已禁用触发器被跳过 。 提供初始值。 非活动内容 默认卸载;forceMount保存子状态但保持不活动 隐藏面板。 维持一个面板可以保持它的消费者效应运行.Popover提供Root/Trigger/Anchor/Content/Close/Arrow打开Radix 州,出逃/外解雇,并重点恢复. 给予其内容 可访问名称; 使用asChild以避免巢扣.Collapsible提供Root/Trigger/Content,被控制或不受控制 扩展和残疾道具。 输入/ 空间切换触发器 。 构成部分 不要求扩展数据:保留首发、缓存重开和明确 在消费者中重新尝试政策。 这是公开的,不是完全的Annion API.
搜索、过滤和结果
| API 密码 | 数据和互动合同 | 消费者责任/使用不当 |
|---|---|---|
Combobox | 需求 label, (中文(简体) ), options: {id,label,disabled?}[], (中文(简体) ), value, (中文(简体) ), query, (中文(简体) ), onValueChange, (中文(简体) ), onQueryChange。 。 。 . state 准备就绪/装入/误入; resultsQuery 隐藏 stale 选项批次 。 下行拥有单选键盘行为. IME 组成不强制 Enter . inputRef 目标输入; 转发参考目标包. | 与其原始查询相关联的回复,根据需要提供错误/重试UI,并将所选值与打出文本分开. 不要将单选弹出标签为多选取或用当前查询键发布 stale results . |
MultiSelect | label/options/value/onValueChange,可选禁用;带有已存在的 Radix 复选框控件、本地选项搜索和可移动选定的芯片的字段集/列出。 Tab 到达控件; 空格切换复选框 . | 提供稳定独有的身份证 以及你批准的选项 获取/ 装入/ 错误状态是外部状态 。 不要将这个复选框组作为单一的 Combobox 或推断来自已禁用控件的授权 . |
FilterChip | 文本子女加所需数量 removeLabel/onRemove; 可选禁用。 删除是一个单独命名的按钮 . | 使用“ 移除寄存器过滤器” 等特定标签; 删除一个芯片不会自动解析或重写查询 . |
FilterToolbar | 一个风格化的 div 转发 HTML 属性/ ref 。 它分组了普通可制表控件. | 如果需要, 请给出一个组名; 这不是一个 ARIA 工具栏, 带有旋转箭头键模型 . |
DataTable<Row> | 需求 label/rows/columns/rowId/rowLabel. 列供应 id/header/cell,可选择排序/数字. sort/onSortChange 外部; visibleColumns 和密度控制显示。 语义表,单独命名的预览按钮,没有行点击处理器. | 在通过行前排序全部本地源或请求服务器排序 。 不排序一个光标页并请求全局顺序 。 稳定的身份证必须经过分类/等待。 单元格中的链接仍然独立于选择. |
| 数据表选择/输入 | selectedId/onSelect(id, trigger) 选择一个已装入的行进行预览. hasMore/onLoadMore/loadingMore 显示光标续作 。 没有计算页面或光标存储 . | 在会话状态中保存不透明光标; 在 URL 中共享条件而不使用光标 。 这不是“选择所有结果”。 拥有 URL 替换/推出和权限约束的重置器. |
| 数据表状态 | state: 准备/装入/误入/部分,可选 message;空行数组产生空态。 装入繁忙, 部分/ 过度保留提供的行 。 密度默认为舒适;紧凑是明确的. | 宣告行是否为 stale/ 部分使用信件 。 该组件没有排序,再大小,被针,或虚拟化引擎. |
"use client";
import { useRef, useState } from "react";
import { DataTable, DetailInspector, WorkbenchLayout, CopyButton,
type DataColumn } from "@conductor-by-89soone/react";
type Row = { id: string; title: string };
const rows: Row[] = [{ id: "sample:change:1", title: "검색 맥락 보존 / preserve context" }];
const columns: DataColumn<Row>[] = [
{ id: "title", header: "Title", cell: row => row.title },
];
export function SearchPreview() {
const [selectedId, select] = useState<string | null>(null);
const [width, setWidth] = useState(40);
const trigger = useRef<HTMLButtonElement | null>(null);
const selected = rows.find(row => row.id === selectedId);
return <WorkbenchLayout width={width} onWidthChange={setWidth}
inspector={selected && <DetailInspector label="Selected change"
returnFocusRef={trigger} onClose={() => select(null)}>
<p>{selected.title}</p><code>{selected.id}</code>
<CopyButton value={selected.id} label="Copy identifier" />
</DetailInspector>}>
<DataTable label="Loaded changes" rows={rows} columns={columns}
rowId={row => row.id} rowLabel={row => row.title} selectedId={selectedId}
onSelect={(id, button) => { trigger.current = button; select(id); }} />
</WorkbenchLayout>;
}
WorkbenchLayout * 接受儿童,并配备一名可选择的监察员,其控制下
25-60%的检查员 width (违约40)和 onWidthChange本地范围
控件支持键盘调整;小屏幕堆叠区域. 这不是
可拖动分隔符或模式焦点陷阱. DetailInspector 关闭其
按钮或未处理 onClose,然后聚焦 returnFocusRef 无
正在滚动。 保留选中行; 如果该行消失, 消费者必须
选择有意义的倒置。 预览使用已存在的行数据,不提出请求.
PathList 带 items: {id,label,children?,state?}[]选项
selectedId/onPathSelect。文件夹最初是崩溃的本地细节; Tab 和
输入/空间操作摘要,叶为按钮. state: loading/error 报告
懒惰数据状态;取回/重试是外部状态. 这是一个 路径列表而不是阿里亚人
TreeView:没有树箭键或打字头承诺. Breadcrumb 是一个导航
包装( 默认可访问名称“ qq” ); 供应链接/ 分隔符/ 当前页面
语义从小. Skeleton 需求 label 并报告装入状态.
CopyButton 报告剪贴板成功/失败,并忽略其他反馈
当前值; 为无法使用的剪贴板同时显示可选文本
倒计时。 这些APIs都没有持续存储导航或剪贴板数据.
关系探索
该图也可从可选的 @conductor-by-89soone/react/relation
条目,导出 RelationGraph, (中文(简体) ), layoutRelationNodes和他们的公共类型.
它使用相同的执行和共享的导行样式表,没有额外的
视觉依赖. 在客户端组件中使用此条目或动态导入
以隔离图加载;仅导入按钮不会加载图码.
import { RelationGraph } from "@conductor-by-89soone/react";
export function Relations() {
return <RelationGraph label="Synthetic change relationships" state="partial"
stateMessage="Synthetic data; production relationship service is not connected"
nodes={[
{ id: "sample:change:a", label: "Change A" },
{ id: "sample:change:b", label: "Change B" },
]}
edges={[{ id: "sample:edge:ab", source: "sample:change:a",
target: "sample:change:b", type: "references", label: "references",
evidence: "Synthetic example text links A to B", confidence: "inferred",
ambiguous: true }]} />;
}
RelationGraph 接收节点和边缘;节点ID和边缘ID是独立的,
稳定、有消费者定义的标识。 边缘读取为 来源 标签
目标可选 unresolved/ambiguous/retracted 旗帜是独立的;
将消费者的分离状态映射到 retracted 不丢弃其他旗帜.
缺失的端点元数据显示为无法获取的信息,而不是获取.
confidence 财务报告和审定财务报表 evidence 是文本,而不是推论引擎或 HTML 渲染器.
注意卫生 数据范围 在通过前在服务器上: unavailable 是一个
演示文稿提示,而不是授权,并且不隐藏所提供的私人标签.
永远不要通过未经授权的节点,隐藏的计数,或者无法进入的连接边缘.
节点搜索,类型过滤,节点/对接选择,相邻强调,缩放, 方向性平板按钮,适中视图,和所选证据组成一个只读流. SVG 隐藏在辅助技术中;语义节点/对接表显示 相同的选择和具有正常链接/按钮的信息。 没有图表 编辑、拖入连接、删除、节点移动或递归取回。 节点使用 确定身份命令; 几何位置不是时间, 依赖命令, 合并序列,信心,或重要性. 循环是允许的.
selection/onSelectionChange 财务报告和审定财务报表 viewport/onViewportChange 可加以控制;
否则,他们的状态是本地化的。 消费者可以保留
这些值贯穿它自己的导航,但软件包并没有增加持久性.
state 支持准备/装入/空出/误入/部分 stateMessage 用品
上下文. onRetry 仅对错误进行明确的重试;它不自动翻转.
过滤器可以在不重置选择的情况下隐藏所选的边缘;细节是这样说的.
仅对确认的缺席使用空状态,而不是对未解决或部分数据使用空状态.
通用组件没有生产图端点;演示为合成.
处理状态
import { ProcessingStatus } from "@conductor-by-89soone/react";
export function Processing() {
return <ProcessingStatus label="Synthetic processing stages" stages={[
{ id: "received", label: "Received", status: "complete", detail: "Receipt confirmed" },
{ id: "stored", label: "Durably stored", status: "complete", detail: "Storage confirmed" },
{ id: "processed", label: "Processed", status: "delayed", detail: "Waiting for the consumer worker" },
{ id: "indexed", label: "Indexed", status: "unknown", detail: "Search freshness not confirmed" },
]} />;
}
ProcessingStatus 接受 label 财务报告和审定财务报表 stages 稳定 id, (中文(简体) ), label, (中文(简体) ),
status: complete/pending/delayed/failed/unknown和解释性说明 detail。 。 。 .
可选 action 已经 label/onAction/disabledReason/busy; 在那里省略时
不被允许的动作, 在无法使用时显示理由, 并调回
成果可见。 现有的"时间线","徽"和"按钮"渲染出模式.
本地按钮键盘行为适用. 没有百分比,ETA,请求,
自动重试,或计时器。 一个完整的接收阶段 没有任何关于持久
存储或索引新鲜度。 在部分失败的同时,保留成功阶段.
消费者保留他们已经批准的投票和授权政策.
消费成分的迁移
- 构建和包装所有三个软件包,安装匹配的柏油球,导入CSS一次, ,并在应用程序推出前验证反应对等分辨率和下个水合.
- 用化合物替换本地标签
Tabs部件; 明确选择手动或 自动激活,初始值,控制选择,和面板寿命. 继续从键盘焦点变化中获取昂贵的图像 . - 将本地过滤值/ 选项映射到
Combobox, (中文(简体) ),MultiSelect,以及FilterChip。 。 。 . 继续查询解析、 stale- request 生成、会话绑定光标和 URL 在消费者中替换/推出语义. - 将表格/工作台演示文稿替换为
DataTable/WorkbenchLayout/DetailInspector。 。 。 . 保持稳定身份,流行回用,细节路由,回放回放. 明确添加紧凑密度;现有的卡片样式不变. - 调整已授权的关系
RelationNode/RelationEdge; 保留 方向、模糊性、未解决/分离状态、证据和信心. 保留懒惰的首次扩展并缓存重开; 不打开一个待定 将关系类别归入“不存在的所有关系”。 计划图 API 仍然 需要消费者适配器和生产一体化工作. - 使用
AppShellNavTrigger在相同情况下AppShell上下文( 使用时asChild带有已存在的按钮). 保持路由至主焦点. 仅在消费者复制后删除任何旧动画框倒置 与新软件包的逃出/外-近/导航重点;软件包回归 仅凭测试并不能证明原消费者已经迁移.
这种寄存器改变不会迁移或写给生产消费者. 已发布的版本更改、视觉/API快照、浏览器矩阵、计量捆绑 费用,以及无法进行的检查,必须与执行记录一并审查.