分隔符

分隔符是一条细线，用于在列表和布局中对内容进行分组。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.

视觉指示器

{content}
<Divider>Visual indicator</Divider>
{content}
<Divider>
  <Chip variant="soft" color="neutral" size="sm">
    Visual indicator
  </Chip>
</Divider>
{content}

{content}
<Divider>Visual indicator</Divider>
{content}
<Divider>
  <Chip variant="soft" color="neutral" size="sm">
    Visual indicator
  </Chip>
</Divider>
{content}

按 Enter 开始编辑

当使用 Divider 组件进行视觉装饰时（例如在标题中），请显式指定其 role="presentation"，以确保屏幕阅读器可以播报其内容

<Divider component="div" role="presentation">
  {/* any elements nested inside the role="presentation" preserve their semantics. */}
</Divider>

垂直分隔符

使用 orientation 属性渲染垂直分隔符。

带有文本的垂直分隔符

您还可以渲染带有内容的垂直分隔符。

视觉指示器

{content}
<Divider orientation="vertical">Visual indicator</Divider>
{content}

{content}
<Divider orientation="vertical">Visual indicator</Divider>
{content}

按 Enter 开始编辑

子元素位置

要控制内容的位置，请通过 sx 属性覆盖 CSS 变量 --Divider-childPosition。

<Divider sx={{ '--Divider-childPosition': '20%' }}> {/* the value can be any CSS valid unit */}

视觉指示器

50%

<Stack spacing={1} sx={{ fontSize: 'sm' }}>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
  <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
    Visual indicator
  </Divider>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
</Stack>
<Slider
  value={position}
  min={0}
  max={100}
  step={1}
  valueLabelDisplay="on"
  valueLabelFormat={(value) => `${value}%`}
  onChange={(event, value) => setPosition(value)}
/>

<Stack spacing={1} sx={{ fontSize: 'sm' }}>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
  <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
    Visual indicator
  </Divider>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
</Stack>
<Slider
  value={position}
  min={0}
  max={100}
  step={1}
  valueLabelDisplay="on"
  valueLabelFormat={(value) => `${value}%`}
  onChange={(event, value) => setPosition(value)}
/>

按 Enter 开始编辑

自动调整

当 Divider 是 Card 或 ModalDialog 的直接子元素时，它将自动适应它们的间距和方向。

卡片

请注意 Divider 默认情况下如何从 Card 的边缘延伸到边缘。它还会适应 Card 的方向。

水平

标题

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本

模态对话框

ModalDialog 也发生同样的边缘到边缘的延伸。要选择退出自动调整，请在分隔符上使用 inset="none"。

常见示例

全屏溢出

这是一个 CSS 技巧，可让您将分隔符拉伸到其父边界之外。

使用带有 100vmax 单位的 box-shadow 填充外部空间，然后使用 clip-path: inset(0px -100vmax) 删除垂直溢出。

box-shadowclip-path

无样式

使用 Base UI Divider 完全拥有组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此组件的无样式版本是重度自定义的理想选择，并且捆绑包大小更小。

API

请参阅下面的文档，以获取此处提及的组件的所有 props 和类的完整参考。

<Divider />

分隔符

简介

Playground

组件

渲染带有内容的分隔符

垂直分隔符

带有文本的垂直分隔符

子元素位置

自动调整

卡片

模态对话框

模态框标题

常见示例

全屏溢出

无样式

API