@aoctech/ ui (英语)

CTech组件词汇,位于一地. Base UI 提供无障碍行为; 此软件包 拥有语义符号合同和船舶官方主题,用于账户、DFE、钱包、扑克和 计费. 每种产品都保持其特性,而不会产生相互作用或无障碍性.

npm i @aoctech/ui

消费者供应两样东西

1. 官方主题合同

导入共享符牌一次并范围为产品根上的官方主题. 申请可以 扩展主题,但不能重新定义语义状态的含义.

@import "tailwindcss";
@import "@aoctech/ui/styles.css";

@theme inline {
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-foreground: var(--foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --color-brand-50: var(--brand-50);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-danger-strong: var(--danger-strong);
  --shadow-modal: var(--shadow-modal);
}

import {ThemeProvider} from "@aoctech/ui"

export function App() {
  return <ThemeProvider theme="billing"><BillingApp /></ThemeProvider>
}

通过您自己的 CSS 变量进行拼接: 导入 touch.css 仅限

styles.css 停车 tokens.css 财务报告和审定财务报表 themes.css,以及软件包的出入口(Drawer, Modal, 选择, RowMenu, UserMenu) 携带 data-ctech-theme。定义自己的应用程序 --background, (中文(简体) ), --brand-600,则使否 ThemeProvider 将会看到这些传送门重新漆成一个包 主题。 此类应用程序仅进口触摸规则,自0.4.1起稳定出口:

@import "tailwindcss";
@import "@aoctech/ui/touch.css";

touch.css 是自成一体的(它定义了自身的 --touch-* 变量和输入无)。 这个 @source 下面的行仍然需要.

2. 决 议 @source 线条

Tailwind v4只发出它能看到的类. 它不会扫描 node_modules 默认,所以不 这艘没有风格的船 是最有可能先出错的 安装.

@source "../node_modules/@aoctech/ui/dist";

主题和地位是单独的合同

account, (中文(简体) ), dfe, (中文(简体) ), wallet, (中文(简体) ), poker 财务报告和审定财务报表 billing 改变动作,聚焦,表面和品牌花花. 这个 success, (中文(简体) ), warning 财务报告和审定财务报表 danger 角色保持不变。 只添加一个新产品主题 在它的调色板和对比状态之后,记录在"故事书"中.

密度是地表的一部分

控制默认为触摸大小(44px). 密集的地表选择通过设置一个属性来下移 它的根, 和内部的每个控制如下:

<div data-density="compact">…</div>   {/* 32px controls */}

这就是为什么 Button 没有 size="console":高度由按钮所在位置决定,而不是由每个按钮决定 呼叫网站 记得它在哪屏幕上.

舒适的应用软件内部的紧凑表面是 DensityScope与赤裸的属性不同,它也 到达从里面打开的封面: Drawer, (中文(简体) ), Modal, (中文(简体) ), Select 财务报告和审定财务报表 RowMenu 提交日期: 传送门,载体外 data-density,并遵循最近的距离 ThemeProvider) (中文(简体) ). 因此,一个紧凑的控制台在桌面上也有紧凑的抽屉. Drawer, (中文(简体) ), Modal 财务报告和审定财务报表 Select 还要一个 density 这个道具能超越两者.

<ThemeProvider theme="billing">          {/* the portal: comfortable */}
  <DensityScope density="compact">       {/* the console */}
    <Drawer …/>                          {/* compact as well */}
  </DensityScope>
</ThemeProvider>

触摸:外观紧凑,44px目标

指下(粗指指下取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 sm),紧凑的控制是: 抽签 在36px和 击出 at 44px: 一个隐形 ::after 以它为中心 styles.css (也单独导出为: @aoctech/ui/touch.css)并按键于每个控件的 data-slot没有什么可以窃听的 规则:

• 目标只生长在控制短于44px的轴上,最多靠边 4px (英语). 保留 8px ()gap-2相邻控制之间,在行或堆栈中:两个扩展 然后相会而永不相重叠(用更少的,后期控制会赢得共享边缘).
• 图标按钮保持正方形(36×36所取出,44×44所打出).
• Segmented 片段触碰,所以它们的垂直生长 在每个密度.
• 通过其 Field 标签,目标位于字段内容后面:a 链接或按钮在提示或错误中保留自己的自带.
• 选择选项和菜单项是接触中的44px行.
• 其它任意绘制为控件( 以按钮为样式的链接、 标签) 的选项选择加入类 touch-target控制呼叫者的位置(absolute, (中文(简体) ), fixed, (中文(简体) ), sticky保持其立场.

品牌颜色和状态颜色从未相遇

Button variant="brand" 是唯一一个品牌颜色出现的地方. Badge 带有四个状态 吨数 - neutral, (中文(简体) ), positive, (中文(简体) ), attention, (中文(简体) ), urgent - 他们是 已固定: 从未重新注册到 和表面的口音吻合.

原因是整个家庭都看得出来 一个知道绿色徽章意味着定居的操作员 必须在每台CTech应用程序的每个屏幕上读取;音调随地表变化 声音需要每个应用程序重新学习。 也保持了温和的品牌应用程序的诚实性——账单 特拉科塔坐落在红色的危险附近 规则就是阻止两人在一地上 组件。 (按角色分列是必要的,但还不够:开账单也必须收回。) 品牌染色体下降,直到 danger 是屏幕上唯一饱和的颜色。 )

4个音符是同一套闭合的 CTech API 与人类可读状态字符串同时发射, 因此,徽章使服务器所说的话,而不是客户端对一个内部谜团的映射.

这是什么

| NetworkProvider + 键 OfflineBanner + 键 UnavailableScreen + 键 useNetwork QQ网络韧性:一个健康探测器,一个可访问的下行/降级条形,以及一个完整的503页,可以自行返回. 加上无框架 createLiveness, (中文(简体) ), withRetry 财务报告和审定财务报表 useOnlineStatus。见 文件/网络抗御能力. 自0.9.0

导航 : BottomNav 财务报告和审定财务报表 UserMenu

也不知道路线 打电话的人说哪件东西 active (或 current从 它自己的路由器,和通过 renderLink 因此链接导航客户端; 没有它是一个平面 <a> 实值 已经完成。 项目取用 href (链接)或 onClick (一个按钮).

import Link from "next/link"
import {BottomNav, BottomNavSpacer, UserMenu, type RenderLink} from "@aoctech/ui"

const renderLink: RenderLink = props => <Link {...props} />

<UserMenu
  name={session.name}
  email={session.email}
  imageUrl={session.avatarUrl}
  views={[
    {label: "Portal", href: "/dashboard", current: !inConsole},
    {label: "Console", href: "/console/overview", current: inConsole},
  ]}
  onSignOut={logout}
  renderLink={renderLink}
/>

<main>
  {children}
  <BottomNavSpacer />   {/* keeps the page's end clear of the bar; gone from md up */}
</main>
<BottomNav
  renderLink={renderLink}
  action={{label: "Novo", icon: <Plus />, onClick: openCreate}}   // or null on screens without one
  items={[
    {label: "Resumo", icon: <Home />, href: "/console/finance", active: pathname === "/console/finance"},
    {label: "A pagar/receber", icon: <Receipt />, href: "/console/finance/bills", active: is("/bills")},
    {label: "Extrato", icon: <List />, href: "/console/finance/statement", active: is("/statement")},
    {type: "more", label: "Mais", icon: <Menu />, items: [
      {label: "Recorrências", icon: <Repeat />, href: "/console/finance/recurrences", active: is("/recurrences")},
      {label: "Cartões", icon: <CreditCard />, href: "/console/finance/cards", active: is("/cards")},
      {label: "Importar", icon: <Upload />, href: "/console/finance/import", active: is("/import")},
      {label: "Relatórios", icon: <Chart />, href: "/console/finance/reports", active: is("/reports"), group: "Análise"},
      {label: "Configuração", icon: <Settings />, href: "/console/finance/accounts", active: is("/accounts"), group: "Análise"},
    ]},
  ]}
/>

• 最多四个分页{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}行动都平分了 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}行动是死中心 标签包成两个 线条(a后) / 首先,不要截断;反正要缩短.
• "多"标签 当任何工作表项目是( ) 时显示活动active (原始内容存档于2017-03-25). overse. 工作表项目 同样的 group 列在该标题下。 选择一个关闭工作表; 逃离,关闭 按钮并刷新并关闭,焦点返回标签.
• 安全区域 : 栏杆本身由 env(safe-area-inset-bottom) ——应用需要 viewport-fit=cover 在它的视门元中, 设置非零。 清除页面的结尾 与 <BottomNavSpacer />,或与 bottomNavInset 类字符串在拥有它的容器上 垫底.
• 总是触摸大小随便 data-density 说:台上紧凑的操纵台仍然是 拇指在电话。 栏标高为72px,并有320px屏幕上至少60px宽;平板行高为48px.
• 复制 : locale (默认) "pt-BR"和 labels 与 Modal —— 说 BottomNav 标签 nav, (中文(简体) ), close· ; UserMenu 标签 trigger, (中文(简体) ), views, (中文(简体) ), signOut。 。 。 .

相互作用: Segmented, (中文(简体) ), Select, (中文(简体) ), RowMenu, (中文(简体) ), SwipeRow

import {RowMenu, Segmented, Select, SwipeRow, type RowMenuItem} from "@aoctech/ui"

<Segmented
  label="Período"                       // names the group
  value={period}
  onValueChange={setPeriod}
  options={[
    {value: "6m", label: "6 m", name: "6 meses"},   // a short label carries its full name
    {value: "chart", label: <ChartIcon />, name: "Gráfico"},
  ]}
  fill                                  // share a phone's full width
/>

<Field label="Bandeira" htmlFor="brand">
  <Select
    id="brand"
    value={brand}                       // "" is "nothing chosen"
    onValueChange={setBrand}
    options={[{value: "visa", label: "Visa", icon: <VisaMark />}]}   // icons are decoration
    none="Nenhuma"                      // or `none` for the catalogue's "Nenhum" / "None"
    actions={[{label: "Nova bandeira", icon: <Plus />, onSelect: openCreate}]}
  />
</Field>

Select其动作只在开放列表中的媒体上运行(reason === "item-press": 基准UI类型 “n”不能开始“Novo espaço”并离开页面.

刷子从来都不是唯一的入口. SwipeRow 在手指下显示一行的次要动作; 同样的行动也必须是一个新闻媒介,在 RowMenu 在行上(或者在行中插入按钮) 这儿有房间). 所揭示的条是惰性的,直到被揭发,所以键盘或屏幕读取器使用 菜单.

const actions: RowMenuItem[] = [
  {key: "edit", label: "Editar", onSelect: openEdit},
  {key: "del", label: "Excluir", destructive: true, onSelect: confirmDelete},   // open a confirmation
]

<li>
  <SwipeRow actions={actions}>                {/* the front: opaque, it covers the actions */}
    <div className="flex items-center gap-3 py-2.5">
      <span className="flex-1">Aluguel</span>
      <RowMenu label="Mais ações: Aluguel" items={actions} />
    </div>
  </SwipeRow>
</li>

• 8px后手势锁定到轴上( 行集) touch-action: pan-y垂直拖动 保存页面的滚动,打开所显示的宽度的35%,然后反转,保存 每页打开一行,然后关闭在别处或逃逸的报刊上。 接下来 prefers-reduced-motion。 。 。 .
• 拖曳从不吃下个自拍; 第二指头、 取消的手势、 丢失的指针抓取或 窗口失去焦点返回行休息.
• 仅默认电话( E)media="(max-width: 39.999rem)"(三); media={null} 到处打扫.
• 对于自定义的布局, useSwipeReveal(width, {enabled, media}) 返回时 {open, active, rowId, offset, dragging, close, bind}设置 : data-swipe-row={rowId} 在行的根并传播 bind 在滑动的部分.

故意地小取来. 当第二个应用需要时, 组件到达, 而不是在预期中—— 整个 取出这一点是停止 保存四份, 和一个消费者的组件是 还是一份.

提取队列和非域边界均位于 文件/部件库存。源调色板参考文献和添加产品的规则存在于 文件/主题登记.md。 。 。 .

测试

npm test   # node:test for pure logic, vitest + jsdom for component behaviour, then the build

故事书

npm run storybook

该目录包括一个主题登记册和一个覆盖国家的网页。 它的工具栏开关全部五个 主题和密度模式,使视觉漂移在组件释放前可见.

同伴

react >=18, (中文(简体) ), react-dom >=18, (中文(简体) ), @base-ui/react >=1.7和Tailwind v4 在消费应用程序.