# @flopay/ui 中文文档 规范地址：https://npmcn.com/package/%40flopay/ui/ 版本：1\.14\.5 npm 元数据更新时间：2026-11-15T16:11:57.257Z 中文译文更新时间：2026-11-15T00:26:41.264Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40flopay/ui 原文对照：https://npmcn.com/package/%40flopay/ui/?lang=original 项目主页：https://github.com/TeamFloPay/ui#readme 源码仓库：https://github.com/TeamFloPay/ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：607 kB，35 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：4 个 - peer 依赖：next \>=15，react ^19，react-dom ^19 - 首次发布：2026-06-09T11:24:19.979Z - 最新版本发布：2026-11-15T16:11:57.051Z - 近 30 天下载量：3191（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：27（近 12 个月 27 个） ## 中文简介 FloPay共享设计系统——设计代号,一个Tailwind v4预设,以及React原始相通于着陆,演示,docs,和仪表板. ## 安装 ```sh npm install @flopay/ui ``` 也可以使用：`pnpm add @flopay/ui`、`yarn add @flopay/ui`、`bun add @flopay/ui` ## README # @ flopay/ ui (英语) 共享的 FloPay 设计系统——用于设计脚本值的罐装表 由 CSS 和交易邮件共享, 一个 Tailwind v4 主题预设, 以及一个小 原生反应 使用时间 `landing`, (中文(简体) ), `demo`, (中文(简体) ), `docs`,以及 `dashboard`。 。 。 . 没错 **符号层的框架不可知性**: 相同的 CSS 自定义属性 驱动 Plain-CSS 应用程序(登陆、演示)和 Tailwind v4 应用程序(Docs, 仪表板。 一旦在这里更改一个符号,每个应用程序都会继承它. ## 安装 ```bash pnpm add @flopay/ui ``` `react` 财务报告和审定财务报表 `react-dom` (单位:千美元)`^19`)是同行依赖关系(只有在导入时才需要) 反应组件). ## 使用量 ### 1\. Plain-CSS应用程序(登陆、演示) 在您的顶端导入全部( 重置 + 令牌 + 共享组件类) 全局样式表 : ```css /* app/globals.css */ @import "@flopay/ui/styles"; /* ...your page-specific CSS, using var(--brand), var(--text), etc. */ ``` 或者选樱桃: ```css @import "@flopay/ui/styles/tokens.css"; /* :root design tokens only */ @import "@flopay/ui/styles/reset.css"; @import "@flopay/ui/styles/components.css"; /* .btn-primary, .nav, .footer, .card ... */ ``` ### 2\. 尾风v4应用软件(文件、仪表板) 在 Tailwind 后添加预设 。 它将符号登记为主题值,所以 公用事业 `bg-brand`, (中文(简体) ), `text-text-secondary`, (中文(简体) ), `border-border`,以及 `font-sans` 对共享符号的解析: ```css /* app/globals.css */ @import "tailwindcss"; @import "@flopay/ui/styles/preset.css"; ``` ```tsx ``` 预设用途 `@theme inline`,所以请 `.dark` 覆盖在 `tokens.css` 应用 运行时不重编. ### 3\. 原始反应 ```tsx import { Button, Container, Section, SectionHeader, Badge, Card, cn } from "@flopay/ui"; Live … ; ``` 原始人制造了共享组件类,所以他们在Plain-CSS工作 应用程序( 导入 `components.css`在Tailwind应用软件中 他们通过 `className` + 键 `cn()`) (中文(简体) ). #### 核对清单和分步指示数 设置核对表的勾选列表和向导的步数指标。 他们不需要 提供商或仪表板代码,除 `ChecklistSkeleton`是因为 `useId`,因此它们也从服务器组件中渲染出. ```tsx import Link from "next/link"; import { Checklist, ChecklistRow, ChecklistSkeleton, StepIndicator } from "@flopay/ui"; {loading ? ( // role="status", announced as "Loading" ) : ( )} ; ``` A 类 `ChecklistRow` 显示在 `success` 当符号 `done` 还有一个 否则空出, 可选 `status` 右侧的文本,并带有 `optional`页:1 中性“可选” `Badge`与 `href` 整行是一个链接:平原 ``, (中文(简体) ), 或您通过的组件 `linkAs` (它收到 `href`, (中文(简体) ), `className` 编辑 行内容),因此软件包从不导入路由器. `StepIndicator` 是一个命令列表。 每一步都会经过自己的地步 `status` (单位:千美元)`done`, (中文(简体) ), `current` 或者说 `upcoming`),因此步骤可以按顺序完成,以及 当前步骤携带 `aria-current="step"`。行和步表示它们的状态 视觉隐藏的文字,所以从未单独用颜色传达:"Done"/"Not" 完成"一行,"取"/"取"/"取"一行. 过 `statusLabels` 要么改变措辞. #### 确认拨号 同意或破坏性步骤的确认/取消提醒对话框。 打电话者拥有 `open` 并提供所有措辞; 对话框仅报告用户的方式 选择. ```tsx "use client"; import { useState } from "react"; import { Button, ConfirmDialog } from "@flopay/ui"; const [open, setOpen] = useState(false); const [saving, setSaving] = useState(false); Customers who leave a cart get a reminder. Terms

} confirmLabel="Yes, send them" cancelLabel="Not now" confirming={saving} onConfirm={async () => { setSaving(true); try { await enableReminders(); setOpen(false); } finally { setSaving(false); } }} onCancel={() => setOpen(false)} />; ``` 清除 `confirming` 当请求也失败时( `finally` (上文):虽如此 设置对话框不能被确认、取消或解除,所以拒绝 离开它 `true` 将用户困入对话框. 虽然 `open` 它让 `role="alertdialog"` 与 `aria-modal="true"`标记 以 `title` 和描述 `description` (文字或节点);同时关闭 使无所事事。 确认通话 `onConfirm`; 取消、 退出和单击 背景说明 `onCancel`,在面板内单击不会拖动 从面板内部开始,到背景结束。 焦点移动到 在打开时取消, Tab 和 Shift+Tab 保留在对话框内, 并关闭焦点 回到打开它的元素。 虽然 `confirming`,两个按钮是 失能和逃逸的背景被忽略了 所以飞行中的请求不能 被开除。 它使(没有传送门)就位,所以它是服务器即位. ### 4\. 销售铬(导航+脚) ```tsx import logo from "@flopay/ui/logo.png"; import { FlopayFooter, Nav } from "@flopay/ui/marketing";