# Divider

# Example

# Basic usage

We climbed to the roof to watch the sunset

Sing the old days again

<p>We climbed to the roof to watch the sunset</p>
<amber-divider></amber-divider>
<p>Sing the old days again</p>
<amber-divider dashed></amber-divider>
Expand Copy

# Vertical partition

Sun WuKong Zhu Bajie Sha Wujing
<div style="display: flex">
  <span>Sun WuKong</span>
  <amber-divider type="vertical"></amber-divider>
  <span>Zhu Bajie</span>
  <amber-divider type="vertical" dashed></amber-divider>
  <span>Sha Wujing</span>
</div>
Expand Copy

# Separate text content usage

With Text Your health Dashed Text My health Right Text Everyone is healthy together Left Text
<amber-divider>With Text</amber-divider>
Your health
<amber-divider dashed>Dashed Text</amber-divider>
My health
<amber-divider orientation="right">Right Text</amber-divider>
Everyone is healthy together
<amber-divider orientation="left" dashed>Left Text</amber-divider>
Expand Copy

# API

Parameter Explain Type Optional value Default value
type Horizontal or vertical string horizontal/vertical horizontal
dashed Dotted line boolean boolean false
orientation Text position string left/right center

← Notification →