Divider 分割线

区隔内容的分割线。

何时使用

• 对不同章节的文本段落进行分割。
• 对行内文字/链接进行分割，例如表格的操作列。

示例

基本用法

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

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

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

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

demodemodemo

<template>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
    te dicta? Refert tamen, quo modo.
  </div>
  <f-divider />
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
    te dicta? Refert tamen, quo modo.
  </div>
  <f-divider orientation="left">With Text</f-divider>
  <f-divider>With Text</f-divider>
  <f-divider orientation="right">With Text</f-divider>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
    te dicta? Refert tamen, quo modo.
  </div>
  <f-divider dashed />
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
    te dicta? Refert tamen, quo modo.
  </div>
  <f-divider>垂直分割线</f-divider>

  <div class="demo-items">
    <span>demo</span>
    <f-divider type="vertical" />
    <span>demo</span>
    <f-divider dashed type="vertical" />
    <span>demo</span>
  </div>
</template>
<style lang="scss" scoped>
.demo-items {
  position: relative;
  height: 30px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
</style>

API

参数	说明	类型	默认值	版本
dashed	是否虚线	boolean	false
orientation	分割线标题的位置	left | right | center	center
orientationMargin	标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 right	string | number	-	3.0
plain	文字是否显示为普通正文样式	boolean	false	2.2.0
type	水平还是垂直类型	horizontal | vertical	horizontal