# @bigtablet/design-system 中文文档 规范地址：https://npmcn.com/package/%40bigtablet/design-system/ 版本：4\.6\.0 npm 元数据更新时间：2026-11-06T08:28:43.942Z 中文译文更新时间：2026-11-08T02:22:35.811Z 软件包许可：SEE LICENSE IN LICENSE 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bigtablet/design-system 原文对照：https://npmcn.com/package/%40bigtablet/design-system/?lang=original 项目主页：https://github.com/Bigtablet/bigtablet-design-system#readme 源码仓库：https://github.com/Bigtablet/bigtablet-design-system ## 关键信息（来自 npm 元数据） - 包体积（解压后）：997 kB，210 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：next \>=15，react ^19，react-dom ^19，lucide-react \>=0\.552\.0 - 首次发布：2025-11-06T01:26:44.804Z - 最新版本发布：2026-11-06T08:28:43.546Z - 近 30 天下载量：5029（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：170（近 12 个月 164 个） ## 中文简介 Bigtablet 设计系统 UI 组件 ## 安装 ```sh npm install @bigtablet/design-system ``` 也可以使用：`pnpm add @bigtablet/design-system`、`yarn add @bigtablet/design-system`、`bun add @bigtablet/design-system` ## README ![Bigtablet Design System](https://github.com/user-attachments/assets/420a15cc-5be3-447f-9c64-068e946cb118) ### 大表设计系统 统一的UI图书馆为Bigtablet产品提供动力. 工作为明. 以符为所建. 有暗模式的飞船. [![npm](https://img.shields.io/npm/v/@bigtablet/design-system?style=for-the-badge&color=121212&labelColor=000)](https://www.npmjs.com/package/@bigtablet/design-system) [![license](https://img.shields.io/badge/license-Bigtablet-303841?style=for-the-badge&labelColor=000)](https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md) [![ci](https://img.shields.io/github/actions/workflow/status/Bigtablet/bigtablet-design-system/ci.yml?style=for-the-badge&color=10b981&labelColor=000)](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml) [**文档**](https://npmcn.com/package/%40bigtablet/design-system/docs/COMPONENTS.md)  • 妇女  [故事书](https://bigtablet.github.io/bigtablet-design-system)  • 妇女  [国家预防机制](https://www.npmjs.com/package/@bigtablet/design-system)  • 妇女  [🇰🇷](https://npmcn.com/package/%40bigtablet/design-system/README_KR.md) ```tsx import { ThemeProvider, Button, Modal, useToast } from "@bigtablet/design-system"; // No CSS import needed - each component brings its own CSS plus the shared theme variables, // so a page that uses only Button ships about 3 kB of DS CSS (gzip) instead of 20 kB. // Next.js with webpack: add the package to `experimental.optimizePackageImports` (Turbopack needs nothing). export default function App() { const toast = useToast(); return ( ); } ``` 由Bigtablet为内部产品工作维护的完整React + TypeScript设计系统. 开源参考-外部使用欢迎,但小版本可能包括断开更改. ## 里面的东西 - **40+组件** 横跨窗体、显示、反馈、导航、覆盖和布局 - **13个符号域** - 颜色、打字、相距、运动、半径、高程等 -- -- 暴露在SCSS变量和CSS自定义属性中(加上只显示SCSS) `layout` 域名) - **光 + 暗模式** 从盒子里出来. `[data-theme="dark"]` 或者说 `prefers-color-scheme`,不需要主题提供者(但可通过 `ThemeProvider` 用于运行时间拖动) - **香草JS捆绑** 非反应后端 - Thymeleaf, JSP, PHP, Django - **测试无障碍性** cI 键盘导航中的轴分数 ## 安装 ```bash pnpm add @bigtablet/design-system react@^19 react-dom@^19 lucide-react ``` 要求反应19 + 清晰反应 + 0.552. Next.js 是一个可选的对等依赖,时间为 `>=15`。 。 。 . **单行设置** - 自动检测软件包管理器+框架 ```bash curl -fsSL https://raw.githubusercontent.com/Bigtablet/bigtablet-design-system/main/scripts/setup.sh | sh ``` 检测 npm / 纱线 / pnpm / bun and react / Next.js,安装道克,打印 CSS + 提供者设置步骤. ## 供应商 ```tsx import { ThemeProvider, AlertProvider, ToastProvider } from "@bigtablet/design-system"; {children} ``` 随处取用钩: ```tsx const toast = useToast(); const { showAlert } = useAlert(); toast.success("Saved"); showAlert({ title: "Delete?", showCancel: true, onConfirm: ... }); ``` ## 构成部分
表单按钮 · 图标按钮 · 复制按钮 · 文本字段 · 文本区 · 收音机 · 无线电组 · 分块控制 · 切换 · 下拉 · 过滤 · 日期选择 · 日期选择 · 文件输入 · 图像复制 · 输入
显示· 纸牌 · 英雄 · 阿凡达 · 徽章 · 芯片 · 清单项目 · 表 · 分牌 · 图标 · 包口
反馈警告 · Toast · InlineAlert · Spinner · TopLoading · 线性进展 · Skeleton · 空状态 · 错误状态
导航标签 $ 侧边栏 $ BottomNav $ Naval $ Breadcrumb 菜单 $ 铺设
重叠Modal · 绘图器 · 工具提示 · Popover
版式容器-分件-堆放-网格
系统主题提供
\* 完全API [`docs/COMPONENTS.md`](https://npmcn.com/package/%40bigtablet/design-system/docs/COMPONENTS.md) ## 设计符号 ```scss @use "@bigtablet/design-system/scss/token" as token; .card { background: token.$color_bg_solid; color: token.$color_text_heading; padding: token.$spacing_16; border-radius: token.$radius_md; box-shadow: token.$elevation_level1; } ``` ```css /* from @bigtablet/design-system/style.css */ .card { background: var(--bt-color-bg-solid); color: var(--bt-color-text-heading); border: 1px solid var(--bt-color-border-default); box-shadow: var(--bt-elevation-level1); } ``` > 反应条目 `style.css` 只发出 `--bt-color-*`, (中文(简体) ), `--bt-elevation-*`, (中文(简体) ), `--bt-focus-*`, (中文(简体) ), `--bt-sidebar-*`, (中文(简体) ), `--bt-bottom-nav-*`, (中文(简体) ), `--bt-bottom-inset*`, (中文(简体) ), `--bt-scrollbar-width`, (中文(简体) ), `--bt-z-*`, (中文(简体) ), `--bt-radius-*`, (中文(简体) ), `--bt-spacing-*`, (中文(简体) ), `--bt-font-family`字体大小和行高为 **仅限SCSS** 在本条目上 - 使用 `scss/token` 打字混音器( x)`--bt-font-size-*` 仅存在于 [香草捆绑](https://npmcn.com/package/%40bigtablet/design-system/docs/VANILLA.md)) (中文(简体) ). `colors` • 妇女 `spacing` • 妇女 `typography` • 妇女 `radius` • 妇女 `elevation` • 妇女 `motion` • 妇女 `z-index` • 妇女 `breakpoints` • 妇女 `border-width` • 妇女 `opacity` • 妇女 `skeleton` • 妇女 `icon` • 妇女 `a11y` • 妇女 `layout`仅限常设委员会 ### 尾风 CSS (v4) ```css /* app/globals.css - import before tailwindcss so the layer order is fixed first */ @import "@bigtablet/design-system/tailwind.css"; @import "tailwindcss"; ``` ```tsx import "@bigtablet/design-system/style.css"; // defines the --bt-* values

``` `tailwind.css` 地图 `--bt-color-*` 改为 `--color-bt-*`, (中文(简体) ), `--bt-elevation-*` 编号 : `--bt-focus-ring*` 改为 `--shadow-bt-*`, (中文(简体) ), `--bt-radius-*` 改为 `--radius-bt-*` (单位:千美元)`rounded-bt-md`, (中文(简体) ), `--bt-spacing-*` 改为 `--spacing-bt-*` (单位:千美元)`p-bt-16`和 `--bt-font-family` 改为 `--font-bt` (单位:千美元)`font-bt`(价值不变) `var()`,因此暗模式和您的覆被随之而来 `dark:` 匹配主题`data-theme="dark"`,或操作系统在 `data-theme` 已设置 。 构成部分CSS生活在 `bigtablet` 级联层 (`theme, base, reset, bigtablet, components, utilities`所以公用设施 和你自己的无层CSS 超过它 没有特定的战斗: ` ``` ——全向导 [`docs/VANILLA.md`](https://npmcn.com/package/%40bigtablet/design-system/docs/VANILLA.md) ## 发展 ```bash pnpm install pnpm storybook # localhost:6006 pnpm test # Vitest unit pnpm test:storybook # a11y + Playwright pnpm build # tsup + SCSS copy ``` 出版的《童话》 **[bigtablet.github.io/大表设计系统](https://bigtablet.github.io/bigtablet-design-system)** 并调出 `main`。 。 。 . ## 文档 | | | | --- | --- | | 📚 [构成部分](https://npmcn.com/package/%40bigtablet/design-system/docs/COMPONENTS.md) | API+每个组件的使用 | | 🔄 [移徙](https://npmcn.com/package/%40bigtablet/design-system/docs/MIGRATION.md) | 折旧道具移徙指南 | | 🎨 [他们](https://npmcn.com/package/%40bigtablet/design-system/docs/THEMING.md) | 浅/暗主题系统指南 | | 🏗️ [建筑](https://npmcn.com/package/%40bigtablet/design-system/docs/ARCHITECTURE.md) | 项目结构+设计原则 | | 🤝 [捐款](https://npmcn.com/package/%40bigtablet/design-system/docs/CONTRIBUTING.md) | 设置 + 工作流程 | | 🧪 [测试](https://npmcn.com/package/%40bigtablet/design-system/docs/TESTING.md) | 测试模式 + a11y 测试 | | 🌐 [香草联署材料](https://npmcn.com/package/%40bigtablet/design-system/docs/VANILLA.md) | HTML/CSS/JS 集成 | ## 许可证 凭 [大表牌许可证](https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)。 。 。 . Bigtablet团队小心翼翼的制作. [GitHub 图像](https://github.com/Bigtablet/bigtablet-design-system) • 妇女 [问题](https://github.com/Bigtablet/bigtablet-design-system/issues) • 妇女 [国家预防机制](https://www.npmjs.com/package/@bigtablet/design-system) ## 常见问题 ### @bigtablet/design-system 是什么？ Bigtablet 设计系统 UI 组件 ### 如何安装 @bigtablet/design-system？ 在项目目录运行 npm install @bigtablet/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19）、react-dom（^19）、lucide-react（\>=0\.552\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bigtablet/design-system 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bigtablet/design-system 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @bigtablet/design-system 可以商用吗？ @bigtablet/design-system 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。 ### @bigtablet/design-system 的下载量有多少？ 根据 npm 官方下载统计，@bigtablet/design-system 在 2026/10/08 – 2026/11/06 这 30 天内被下载 5,029 次，日均约 168 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bigtablet/design-system 还在维护吗？ 最新版本 4\.6\.0 发布于 2026/11/06（2 天前）；至今共发布 170 个版本，其中过去 12 个月发布了 164 个；首次发布于 2025/11/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。