Skip to content

Description 描述列表 ​

基础用法 ​

Tom 男 28 上海市青浦区华新镇
html
<ivy-description>
    <ivy-description-item label="姓名">Tom</ivy-description-item>
    <ivy-description-item label="性别"> 男 </ivy-description-item>
    <ivy-description-item label="年龄"> 28 </ivy-description-item>
    <ivy-description-item label="地址">
        上海市青浦区华新镇
    </ivy-description-item>
</ivy-description>

增加 border ​

Tom 男 28 上海市青浦区华新镇
html
<ivy-description border>
    <ivy-description-item label="姓名">Tom</ivy-description-item>
    <ivy-description-item label="性别"> 男 </ivy-description-item>
    <ivy-description-item label="年龄"> 28 </ivy-description-item>
    <ivy-description-item label="地址" span="3">
        上海市青浦区华新镇
    </ivy-description-item>
</ivy-description>

增加 header ​

Tom 男 28 上海市青浦区华新镇
html
<ivy-description border header="个人信息">
    <ivy-description-item label="姓名">Tom</ivy-description-item>
    <ivy-description-item label="性别"> 男 </ivy-description-item>
    <ivy-description-item label="年龄"> 28 </ivy-description-item>
    <ivy-description-item label="地址" span="3">
        上海市青浦区华新镇
    </ivy-description-item>
</ivy-description>

设置 label-width ​

Tom 男 28 上海市青浦区华新镇
html
<ivy-description border>
    <ivy-description-item label="姓名">Tom</ivy-description-item>
    <ivy-description-item label="性别"> 男 </ivy-description-item>
    <ivy-description-item label="年龄"> 28 </ivy-description-item>
    <ivy-description-item label="地址" span="3">
        上海市青浦区华新镇
    </ivy-description-item>
</ivy-description>

Api ​

Description Prop ​

Prop描述类型可选值默认值
border是否显示边框boolean-false
columns每行显示的列数number-3
header标题string-undefined
labelWidthlabel 的宽度string-undefined

DescriptionItem Prop ​

Prop描述类型可选值默认值
labellabel 的内容string-''
labelWidthlabel 的宽度string-'100px'
span占有的列数string-1

MIT Licensed