# divider - [权限列表](#zh-cn_topic_0000001127125060_section11257113618419) - [子组件](#zh-cn_topic_0000001127125060_section9288143101012) - [属性](#zh-cn_topic_0000001127125060_section2907183951110) - [样式](#zh-cn_topic_0000001127125060_section5775351116) - [事件](#zh-cn_topic_0000001127125060_section1944813319536) - [方法](#zh-cn_topic_0000001127125060_section163401342195315) - [示例](#zh-cn_topic_0000001127125060_section230641814493) 提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 ## 权限列表 无 ## 子组件 不支持。 ## 属性 除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：

名称

类型

默认值

必填

描述

vertical

boolean

false

否

使用水平分割线还是垂直分割线，默认水平。
>![](../../public_sys-resources/icon-note.gif) **说明：** >- 不支持focusable、disabled属性。 ## 样式 仅支持如下样式：

名称

类型

默认值

必填

描述

margin

<length>

0

否

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

margin-[left|top|right|bottom]

<length>

0

否

使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。

color

<color>

#08000000

否

设置分割线颜色。

stroke-width

<length>

1

否

设置分割线宽度。

display

string

flex

否

确定分割线所产生的框的类型。值flex/none，默认值flex。

visibility

string

visible

否

是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。

line-cap

string

butt

否

设置分割线条的端点样式，默认为butt，可选值为：

  • butt：分割线两端为平行线；
  • round：分割线两端额外添加半圆；
  • square：分割线两端额外添加半方形；
说明：

round和square会额外增加一个线宽的分割线长度。

flex

number

-

否

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-grow

number

0

否

设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。

说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-shrink

number

1

否

设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-basis

<length>

-

否

设置分割线在主轴方向上的初始大小。

说明：

仅父容器为<div>、<list-item>、<tabs>时生效。
## 事件 不支持。 ## 方法 不支持。 ## 示例 ```
``` ``` /* xxx.css */ .container { margin: 20px; flex-direction:column; width:100%; height:100%; align-items:center; } .content{ width:80%; height:40%; border:1px solid #000000; align-items: center; justify-content: center; flex-direction:column; } .divider { margin: 10px; color: #ff0000ff; stroke-width: 3px; line-cap: round; } ``` ![](figures/1.jpg)