Divider 分隔线

在既有内容结构中建立轻量的视觉分组。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

分隔线用于强化已经存在的内容结构,不代替标题、间距或导航层级。
水平分组
运行配置仅在需要覆盖组织默认策略时调整以下参数。
垂直分组
输入处理输出
带标签的分隔线为同一分区中的次级内容提供简短说明。
账户设置
基本资料通知与语言
垂直分隔线用于同一工具栏中相邻但不同组的操作。
编辑工具栏

使用建议

先建立内容层级

只有标题、分组和间距已经表达结构后,再用 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.
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