分隔线

1. 组件概述

分隔线是一个内容展示组件，用于在页面内容之间添加视觉分隔。它可以帮助用户区分不同的内容区块，使页面结构更加清晰。分隔线支持水平和垂直两种方向，可以设置实线或虚线样式，还可以在分隔线中间添加标题文字。当你需要将页面划分为多个逻辑区域，或者在两段内容之间增加视觉间隔时，就可以使用分隔线组件。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：内容分区。在一个学习辅导页面中，使用水平分隔线将”题目描述”和”AI 解答”两个区域分开，让用户能够清晰地区分问题和答案。可以在分隔线中添加标题”解答”，使分区更加明确。
• 场景二：步骤分隔。在一个多步骤的操作流程页面中，使用带标题的分隔线标注每个步骤，如”第一步：输入问题”、“第二步：选择模型”等，帮助用户理解当前所处的操作阶段。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基本折叠组

配置项	说明
标题	分隔线中间显示的文字内容。设置标题后，分隔线会在中间断开并显示标题文字，形成带标题的分隔效果。可以设置为静态文字或绑定变量。注意：只有水平方向的分隔线才支持显示标题，垂直方向时标题不会显示。

状态折叠组

配置项	说明
可见	控制分隔线是否显示。默认可见。
隐藏	控制分隔线是否隐藏。与「可见」相反。

设计

基本样式折叠组

配置项	说明
类型	分隔线的线条样式。可选：实线（默认，连续的直线）、虚线（由短线段组成的断续线条）。虚线样式更轻量，适合不需要强调分隔的场景。
方向	分隔线的方向。可选：水平（默认，横向分隔）、垂直（纵向分隔）。水平分隔线用于上下内容的分隔，垂直分隔线用于左右内容的分隔。
角度	分隔线的旋转角度，范围为 -360 到 360 度。默认为 0（不旋转）。可以通过设置角度让分隔线倾斜显示，实现特殊的视觉效果。
线长	分隔线的长度。水平方向时控制宽度，垂直方向时控制高度。可以设置具体数值或百分比，默认占满容器宽度。
线宽	分隔线的粗细。数值越大线条越粗。默认为 1px。
颜色	分隔线的颜色。可以选择纯色，也支持渐变色，实现更丰富的视觉效果。
外边距	分隔线与周围元素的间距。可以分别设置上、下、左、右四个方向的外边距，调整分隔线在页面中的位置。

标题样式折叠组

此折叠组仅在设置了标题且方向为水平时显示。

配置项	说明
位置	标题在分隔线上的位置。可选：居左、居中（默认）、居右。根据页面布局选择合适的位置。
距离	标题与最近边框之间的距离。仅在标题位置为居左或居右时显示此配置。默认值为 5%。例如标题居左时，此距离表示标题距离左边框的距离。
文字	标题的文字样式设置，包括字体、字号、颜色、粗细等。可以根据页面整体风格调整标题的显示效果。
外边距	标题文字与分隔线之间的间距。可以调整标题与两侧线条的距离，使布局更加美观。