# 分割符 divider
# 描述
用于让用户在表单选择多个信息项。
# 使用效果
# 使用方法
在.ux
文件中引入组件
<import name="my-divider" src="apex-ui/components/divider/index"></import>
1
# 示例
<template>
<div class="wrap">
<text class="title">基本用法</text>
<my-divider content="加载已经完成,没有其他数据"></my-divider>
<my-divider content="加载已经完成,没有其他数据" color="#2d8cf0" line-color="#2d8cf0"></my-divider>
<my-divider content="加载已经完成,没有其他数据" line-color="#2d8cf0"></my-divider>
<my-divider content="加载已经完成,没有其他数据" color="#ed3f14" line-color="#ed3f14"></my-divider>
<my-divider content="加载已经完成,没有其他数据" color="#ff9900" line-color="#ff9900"></my-divider>
<text class="title">自定义内容</text>
<my-divider color="#2d8cf0" line-color="#2d8cf0"><text>加载已经完成,没有其他数据</text></my-divider>
<my-divider color="#ed3f14" line-color="#ed3f14"><text>加载已经完成,没有其他数据</text></my-divider>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
flex-direction: column;
flex-wrap: wrap;
.title {
margin: 20px;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# API
# 组件属性
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
content | String | - | 分割线提示内容 |
height | Number | 48 | 分割线组件高度 |
color | String | '#80848f' | 分割线文字颜色 |
lineColor | String | '#e9eaec' | 分割线线的颜色 |
size | Number | 24 | 提示文字大小 |
bgColor | String | #ffffff | 分割线文字背景色 |
← 卡片 card 手风琴 accordion →