@eyeauras/workbench-react
可选反应上下文、钩子、网格门户、布局和对主机中性可重复使用的控制
@eyeauras/workbench 核心键.
安装
npm install @eyeauras/[email protected] @eyeauras/[email protected] react react-dom monaco-editor@^0.52.2 @vscode/codicons
快速启动
需要React/React DOM QQ18.3.1,核心摩纳哥对等器,以及一个有CSS支持的React启用浏览器捆绑器.
反应行渲染通过 @eyeauras/workbench-react/tree; 见
树内容指南。 。 。 .
TypeScript 应用程序也安装 @types/react 财务报告和审定财务报表 @types/react-dom; 安装 @vscode/codicons 用于图标.
import { createWorkbench } from "@eyeauras/workbench";
import { createReactWorkbenchPage, useWorkbench } from "@eyeauras/workbench-react/core";
import "@vscode/codicons/dist/codicon.css";
function Home() {
const workbench = useWorkbench();
return <button onClick={() => workbench.services.notifications.info("Ready")}>Notify</button>;
}
const host = document.createElement("div");
host.style.cssText = "width:100%;height:600px";
document.body.append(host);
const workbench = createWorkbench(host);
workbench.registerPage(createReactWorkbenchPage({ id: "home", title: "Home", render: () => <Home /> }));
workbench.showPage("home");
export function dispose() { workbench.dispose(); host.remove(); }
页面用品 WorkbenchProvider 并处理其反应根。 对于根,你创造自己,包裹
工作车钩 <WorkbenchProvider workbench={workbench}>。需要独立的控制
installWorkbenchStyles(document) 从 @eyeauras/workbench/styles; 提供者安装无样式.
这个 完全快速启动 包括安装和主机设置.
React仍为适配器;核心工作台并非React自有. 见 EyeAuras UI Workbench 存储器 一揽子指导 和实例.
这个 @eyeauras/workbench-react/controls 子路径包括核心的仅生命周期反应适配器
输入框,按钮,反馈按钮,切换,进步列,选择框,ComboBox,以及TagEditor控制. 他们的行为和
DOM 仍为 @eyeauras/workbench/controls; 输入框/ 组合框/ TagEditor 转发本地文件
placeholder 水印加字符串 prefix编号 :suffix 饰相.
适应器状态遵循普通反应合同: value, (中文(简体) ), checked, (中文(简体) ), selectedIndex,以及 values 为:
当主机拒绝编辑时控制并恢复; defaultValue 编号 : defaultValues 消耗
只有在山上。 新的内置提供者、验证器、规范化器或选项身份不处理和
重新创建基础控制.
TagEditor保留了核心键盘,内置编辑,可访问性,IME,和造型行为. 内容
editable 选项只控制重命名;标记仍可移动。 把文件放进去
--ea-tag-editor-* 自定义适配器上的属性 className 宿主(或祖先);他们
继承到核心控件。 稳定槽级列表和可变表位于核心包中
读取。 使用 ariaDescription 当默认的英语键盘帮助必须本地化时.
WorkbenchFeedbackButton 可从根部获取,并且 /controls它使用核心选项
反应节点 icon 插槽和一个 onError(error) 调用。 图标是门户;执行和计时器仍保留
进入核心 更改道具不会重新启动待决动作 。 在它上贴上主题符号 className 主持人.
核心README文件产生语义,稳定的分量和处置. 它不会取代确认按钮.
WorkbenchDropdownMenu, (中文(简体) ), WorkbenchButtonWithDropdown 财务报告和审定财务报表 WorkbenchToolbar 从根部和
/controls。放下控制器借入 contextMenus; 工具栏接收 menus 和菜单标识。 他们适应
关键的核心,只处理自己的控制。 服务和二级变体是建筑
依赖性。 仓库的 docs/ACTIONS.md 记录完整的合同.
常设机构 WorkbenchConfirmButton 财务报告和审定财务报表 WorkbenchToggleTextBox 导出保留原根
和专注的附庸API。 它们现在的可再利用状态和寿命来自轻核心子路径,而
反应相容层保留现有的JSX,ReactNode插槽,原生道具,SSR输出,以及
DOM/无障碍合同.
信件框和输入对话框
使用 workbench.services.messageBoxes.show() 用于保存提示和自定义对话框。 内容收到 a
键入用于验证的动作上下文,注意格式提交和输入焦点。 反应消费者可以使用
renderReactMessageBoxContent(context => <YourContent context={context} />) 从
@eyeauras/workbench-react/core见 信件盒 API 并完成 React 输入示例。 。 。 .
数字上下
WorkbenchNumericUpDown 从软件包根导出,并 /controls它构成现有的
反应自有 WorkbenchNumberField,也由 RandomTimeSpan 和 valueMinMax Range 使用,带有数字
状态。 它使用共享的工作台输入,fiffix,焦点和阶梯主题样式.
import { WorkbenchNumericUpDown } from "@eyeauras/workbench-react/controls";
<WorkbenchNumericUpDown
ariaLabel="Probability"
value={probability}
minimum={0}
maximum={100}
step={0.5}
suffix="%"
onValueChange={setProbability}
/>
value 是一个有限的控制数字。 可选 minimum编号 :maximum 是有限度的; step 是正数
默认值为 1。 打字会保留本地草稿直到 Enter 或模糊 。 空出/ 无效草稿并恢复逃逸
被接受的数值。 将夹子装入边框而不按下小数键键入步格 .
ArrowUp/ArrowDown和按钮从草稿中跳出(或者如果草稿无效而被接受值),
立即承诺并保持焦点。 父母可以接受、改变或拒绝拟议价值;
字段在涂料前调节。 外部价值/约束性变动取代在建草案.
prefix编号 :suffix 是内在、不可编辑的文本。 供应单位 ariaLabel 需要时
可访问名称. disabled 禁用输入和两个动作; id 以本地输入为目标
外部标签. inputClassName 添加输入铬和 inputTestId 在需要时识别输入.
标准紧凑场在350-400 px检查员内工作。 数字显示在演示中
随机时间跨度段 .
WorkbenchNumberField 还从软件包根导出,并且 /controls 用于控制字符串缓冲
消费者。 使用 inputType="text" 与 inputMode="numeric" 或者说 "decimal" 保存原始草稿,例如:
- 财务报告和审定财务报表 12a;呼叫者拥有解析,有效性(ariaInvalid页:1onStep)和改变时间.
onCommit 是可选的:没有它,则模糊并 Enter 获取不承诺政策。 默认 inputType="number"
保留本地数字编辑。 两种模式都采用相同的字体框架,fix和阶梯布局.
原生形式语义
WorkbenchInputBox 转发 id, (中文(简体) ), name, (中文(简体) ), autoComplete, (中文(简体) ), required,以及 readOnly 它的原生输入 而不重建它. autoFocus 注重挂载; selectOnFocus 为复制选择只读结果. onBlur(value) 遵守现有案文 onKeyDown(event) 接收本地键盘事件,包括 preventDefault()。数值变化仍在使用 onValueChange;这些钩子不会引入第二个承诺状态机器.
WorkbenchSelectBox.id 瞄准它的本地选择. WorkbenchToggle.id 支持一个外部 label htmlFor:共享控制激活并聚焦摩纳哥的非本地复选框,尊重残疾状态并删除处理时的收听器. 其可使用的名称尚存 title。 。 。 .
WorkbenchButton 是普通动作,不是本地提交按钮。 要求隐含格式 输入提交或浏览器验证保留其原生 button type="submit" 和已有的窗体处理器; 不要用第二个点击/键盘处理器来模拟提交.
Scalar 滑动事件时间
WorkbenchValueRange 默认为 changeMode="commit": 本地输入预览; 指针放出, 支持范围键放出或模糊一次发出, 如果拒绝, 则恢复接受值 . changeMode="input" 使用同样的 onValueChange ; 释放/blur 从不发送第二个命令。 指针取消恢复当前已接受的值,并且无法撤销已经接受的活的更新 。 外部价值变化取代了本地的草稿. 数字编辑器承诺保留它们在两种模式中的现有行为.
sliderStep 默认数字 step,但接受自己的正数或 "any"。视觉滑动器域不限制数值;使用 minimum编号 :maximum 只有实际界限. showValueEditor={false} 与 showValueReadout 保持一个不可忽略的值和后缀可见.
确认寿命
WorkbenchConfirmButton 和通过范围对象(默认为所有者文件)强制控制共享独占性。 装上另一个控制 范围取消了前一个。 明确独立区域的范围;不增加消费者登记. armTimeoutMs={null} 禁用自失能; 0 仍然是立即超时.
默认策略取消焦点离开控制和外部指针. cancelOnFocusLeave={false} 财务报告和审定财务报表 cancelOnOutsidePointer={false} 保留故意的持久性确认,同时禁用、卸载、明确取消和另一个解除武装. destructive={false} 使用中性主题颜色而不改变脚印。 主删除配置/关闭会话需要持续的政策;AI使用默认的外/焦点政策,不计时. 立即撤走他们.
原生形式复选框
使用 WorkbenchCheckbox 用于窗体复选框和 WorkbenchToggle 为摩纳哥图标切换。 复选框保存本地输入, 所以标签、表单和 :disabled 本地行为,而安装的 Workbench 样式则从本地脚印中的复选框符号中绘制出其框. 它转发本地输入属性并暴露受控 checked 编号 : onCheckedChange. Monaco Toggle 仅限图标的 DIV 不是一个视觉取而代之的. 选择框同时转发 title 财务报告和审定财务报表 ariaInvalid 输入方法健康和描述的实际选择要素.
useWorkbenchConfirm 曝光当前主机演示文稿中相同的控制器后置生命周期. 附加 rootRef 至其稳定的包装和使用 armed, (中文(简体) ), activate 财务报告和审定财务报表 cancel;共享范围和外指寿命仍然具有权威性. 当标准按钮脚印无法保存已存在的屏幕(例如主窗关闭/取消对)时使用. 不复制主机中的注册或状态机器 .
WorkbenchValueRange 接受 appearance="native" 带有主机 className 用于现有本土形式布局(百分比和形成滑动器)。 它使用相同的输入和值值生命周期;浏览器渲染替换了工作板轨道/工具提示,并保留了本地百分比读出 % 旁边的号码。 默认的工作台外观不变.
值程代表数草稿和小数级步骤到 WorkbenchNummericUpDown;空输入不会变为零. inputTestId 达到实际数字输入。 原生外观直接在主机布局中使相同的数值控制.
财产/形式网格
光线@eyeauras/workbench-react/property-grid 出口 Workbench PropertyGrid, 工厂 工厂 工厂 工厂 工厂 工厂, 和Workbench PropertyTrailing(工作中心), 工作中心(Workbench), 工作中心(Workbench), 工作中心(Workbench), 工作中心(Property Trrailing) 已命名的列和显行支持独立的续作. 见 属性网格作者 扩大规模、无障碍、反应迅速 预算和实例。 在主机中安装现有的 Workbench 样式; React 条目不导入 CSS .
工具提示和悬牌
导入 WorkbenchTooltip 从 @eyeauras/workbench-react/hover 并把它变成 WorkbenchProvider。 。 。 .
它接受一名携带DOM参考文件或 targetRef 用于现有元素. content 是反应节点;
设定 interactive 财务报告和审定财务报表 ariaLabel 有动作的牌. position 选择边并 alignment
选择 start, (中文(简体) ), center 或者说 end 在垂直轴上。 相关目标共享a groupId。 。 。 .
适配器使用一个传送门进入核心徘徊寿命周期,保留反应上下文,状态,起草和
重点贯穿所有更新. handleRef 暴露出明确的显示/隐藏/更新/处置控制. 备选案文保留
牌; Alt+Arrow Down 输入后 Escape 关闭. 见
自动指南 用于文本和
图像/按钮示例,分组列表和键盘行为. 控制演示包括 绕行/ 工具提示
和单独的 软锚 几何譬喻.
活动编辑组动作
WorkbenchVscodeGridLayout.activeGroupToolbar 使一个反应命令表面在旁边
选项卡,包括由标签拖放/分页创建的组.
有个控制器 activeTabId,表面等待到该标签属于活动者
组合。 一个团体的明确 toolbar 以优先为准。 更新和组交换机保留
编辑器门户; 处置一组处理其工具栏门户.
中立的核心 renderGroupToolbar(groupId, container) 是倒置渲染器,用于
初始、添加/分割和恢复组。 明确 group.renderToolbar 保留所有权
当供应。 集团拥有退回的可支配物品. 这保存命令表面策略
在消费者中,而电网拥有物理组寿命.