@dotnaos/ ui- base (英语)
DotNaos 界面的通用网络基础, 建在共享的上方 @dotnaos/design 软件包.
安装
bun add @dotnaos/ui @dotnaos/ui-base
Web app 在渲染前应该导入完整的公共 UI 样式表 组件 :
import "@dotnaos/ui/styles.css";
导入
import { Button, Card, ThemeProvider } from "@dotnaos/ui-base";
该套件揭露出一个网络组件家族. 布局结构和原生部分生活在 自有软件包, Base 将保持小和域中立 :
import { Button, Card } from "@dotnaos/ui-base";
import { ContentPageLayout } from "@dotnaos/ui-layout";
import { NativeContainer } from "@dotnaos/ui-native";
严格的组件身份和有限槽合同被构建在正常组件中. 有一个
没有单独的严格模式组件树或公共 strict 进入点.
按钮意图和形状表示为一个组件的变体:
<Button variant="primary" label="Save" icon="save" onPress={save} />
<Button variant="secondary" label="Cancel" onPress={cancel} />
<Button variant="ghost" label="More" iconAfter="chevronDown" onPress={open} />
<Button variant="icon" accessibilityLabel="Delete item" icon="trash" onPress={remove} />
公共按钮 API 只接受结构化数据. 图标必须使用 DotNaos 图标目录中的名称 .
自动完成
Autocomplete 是一个带有浮动、模糊和相配建议的控制文本输入 :
import { Autocomplete } from "@dotnaos/ui-base";
<Autocomplete
accessibilityLabel="Project"
value={query}
onValueChange={setQuery}
options={[
{ value: "Design System", label: "Design System" },
{ value: "DevOps Client", label: "DevOps Client" },
]}
/>
设定 keepOpenOnSelect 用于连续完成,例如浏览相继路径段.
选择后出现新的建议, 无需按键; 逃脱和模糊仍然关闭 .
在聚焦的同时,浮面板在过滤和取取过程中会保持挂载. 装入保留
前一个结果可见但不活跃,输入中有一个小中性旋转器; 第一个
请使用安静的占位符 。 空结果显示 No suggestions。两个状态都无法选择.
匹配的字符在周围的文本颜色中使用了微妙的中分量,而不用下划线.
可选 backAction 在列表上方添加单独的导航按钮. 从来都不是
自动结果或部分箭头键包:从第一个结果开始的新 Up 按键
聚焦, Enter 激活, Down 返回到第一个结果 。 停止按压
在第一个结果。 逃出会关闭弹出并返回焦点到输入.
启用 horizontalNavigation 以权利接受积极结果并援引 backAction
在弹出打开时左转。 修改键、文本选择和组成保留
文本编辑行为; 持有水平箭头不会跳过多关.
第一个启用的结果是自动选择的 。 箭头键导航, 输入接受,
逃逸则免职。 标签通常离开输入;选择重复的 Tab 补全
completeOnTab (Shift+Tab 总是离开). 接受结果时 value 输入
和电话 onSelect 如果提供。 标签中的匹配字符会被突出显示.
在主机中装入远程或文件系统选项, 通过 loading 和弃置的状态
答复。 使用 query 当只匹配部分输入时, 如最后一个
路径段。 组件本身没有进行网络或文件系统访问.
QR 代码
QrCode 使一个自成一体的SVG不接触外部的QR服务。 它保持了所需的四单元静区和固定的黑白对比来进行可靠的扫描.
import { QrCode } from "@dotnaos/ui-base";
<QrCode
accessibilityLabel="Open Devbox Mobile"
value="https://devbox.os-pc.vpn.os-home.net/mobile"
size={184}
/>
使用 errorCorrectionLevel="H" 当代码需要额外的破坏耐受性.
几何能力
四舍五入的几何通过小能力接口表达,而不是重复的特定组件
道具来. RadiusProps 提供 radius="theme" | "full"· ; AspectProps 提供
aspect="auto" | "square"; 和 : GeometryProps 两者兼有 默认是 theme 财务报告和审定财务报表 auto。 。 。 .
theme 遵循活动主题的角化处理. full 总是使用全圆角
独立于全局的 Squircle 或 超椭圆设置。 宽比决定了 silhouette :
<Button variant="primary" label="Continue" radius="full" />
<Surface radius="full">Pill surface</Surface>
<Surface radius="full" aspect="square">Circular surface</Surface>
Container, (中文(简体) ), Surface, (中文(简体) ), Box,以及 Card 暴露两种能力。 文本按钮, Input, (中文(简体) ), Textarea, (中文(简体) ),
编辑 Select 仅显示触发 radius使用同一合同的固定轮廓部件
内部:图标按钮是 full + square,而芯片、滑动部件和分页药片是 full + auto。 。 。 .
内容和布局仅限原始出品不暴露出几何道具.
CDN 用户
通过 npm 兼容的 CDN 使用公共 npm 软件包 :
import { Button } from "https://esm.sh/@dotnaos/ui-base@VERSION";
import { Button } from "https://cdn.jsdelivr.net/npm/@dotnaos/ui-base@VERSION/+esm";
import { Button } from "https://unpkg.com/@dotnaos/ui-base@VERSION/dist/index.js";
Unpkg入站点直接服务于已建成的无害环境管理文件。 因为 react, (中文(简体) ), react-dom,以及 react/jsx-runtime 保持对等/运行时间的导入、esm.sh和jsDelivr +esm 提供最平滑的浏览器 CDN 体验 .
构建
bun --filter @dotnaos/ui-base build
许可证发放
此套件以麻省理工学院许可发布并包含 LICENSE 财务报告和审定财务报表 THIRD_PARTY_NOTICES.md 在npm的柏油球.
软件包直接拥有其组件执行,不包或选择其他组件库.