Divider

2024-04-12 07:34

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:

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"
  }
}