@ edux- design/ chrome (英语)
反应的侧边栏原始人( S)Sidebar, (中文(简体) ), SidebarHeader, (中文(简体) ), SidebarSection, (中文(简体) ), SidebarItem, (中文(简体) ), SidebarFooter)用于在Edux产品中构建应用铬. 组件管理扩展/缩合状态、倒塌视图的工具提示以及一致的间隔/焦点样式.
安装
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 故共享的公用设施,是坚定不移的.
使用量
import {
Sidebar,
SidebarHeader,
SidebarSection,
SidebarItem,
SidebarFooter,
} from "@edux-design/chrome";
import { Users, Settings } from "@edux-design/icons";
export function AppChrome() {
return (
<Sidebar defaultExpanded>
<SidebarHeader logo={<span className="text-lg font-bold">Edux</span>} />
<SidebarSection title="Workspace">
<SidebarItem icon={<Users />} label="People" active />
<SidebarItem icon={<Settings />} label="Settings" />
</SidebarSection>
<SidebarFooter>
<button className="text-sm">Logout</button>
</SidebarFooter>
</Sidebar>
);
}
特征
- 内部上下文轨道
isExpanded并打开切换按钮SidebarHeader。 。 。 . - 当崩溃时,项目会显示工具提示( 通过
@edux-design/tooltips因此,标签仍然可以发现. - 部分在倒塌时会自动隐藏其头衔来保持柱子的瘦弱.
- 页脚内容粘贴到底部用于账户/相片控制.
发展
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和整合指南 用于进口、类别/残留目标、卷轴所有权、主题和有效载荷-当地出口绘图。 故事书演示在下面 色调/ Docked小组。 。 。 .
其他构成部分
语义侧边栏页脚简介。 。 。 .
特征页铬。 。 。 .
可调整的相片和手柄。 。 。 .
卷起高价
useScrollShadows, (中文(简体) ), observeScrollShadows 财务报告和审定财务报表
HORIZONTAL_SCROLL_SHADOW_SIDES 在不创建的情况下观察已有的视图
取景口包装器. 它们支持可变还原替换,四个物理边缘,阈值,
内容/ Viewport 调整大小、 RTL 和清理。 可选的内置阴影使用
现有 --color-border-subtle 语义颜色; 主机覆盖仍为装饰
必须通过指针。 见 API、东道方迁移清单和
核查指南。 。 。 .
已控制和嵌入的侧边栏
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 压制根的弹性显示; 主机
仍然拥有移动焦点到可见的控制器,然后隐藏导航.
<Sidebar
expanded={expanded}
onExpandedChange={setExpanded}
layout="embedded"
aria-label="Book navigation"
ref={sidebarRef}
scrollRef={scrollRef}
scrollProps={{ role: 'region', 'aria-label': 'Book sections', tabIndex: 0 }}
>
<SidebarHeader expandLabel="Expand navigation" collapseLabel="Collapse navigation" />
<SidebarSection title="Sections">{/* existing SidebarItems */}</SidebarSection>
</Sidebar>
路线、权限、断点、外在移动可见度和焦点返回 关闭主机仍然是主机政策。 移动演示使用扩展请求和 关闭/重新打开其外部主机的公用参考器, 不含英文选择器, 宽度 检查或合成点击。 故事书的侧边栏合同 覆盖控制, 嵌入式内部/外部卷轴,可移动,可翻译的标签和光/暗模式.