@devslab/ds-固态
Public SolidJS原始为DDS所使用. 导入 @devslab/dds-solid/styles.css
在应用程序外壳中,然后消耗来自
@devslab/dds-solid。 。 。 .
国家组成部分接受两种受控部件(value编号 :open编号 :checked和
不受管制(defaultValue编号 :defaultOpen编号 :defaultChecked(d) 表格。 对话框拥有
焦点陷阱/返回和逃逸/解雇;Tabs执行WAI-ARIA
键盘模型; ToastProvider 拥有生命周期计时器; 工具提示需要渲染
说吧 aria-describedby 总是附着在实际触发器上.
通过本地化 dismissLabel 改为 ToastProvider 当土司需要手动
解除控制 解除控制 在离开时保留现有的提供者 API
退出控件,所以软件包从不释放出一个英文可访问名称倒置.
使用互动原始 Ark UI 方舟飞行器 内部, 而 DDS 拥有 公共API和视觉标志。 现有进口和回调值保持不变 一样 见 迁移指南 详细信息.
RadioGroup 添加标签组 options (单位:千美元)value, (中文(简体) ), label选项
disabled),与 name, (中文(简体) ), value编号 :defaultValue 财务报告和审定财务报表 onValueChange。现有的独立
Radio 仍为本地人。 使用一个应用程序级别 ToastProvider; 输入本地化
regionLabel 如果通知区域需要一个名称。 提示计时器暂停期间
指针/焦点交互以及浏览器页面闲置时. 非阳性期限
继续敬酒直到解散.
Async Toast 和动作
内部 ToastProvider, (中文(简体) ), useToast() 返回时 show, (中文(简体) ), loading, (中文(简体) ), update, (中文(简体) ),
promise, (中文(简体) ), dismiss 财务报告和审定财务报表 clear所有身份证和寿命周期状态都属于
供养. A 类 loading 语气持续到更新或取消为止
是装饰性的,所以提供一条描述工作的信息.
const toast = useToast();
const id = toast.loading({ message: "Saving changes" });
toast.update(id, { message: "Changes saved", tone: "success" });
const task = toast.promise(() => saveChanges(), {
loading: { message: "Saving changes" },
success: { message: "Changes saved" },
error: { message: "Could not save changes" },
});
// The same ID is available immediately; awaiting preserves the operation's result/error.
const saved = await task;
toast.show({
message: "Changes saved",
action: { label: "View changes", onClick: () => openChanges(saved) },
});
update(id, patch) 保留省略的字段,并更改土司的位置。 一个
明确 undefined 重新设置默认的可选字段; action: null
删除动作。 未知,过期和开除的ID被忽略. 动作是
土生土长的按钮:它先解除了土司,然后再次召回
不提交周围表格.
promise 接受承诺或一次性工厂,包括同步投掷.
内容 success 财务报告和审定财务报表 error 输入也可以是同步函数,接收
结果或原始错误。 它将终端输入合并到加载输入中,
默认终端音符为成功/危险,并使用提供者的常态
装入后持续时间。 它回来了 Promise<T> & { readonly id: string }。 。 。 .
处理拒绝行动,因为你愿意做任何其他承诺。 解散 清场,
关闭、激活动作、手动更新或处理提供者
取代待发通知;和解仍送达呼叫者,但
不运行其终端信息厂或重新创建通知。 如果有的话
终端信息厂丢出,当前通知被驳回
原操作结果保留. 行动和承诺
重新尝试、取消或推断企业的成功.
按钮装入
loading 保留按钮大小和可访问名称:标签被隐藏,而不是被删除
旋转器被拉在上面,所以它旁边的控件不动,被包裹的标签也不包
再来一次(D-043) 装入时保持标签不变;隐藏文本仍然设置宽度.
创建待定动作
屏幕上有数个按钮 需要知道哪个开始工作 传出一面共享旗帜 切入每个按钮,然后按下一键旋转.
import { Button, createPendingAction } from "@devslab/dds-solid";
const action = createPendingAction<"approve" | "reject">();
<Button tone="danger" loading={action.is("reject")} disabled={action.busy()}
onClick={() => action.run("reject", () => decide("reject"))}>Reject</Button>
<Button loading={action.is("approve")} disabled={action.busy()}
onClick={() => action.run("approve", () => decide("approve"))}>Approve</Button>
is(key) 仅适用于运行中的动作,因此只有控制显示进度; busy()
锁住其他的. run 清除状态 当任务解决, 传递其错误, 并且做
其它动作运行时无任何结果, 因此第二次点击不能启动第二次请求 。 过
{ replace: true } 最近的请求应当胜出,例如重新装入列表.
任务收到 AbortSignal 当运行停止计数时中止: reset()运行
换掉它,否则部件就会消失 检查 signal.aborted 每个人等待后,再摸摸
屏幕,或将信号传递给 fetch;没有单独的请求计数器或"仍在挂"旗帜
需要帮助。 晚完成就永远无法清除新的行动.
const list = createPendingAction<"search" | "page">();
const reload = (key: "search" | "page") => list.run(key, async (signal) => {
const rows = await loadRows(filter());
if (!signal.aborted) setRows(rows);
}, { replace: true });
控制台壳导航组
团体默认继续开放。 设定 collapsible: true 给它一个稳定 id 用于扩展状态(否则键是 group-${index}) (中文(简体) ). 只打开活动相撞组, 使用相同的路由匹配和项目 active 覆盖作为导航链接.
LeftNav 也可以单独导出,用于在自己的布局中编译菜单。 这需要 surface, (中文(简体) ), activePath, (中文(简体) ), nav, (中文(简体) ), labels (单位:千美元)nav 财务报告和审定财务报表 badge),下面的扩展道具,以及可选的 onNavigate在里面编曲 ConsoleShell,通过它作为 navigation={<LeftNav ... />};槽取代内置菜单和外壳 nav 可省略。 外壳继续拥有品牌,标题,内容和移动抽屉. 对于自定义菜单,请连接 onNavigate 任何特定应用程序的抽屉处理.
const [expandedGroups, setExpandedGroups] = createSignal<readonly string[]>(["build"]);
<ConsoleShell
{...shellProps}
nav={[{ id: "build", label: "Build", collapsible: true, items: [
{ id: "projects", href: "/dashboard/projects", label: "Projects", icon: <svg viewBox="0 0 16 16"><path d="M2 3h5l2 2h5v8H2z" /></svg> },
] }]}
expandedGroups={expandedGroups()}
onExpandedGroupsChange={setExpandedGroups}
>Content</ConsoleShell>
使用 defaultExpandedGroups 初始状态失控; [] 明确关闭每个相撞组。 使用 expandedGroups 财务报告和审定财务报表 onExpandedGroupsChange 在控制状态。 后来由路由驱动的扩展和持久性属于应用. 项目 icon 装饰; label 仍然提供链接名称和徽章保持其无障碍标签.
日期选择器
import { DatePicker } from "@devslab/dds-solid";
const [date, setDate] = createSignal("");
<DatePicker label="시작 날짜" value={date()} onChange={setDate} />
Ark UI拥有焦点,选择和键盘导航;DDS拥有造型. 已控制 value 用途 YYYY-MM-DD 或者一个空字符串. locale 默认为 ko-KR, (中文(简体) ), timeZone 改为 Asia/Seoul; 可选 min, (中文(简体) ), max 财务报告和审定财务报表 disabled 限制选择。 日出时用时彼克.
时间选择器
import { TimePicker } from "@devslab/dds-solid";
const [closing, setClosing] = createSignal("18:00");
<TimePicker label="마감 시간" value={closing()} onValueChange={setClosing} clearable />
替换本地 type="time" 与 Combobox 控件和列表一起下拉 。 值是24小时 HH:MM 或空字符串; HH:MM:SS 从服务器显示为 HH:MM列表步骤 step 分钟( 默认 10 ) , 并打开以选定位置为中心; 键入 10 过滤器至10:00-10:50,并打出完整的打出时间(甚至从台阶上跳出,例如. 10:45)与 Enter 或离栏时接受.
输入、选择、重叠和共享日历
输入/输入组是通用的本土输入,不只搜索,有标签放置和明确的动作. Combobox/SelectPicker支持固定行虚拟化; DropdownMenu/Popover提供可访问的覆盖; Calendar/DatePicker共享日历视图. 分块控制选择几个可见选项之一(radio-group semics); Number Input是一个本地化的数字字段,带有可选的 − / + 按钮和一个单位,其值为数字或为空.
使用明确的子路径 @devslab/dds-solid/input, (中文(简体) ), /combobox, (中文(简体) ), /select-picker, (中文(简体) ), /dropdown-menu, (中文(简体) ), /popover, (中文(简体) ), /calendar, (中文(简体) ), /date-picker, (中文(简体) ), /time-picker, (中文(简体) ), /segmented-control, (中文(简体) ), /number-input, (中文(简体) ), /date-range-picker, (中文(简体) ), /month-picker,或现有的根导出。 继续导入 styles.css 一次 一次吗 见 通用使用指南。 。 。 .
输入/输入组是通用的本土输入,不只搜索,有标签放置和明确的动作. Combobox/SelectPicker支持固定行虚拟化; DropdownMenu/Popover提供可访问的覆盖; Calendar/DatePicker共享一个日历视图,DateRangPicker(起始~结束期)和MonthPicker(YYY-MM)也使用该视图.
共享应用程序布局
布局,LftNav和TopNav使用常见的几何和打字规则. 见 组成和确切的维度。 。 。 .