Divider

Description of the Divider's function.

Examples

Horizontal

A simple example. The Divider is horizontal by default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

View Code

<div class="wrapper">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
  <Divider />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
  <Divider dashed />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
</div>

<script>
  import { Divider } from "svant";
</script>

<style>
  .wrapper {
    max-width: 450px;
  }
</style>

Title

An inner title can be added using the orientation prop. The heading style can be removed with the plain prop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

View Code

<div class="wrapper">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
  <Divider>Text</Divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
  <Divider orientation="left">Left Text</Divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
  <Divider orientation="right" plain>Plain Right Text</Divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
    merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo
    modo.
  </p>
</div>

<script>
  import { Divider } from "svant";
</script>

<style>
  .wrapper {
    max-width: 450px;
  }
</style>

Vertical

A Divider can also be vertical.

Text

Link

View Code

<span>Text</span>
<Divider type="vertical" />
<a href="/divider">Link</a>
<Divider type="vertical" />
<a href="/divider">Link</a>

<script>
  import { Divider } from "svant";
</script>

API

Attributes

Property	Description	Type	Default
type	Direction if the divider.	horizontal \| vertical	horizontal
dashed	Whether the line is dashed.	Boolean	false
orientation	Position of the title inside the divider.	left \| right \| center	center
plain	Makes the title inside the divider is plain text instead of a heading.	Boolean	false
class	Custom class for the divider.	String\|Object	-
style	Custom style of the divider.	String\|Object	-