Divider

Mini-program developers can use the Divider component to enhance the organization of content by creating clear visual boundaries between different sections or groups of elements. This topic covers the user experience, attribute details, and sample code for the Divider component.

User experience

The following image shows different dividers:

divider.jpg

Attributes

Attribute

Data type

Default

Description

className

String

N/A

The class name for the root node of the divider.

style

String

N/A

The style for the divider.

direction

String

horizontal

The direction of the divider. Valid values are:

  • horizontal: A horizontal divider.
  • vertical: A vertical divider.

lineColor

String

N/A

The color of the divider line.

lineType

String

solid

The type of the divider line. Valid values are:

  • solid: A solid-line divider.
  • dashed: A dashed-line divider.
  • dotted: A dotted-line divider.

lineHeight

Number

N/A

The height of the divider line in pixels. This attribute is applicable when direction is horizontal.

lineWidth

Number

N/A

The width of the divider line in pixels. This attribute is applicable when direction is vertical.

text

String, Slot

N/A

The text content within the divider.

textClassName

String

N/A

The class name for the text within the divider.

textPosition

String

center

The text position relative to the divider. Valid values are:

  • left: The text is left-aligned within the divider.
  • center: The text is centered within the divider.
  • right: The ext is right-aligned with the divider.

textStyle

String

N/A

The style for the text within the divider.

Sample code

The following sample code demonstrates how to create the dividers that are shown in User experience:

.axml

copy
<ant-container
  title="Horizontal divider"
  headerInBox="{{ false }}">
  <ant-divider />
</ant-container>

<ant-container
  title="Dividers with text"
  headerInBox="{{ false }}">
  <ant-divider text="Centered" />
  <ant-divider
    text="Left-aligned"
    textPosition="left" />
  <ant-divider
    text="Right-aligned"
    textPosition="right" />
</ant-container>

<ant-container
  title="Customized horizontal divider"
  headerInBox="{{ false }}">
  <ant-divider
    text="Custom style"
    textStyle="color:#1677ff; fontWeight:600"
    lineHeight="{{ 2 }}"
    lineType="dashed"
    lineColor="#1677ff" />
</ant-container>

<ant-container
  title="Vertical divider"
  headerInBox="{{ false }}">
  <view class="divider-vertical">
    <view>100m</view>
    <ant-divider direction="vertical" />
    <view>No. 1 Road A</view>
  </view>
</ant-container>

.js

copy
Page({
  data: {},
});

.acss

copy
page {
  padding: 24px;
}
.divider-vertical {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #cccccc;
}

.json

copy
{
  "defaultTitle": "Divider",
  "usingComponents": {
    "ant-divider": "antd-mini/es/Divider/index",
    "ant-container": "antd-mini/es/Container/index"
  }
}