# @edux-design/chrome 中文文档
规范地址：https://npmcn.com/package/%40edux-design/chrome/
版本：0\.6\.0
npm 元数据更新时间：2026-11-03T11:03:06.758Z
中文译文更新时间：2026-11-14T09:54:12.524Z
软件包许可：未声明
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40edux-design/chrome
原文对照：https://npmcn.com/package/%40edux-design/chrome/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：236 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react ^19\.1\.0，react-dom ^19\.1\.0，@edux-design/tokens ^0\.2\.3
- 首次发布：2025-09-26T23:57:40.328Z
- 最新版本发布：2026-11-03T11:03:06.558Z
- 近 30 天下载量：2086（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 15 个）
## 中文简介
反应的侧边栏原始人( S)`Sidebar`, (中文(简体) ), `SidebarHeader`, (中文(简体) ), `SidebarSection`, (中文(简体) ), `SidebarItem`, (中文(简体) ), `SidebarFooter`)用于在Edux产品中构建应用铬. 组件管理扩展/缩合状态、倒塌视图的工具提示和组件
## 安装
```sh
npm install @edux-design/chrome
```
也可以使用：`pnpm add @edux-design/chrome`、`yarn add @edux-design/chrome`、`bun add @edux-design/chrome`
## README
# @ edux- design/ chrome (英语)
反应的侧边栏原始人( S)`Sidebar`, (中文(简体) ), `SidebarHeader`, (中文(简体) ), `SidebarSection`, (中文(简体) ), `SidebarItem`, (中文(简体) ), `SidebarFooter`)用于在Edux产品中构建应用铬. 组件管理扩展/缩合状态、倒塌视图的工具提示以及一致的间隔/焦点样式.
* * *
## 安装
```bash
pnpm add @edux-design/chrome @edux-design/utils @edux-design/tooltips @edux-design/icons
# or
npm install @edux-design/chrome @edux-design/utils @edux-design/tooltips @edux-design/icons
```
端点 : `react@^19.1.0`, (中文(简体) ), `react-dom@^19.1.0`。 。 。 .
## 托肯合同
侧边栏导航和配置文件行使用已声明的 `gap-12` 间隔符; 所申报的页眉和页脚使用 `py-12`而倒塌的铁路使用 已声明 `w-72` 符号 。 扩大的铁路宽度`240px`),页眉高 (单位:千美元)`60px`),和标志包装宽度(`40px`保持清晰的元件几何 因为当前主题没有匹配的已声明的维度. 页脚 阴影伪元素保持其空 `content` 2px 翻译为本地 执行细节.
没有引入新的语义符号 。 消费者应进口 `@edux-design/tokens/theme` 故共享的公用设施,是坚定不移的.
* * *
## 使用量
```jsx
import {
Sidebar,
SidebarHeader,
SidebarSection,
SidebarItem,
SidebarFooter,
} from "@edux-design/chrome";
import { Users, Settings } from "@edux-design/icons";
export function AppChrome() {
return (
Edux} />
} label="People" active />
} label="Settings" />
);
}
```
### 特征
- 内部上下文轨道 `isExpanded` 并打开切换按钮 `SidebarHeader`。 。 。 .
- 当崩溃时,项目会显示工具提示( 通过 `@edux-design/tooltips`因此,标签仍然可以发现.
- 部分在倒塌时会自动隐藏其头衔来保持柱子的瘦弱.
- 页脚内容粘贴到底部用于账户/相片控制.
* * *
## 发展
```bash
pnpm --filter @edux-design/chrome lint
pnpm --filter @edux-design/chrome check-types
pnpm --filter @edux-design/chrome build
```
故事现场 `src/demos/Sidebar.stories.jsx` 并覆盖扩大的州/州.
* * *
## 页:1
- `SidebarItem` 使列表项目具有重点`TooltipTrigger`) (中文(简体) ). 过 `onClick` 或用路由逻辑来包裹它(例如, `next/link` 通过 `asChild` (如果需要的话).
- 内部的托多斯 `Sidebar.jsx` (avatar 预设, 修补) 如果您需要增强的话, 是很好的启动问题 .
- 因为布局依赖于Tailwind指使,所以保持了最小的覆盖来避免应用程序之间的漂移.
## 嵌入面板
对于非模式检查员,搜索和编辑码头,请使用8个 `DockedPanel*` 原始的 原始的 原始的 它们和航海是分开的 `Sidebar*` API (英语). 见 [API和整合指南](https://npmcn.com/package/%40edux-design/chrome/docs/docked-panel.md) 用于进口、类别/残留目标、卷轴所有权、主题和有效载荷-当地出口绘图。 故事书演示在下面 **色调/ Docked小组**。 。 。 .
## 其他构成部分
[语义侧边栏页脚简介](https://npmcn.com/package/%40edux-design/chrome/docs/sidebar-profile.md)。 。 。 .
[特征页铬](https://npmcn.com/package/%40edux-design/chrome/docs/feature-page.md)。 。 。 .
[可调整的相片和手柄](https://npmcn.com/package/%40edux-design/chrome/docs/resizable-panes.md)。 。 。 .
## 卷起高价
`useScrollShadows`, (中文(简体) ), `observeScrollShadows` 财务报告和审定财务报表 `HORIZONTAL_SCROLL_SHADOW_SIDES` 在不创建的情况下观察已有的视图 取景口包装器. 它们支持可变还原替换,四个物理边缘,阈值, 内容/ Viewport 调整大小、 RTL 和清理。 可选的内置阴影使用 现有 `--color-border-subtle` 语义颜色; 主机覆盖仍为装饰 必须通过指针。 见 [API、东道方迁移清单和 核查指南](https://npmcn.com/package/%40edux-design/chrome/docs/scroll-shadows.md)。 。 。 .
## 已控制和嵌入的侧边栏
`Sidebar` 保留其现有的扩展应用默认值( 240px 已扩展, 有) `w-72` 倒塌的阶级和风景高度。 使用 `expanded` 与 `onExpandedChange(next: boolean)` 用于主机控制的扩展,或 `defaultExpanded` 对于初始无控制的值。 每个已启用, 未取消 切换激活请求更改一次 。 控制到的更新和默认更改 道具不会发出回电。 主机可能会拒绝受控请求.
根向前移出原生属性/样式/事件和 `HTMLElement` 参考: 它的默认可访问名称仍然是“ Sidebar 导航”; 提供您自己的 `aria-label`编号 :`aria-labelledby`公开 `data-sidebar`, (中文(简体) ), `data-expanded`, (中文(简体) ), `data-layout` 财务报告和审定财务报表 `data-scroll-mode` 标记描述组件状态.
使用 `layout="embedded"` 以填补没有固定应用程序宽度、 视图端口的受限主机 高度,边框或阴影。 嵌入模式使命名为本地 `nav`· ; app模式保留已存在的/补充的语义. 土著 `role` 财务报告和审定财务报表 可访问的命名道具可能覆盖这些默认值以适应主机地标. `scrollMode="internal"` (默认)给予支持 `data-sidebar-scroll` 区域中微高安全弹性滚动. `scrollProps` 财务报告和审定财务报表 `scrollRef` 揭露实际的地道属性,阶级/风格,事件和裁判. `scrollMode="external"` 让祖先自己卷起. 根状/卷状区域在整个扩展和卷轴-模式变化中是稳定的. 变化 `layout` 切换语义根元素并更新root/scroll refs; 为长生交互内容选择稳定的布局. Chrome现有的外溢观察者提供内部边缘阴影 滚动模式不附带内部溢出观察员.
`SidebarHeader` 接受翻译 `expandLabel`编号 :`collapseLabel`,本地标题 道具/道具,以及 `toggleProps`编号 :`toggleRef` 为它的按钮。 切换类型, 扩展状态 控制协会仍然由组成部分拥有. `toggleProps.onClick` 或 根 抓取处理器可以取消扩展请求 `preventDefault`。 。 。 . 折叠后的物品保留其无障碍名称. 折叠保留按钮焦点; 如果它删除了有焦点的标志/控制,则焦点恢复到切换(或根). `onCollapseAutoFocus(event)` 可能防止回收物选择主机倒置. 外出焦点保存. 根的默认值 `tabIndex=-1` 添加无标签站 . 土著 `hidden` 财务报告和审定财务报表 `inert` 根道具支持保持导航的主机 关闭时挂起. `hidden` 压制根的弹性显示; 主机 仍然拥有移动焦点到可见的控制器,然后隐藏导航.
```tsx
{/* existing SidebarItems */}
```
路线、权限、断点、外在移动可见度和焦点返回 关闭主机仍然是主机政策。 移动演示使用扩展请求和 关闭/重新打开其外部主机的公用参考器, 不含英文选择器, 宽度 检查或合成点击。 故事书的侧边栏合同 覆盖控制, 嵌入式内部/外部卷轴,可移动,可翻译的标签和光/暗模式.
## 常见问题
### @edux-design/chrome 是什么？
反应的侧边栏原始人\( S\)Sidebar, \(中文\(简体\) \), SidebarHeader, \(中文\(简体\) \), SidebarSection, \(中文\(简体\) \), SidebarItem, \(中文\(简体\) \), SidebarFooter\)用于在Edux产品中构建应用铬\. 组件管理扩展/缩合状态、倒塌视图的工具提示和组件
### 如何安装 @edux-design/chrome？
在项目目录运行 npm install @edux-design/chrome，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.1\.0）、react-dom（^19\.1\.0）、@edux-design/tokens（^0\.2\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @edux-design/chrome 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @edux-design/chrome 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @edux-design/chrome 可以商用吗？
@edux-design/chrome 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。
### @edux-design/chrome 的下载量有多少？
根据 npm 官方下载统计，@edux-design/chrome 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,086 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @edux-design/chrome 还在维护吗？
最新版本 0\.6\.0 发布于 2026/11/03（11 天前）；至今共发布 19 个版本，其中过去 12 个月发布了 15 个；首次发布于 2025/09/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。