示例
直接操作示例,查看组件在具体任务中的状态与反馈。
水平分组
运行配置
高级选项
仅在需要覆盖组织默认策略时调整以下参数。垂直分组
输入处理输出
账户设置
基本资料
可选设置
通知与语言编辑工具栏
使用建议
先建立内容层级
只有标题、分组和间距已经表达结构后,再用 Divider 加强视觉边界。
标签只用于轻量过渡
水平标签适合“高级选项”等短过渡;正式章节仍应使用语义标题。
垂直分隔需要高度来源
垂直 Divider 依赖父容器的明确高度,适合工具栏或并列的短内容。
引入方式
从已验证的公开子路径导入组件;全局样式接入方式见安装指南。
import { BaseDivider } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Divider 只渲染 separator 语义,不会创建章节层级;页面结构与标题导航仍由宿主标记。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseDividerProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
orientation?: 'horizontal' | 'vertical';
label?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseDividerClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | 内容或交互项的排列方向。 | 'horizontal' | 'vertical' | 'horizontal' |
label | 为分隔线提供语义说明的可访问标签。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseDividerClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |