# @estiva-app/ui 中文文档 规范地址：https://npmcn.com/package/%40estiva-app/ui/ 版本：0\.116\.0 npm 元数据更新时间：2026-11-13T21:21:11.160Z 中文译文更新时间：2026-11-13T23:01:29.667Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40estiva-app/ui 原文对照：https://npmcn.com/package/%40estiva-app/ui/?lang=original 项目主页：https://github.com/estiva-app/estiva-ui#readme 源码仓库：https://github.com/estiva-app/estiva-ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：8.3 MB，969 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：4 个 - peer 依赖：react ^19\.0\.0，eslint \>=9，react-dom ^19\.0\.0，@tiptap/pm ^3\.22\.1，tailwindcss ^3\.4\.0，@tiptap/core ^3\.22\.1，@tiptap/react ^3\.22\.1，typescript-eslint ^8\.0\.0，@tiptap/suggestion ^3\.22\.1，@tabler/icons-react ^3\.41\.1，@tiptap/starter-kit ^3\.22\.1，@tiptap/extension-table ^3\.22\.1，@tiptap/extension-mention ^3\.22\.1，eslint-plugin-better-tailwindcss ^4\.7\.0，@tiptap/extension-code-block-lowlight ^3\.22\.1 - 首次发布：2026-08-26T21:01:42.122Z - 最新版本发布：2026-11-13T21:21:10.699Z - 近 30 天下载量：13325（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：175（近 12 个月 175 个） ## 中文简介 Estiva)的设计代币(契约)和为每个Estiva app提供一小套原始(方便). ## 安装 ```sh npm install @estiva-app/ui ``` 也可以使用：`pnpm add @estiva-app/ui`、`yarn add @estiva-app/ui`、`bun add @estiva-app/ui` ## README # @ tiva- app/ ui Estiva的设计标志, 和一小组原始的建在它们上,为 每一个Estiva应用——皮克,船,以及接下来的一切. **托肯斯是合同。 组件是一种便利.** ## 里面有什么东西 - `tailwind-preset.js` - 标志 _名称_,作为尾风预设: 颜色, 类型坡道,光线,阴影,骨架动画. 皮克的,逐字记录. - `tokens.css` - 标志 _数值_,每个主题一个块: `signal` (怎样) 皮克让, `ship` (船舶制造)和 `light` 编号 : `dark` 基础. 每个街区的名字都一样. - 初等——一次一出(见"故事手册"). 每个人的故事 不需要应用数据; 如果一个故事需要固定, 组件不是 原始的,不属于这里. - 行为来自 [基础UI](https://base-ui.com/) (单位:千美元)`@base-ui/react`页:1 用包安装的依赖性:键盘,焦点,角色,形式. 每一个有基础UI对应的组件都在上面被构建. 没什么 改变组件的外观. ## 用这个 ```js // tailwind.config.js import estiva from '@estiva-app/ui/tailwind-preset' export default { presets: [estiva], content: ['./index.html', './src/**/*.{ts,tsx}'], theme: { extend: { /* your app's own tokens, if any */ } }, } ``` ```css /* your entry CSS, before anything that uses a token */ @import '@estiva-app/ui/tokens.css'; ``` ```html ``` 安装它 : ```bash npm install @estiva-app/ui ``` **展开 `estivaContent` 进入您的 `content`。 。 。 .** 尾风不合并 `content` 从预设到计量,参见注释 `tailwind-preset.js` —— 说 所以没有这个,每个类别 仅使用这些组件, 清洗 结果是一个组件以错误的大小渲染而成功的构建 : ```js import estiva, { estivaContent } from '@estiva-app/ui/tailwind-preset' export default { presets: [estiva], content: [...estivaContent, './index.html', './src/**/*.{ts,tsx}'], } ``` ### 规则是.. `@estiva-app/ui/eslint` UI Guardrails 的 规则船 与软件包, 作为 ESLint 插件, 所以是一个应用 获得一个新规则,带有一个版本的凸起。 每个规则都指定要使用的组件 换句话说 有七个——六个街区,一个警告: - `estiva/no-raw-element` 拒绝原始交互元素( e)``, (中文(简体) ), ``, (中文(简体) ), `
`, (中文(简体) ), ``...),并指定要使用的部分,或者说包还没有. - `estiva/no-rebuilt-behaviour` 拒绝已经拥有的部分的行为, 由 : 手: Base UI 导入, `createPortal`,单击或按键的听众 页面,手写箭头键比较 `role` (单位:千美元)`option`, (中文(简体) ), `menu`, (中文(简体) ), `dialog`, (中文(简体) ), `alert`... `tabIndex` 0或更多在一个盒子,和一个卷轴盒 (单位:千美元)`overflow-auto`,任何变体背后). `OWNED_BEHAVIOURS` 列出每一种行为, 基本UI组件 和拥有它的组件。 它找不到一个 框中应滚动而不滚动的框:该框没有可读的类. - `estiva/no-restyled-part` 拒绝通过一个部分 `className` 或内框的类道具——颜色,文本大小,边框,a 角落,一个阴影——并命名该部分的外观道具(c`PART_LOOK_PROPS`) (中文(简体) ). 仅 安置经过(`PLACEMENT`),以及 `EmptyState` 没有补丁. A 类 `Form` 没有自己的布局, 坐在没有空格的盒子里 事物:在它的地盘进入它之前,它会发生什么. - `estiva/no-handmade-header` 拒绝用手绘制的列头栏: a 在一列中以第一行排列,并带有自己的侧贴和标题,其中一列 填充其高度或行有栏高或发线. 它读到 形状,而不是类名称,和名称 `ContainerHeader`。 。 。 . - `estiva/no-handmade-empty-state` 拒绝用手绘制的空状态: a 显示列表行的位置, 当列表是 空无相. 它读到线条的位置,而不是它所说的,和名字 `EmptyState`。它也拒绝 `page`\- 瞄准镜 `EmptyState` 内置 a `ScrollArea` 它的内涵和里面的东西一样高,它坐在那里 上面而不是中间, 跟着应用程序自己的组件进入它们 要找到一个文件. - `estiva/no-native-title` 拒绝 `title` 属性, 浏览器本身 工具提示和名称 `WithTooltip`它燃烧在平地元素和部分 那个手 `title` 内容`