1# divider 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @lanshouren--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 13 14## 权限列表 15 16无 17 18 19## 子组件 20 21不支持。 22 23 24## 属性 25 26除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 27 28| 名称 | 类型 | 默认值 | 必填 | 描述 | 29| -------- | ------- | ----- | ---- | -------------------- | 30| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 | 31 32> **说明：** 33> 不支持focusable、disabled属性。 34 35 36## 样式 37 38仅支持如下样式： 39 40| 名称 | 类型 | 默认值 | 必填 | 描述 | 41| --------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | 42| margin | <length> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 | 43| margin-[left\|top\|right\|bottom] | <length> | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 | 44| color | <color> | \#08000000 | 否 | 设置分割线颜色。 | 45| stroke-width | <length> | 1 | 否 | 设置分割线宽度。 | 46| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 | 47| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 | 48| line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：<br/>- butt：分割线两端为平行线；<br/>- round：分割线两端额外添加半圆，额外增加一个线宽的分割线长度；<br/>- square：分割线两端额外添加半方形，额外增加一个线宽的分割线长度； | 49| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间，用来设置组件的flex-grow。<br>仅父容器为<div>、<list-item>、<tabs>时生效。 | 50| flex-grow | number | 0 | 否 | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数，0为不伸展。<br/>仅父容器为<div>、<list-item>、<tabs>时生效。 | 51| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>仅父容器为<div>、<list-item>、<tabs>时生效。 | 52| flex-basis | <length> | - | 否 | 设置分割线在主轴方向上的初始大小。<br>仅父容器为<div>、<list-item>、<tabs>时生效。 | 53 54 55## 事件 56 57不支持。 58 59 60## 方法 61 62不支持。 63 64 65## 示例 66 67```html 68<!-- xxx.hml --> 69<div class="container"> 70 <div class="content"> 71 <divider class="divider" vertical="false"></divider> 72 </div> 73</div> 74``` 75 76```css 77/* xxx.css */ 78.container { 79 margin: 20px; 80 flex-direction:column; 81 width:100%; 82 height:100%; 83 align-items:center; 84} 85.content{ 86 width:80%; 87 height:40%; 88 border:1px solid #000000; 89 align-items: center; 90 justify-content: center; 91 flex-direction:column; 92} 93.divider { 94 margin: 10px; 95 color: #ff0000ff; 96 stroke-width: 3px; 97 line-cap: round; 98} 99``` 100 101 102
