# v3.0.0-beta.8 · HeroUI > 新增 3 个组件（Badge、Pagination、Table）、DateField 的多项改进，以及关键的 API / 样式修复。 - 页面: https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 - 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af 2026 年 3 月 2 日 本次发布新增三个组件：[Badge](/systems/heroui/docs/components/badge)、[Pagination](/systems/heroui/docs/components/pagination) 与 [Table](/systems/heroui/docs/components/table)，并为 [DateField](/systems/heroui/docs/components/date-field) 与 [TimeField](/systems/heroui/docs/components/time-field) 提供了新的 `InputContainer` 组合 API。 ⚠️ **破坏性变更**：TextField 的 CSS 类已从 `.text-field` 重命名为 `.textfield`。 ## 安装 升级到最新版本： #### npm ```bash npm i @heroui/styles@beta @heroui/react@beta ``` #### pnpm ```bash pnpm add @heroui/styles@beta @heroui/react@beta ``` #### yarn ```bash yarn add @heroui/styles@beta @heroui/react@beta ``` #### bun ```bash bun add @heroui/styles@beta @heroui/react@beta ``` > **正在使用 AI 助手？** 只需对它说一句「Hey Cursor，把 HeroUI 升级到最新版本」，AI 助手就会自动对比版本并应用必要的变更。了解更多请参阅 [HeroUI MCP 服务器](/docs/ui-for-agents/mcp-server)。 ## 新增功能 ### 新组件 - **[Badge](#badge)**：紧凑的状态 + 计数指示器，可配置颜色、变体、放置位置与尺寸。（[文档](/systems/heroui/docs/components/badge)） - **[Pagination](#pagination)**：分页相关的复合组件基元，提供摘要、省略号以及上一页 / 下一页等控件。（[文档](/systems/heroui/docs/components/pagination)） - **[Table](#table)**：数据表格基元，支持排序、选择、列宽调整、异步加载以及表脚组合。（[文档](/systems/heroui/docs/components/table)） ### Badge 新增徽章基元，可用于计数、标签以及通过 `Badge.Anchor` 与 `Badge.Label` 锚定的浮层。 > 示例 `badge-basic`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 ### Pagination 新增导航组件，由可组合的部件构成（`Root`、`Content`、`Item`、`Link`、`Previous`、`Next`、`Summary`、`Ellipsis`）。 > 示例 `pagination-with-ellipsis`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 ### Table 基于 React Aria 构建的复合数据表格，支持可排序的列、行选择、自定义单元格、加载更多哨兵行以及可调整宽度的列。 > 示例 `table-basic`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 **自定义单元格：** > 示例 `table-custom-cells`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 **分页：** > 示例 `table-pagination`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 **空状态：** > 示例 `table-empty-state`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 ## 组件 + API 改进 ### DateField 与 TimeField 的增强 `DateField` 与 `TimeField` 现在暴露了 `InputContainer`，用于在前缀与后缀内容之间包裹输入段（segment）。 **之前：** ```tsx ... {(segment) => } ... ``` **之后：** ```tsx ... {(segment) => } ... ``` > 示例 `date-range-picker-input-container`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-beta-8 ## ⚠️ 破坏性变更 ### TextField 类名 + 路径重命名 为避免与 Tailwind 的 `text-*` 工具类前缀冲突，TextField 的样式命名已统一调整。 | 组件 | 旧类名 | 新类名 | 说明 | |------|--------|--------|------| | **TextField Root** | `.text-field` | `.textfield` | 根类名重命名 | | **TextField Full Width** | `.text-field--full-width` | `.textfield--full-width` | 修饰类重命名 | 同一变更涉及的其他重命名： - 样式文件：`text-field.css` -> `textfield.css` - 样式导出路径：`@heroui/styles/src/components/text-field` -> `@heroui/styles/src/components/textfield` ## 样式修复 - **RangeCalendar**：为日历单元格添加圆角，优化范围选择的视觉效果（[#6270](https://github.com/heroui-inc/heroui/pull/6270)） ## Bug 修复 - 通过将 `isRequired` 转化为 `data-required`，为 **DatePicker** 与 **DateRangePicker** 补齐了必填状态的红色星号行为（[#6270](https://github.com/heroui-inc/heroui/pull/6270)） - 修复了 **Autocomplete** 与 **Select** 中触发器无效状态样式缺失的问题——将 invalid 样式限定在根状态范围内（[#6270](https://github.com/heroui-inc/heroui/pull/6270)） - 更新了 TextField 的文档与演示引用，使其指向新的 `textfield-*` demo key 以及对应的源码 / 样式路径（[#6270](https://github.com/heroui-inc/heroui/pull/6270)） ## 链接 - [组件文档](/systems/heroui/docs/components) - [设计系统 - Figma Kit v3](https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3) - [GitHub 仓库](https://github.com/heroui-inc/heroui) - [GitHub PR #6270](https://github.com/heroui-inc/heroui/pull/6270) ## 贡献者 感谢每一位为本次发布做出贡献的开发者！ --- JGuang 全部资源索引: https://jiguang132.com/llms.txt