ea-ui

Descriptions 描述列表 ​

列表形式展示多个字段。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-descriptions/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

张三110福建省正确的帝都东城区史家胡同123号
查看代码
html
<div class="demo">
  <ea-descriptions title="用户信息">
    <ea-descriptions-item label="姓名">张三</ea-descriptions-item>
    <ea-descriptions-item label="手机号">110</ea-descriptions-item>
    <ea-descriptions-item label="居住地">福建省</ea-descriptions-item>
    <ea-descriptions-item label="备注">
      <ea-tag>正确的</ea-tag>
    </ea-descriptions-item>
    <ea-descriptions-item span="2" label="联系地址"
      >帝都东城区史家胡同123号</ea-descriptions-item
    >
  </ea-descriptions>
</div>

带边框列表 ​

张三110福建省正确的帝都东城区史家胡同123号
查看代码
html
<div class="demo">
  <ea-descriptions title="带边框列表" border>
    <ea-descriptions-item label="姓名">张三</ea-descriptions-item>
    <ea-descriptions-item label="手机号">110</ea-descriptions-item>
    <ea-descriptions-item label="居住地">福建省</ea-descriptions-item>
    <ea-descriptions-item label="备注">
      <ea-tag>正确的</ea-tag>
    </ea-descriptions-item>
    <ea-descriptions-item span="3" label="联系地址"
      >帝都东城区史家胡同123号</ea-descriptions-item
    >
  </ea-descriptions>
</div>

自定义 label 属性插槽 ​

用户名
张三
手机号
110
居住地
福建省
备注
正确的
联系地址
帝都东城区史家胡同123号
查看代码
html
<div class="demo">
  <ea-descriptions title="带边框列表" border>
    <ea-descriptions-item>
      <div slot="label"><ea-icon class="icon-user"></ea-icon>用户名</div>
      张三
    </ea-descriptions-item>
    <ea-descriptions-item>
      <div slot="label"><ea-icon class="icon-tablet"></ea-icon>手机号</div>
      110
    </ea-descriptions-item>
    <ea-descriptions-item>
      <div slot="label"><ea-icon class="icon-location"></ea-icon>居住地</div>
      福建省
    </ea-descriptions-item>
    <ea-descriptions-item>
      <div slot="label"><ea-icon class="icon-tag"></ea-icon>备注</div>
      <ea-tag>正确的</ea-tag>
    </ea-descriptions-item>
    <ea-descriptions-item span="3">
      <div slot="label"><ea-icon class="icon-direction"></ea-icon>联系地址</div>
      帝都东城区史家胡同123号
    </ea-descriptions-item>
  </ea-descriptions>
</div>

垂直列表 ​

Lilyiro 165cm 17岁 宿命背反雷电物理
卡列尼娜 163cm 16岁 辉晓暗 100%
查看代码
html
<div class="demo">
  <ea-descriptions title="带边框垂直列表" direction="vertical" border>
    <ea-descriptions-item label="用户名"> Lilyiro </ea-descriptions-item>
    <ea-descriptions-item label="身高"> 165cm </ea-descriptions-item>
    <ea-descriptions-item label="年龄"> 17岁 </ea-descriptions-item>
    <ea-descriptions-item label="称号">
      <ea-tag>宿命背反</ea-tag>
    </ea-descriptions-item>
    <ea-descriptions-item label="属性" span="1">
      <ea-tag type="warning" style="margin-right: 1rem;">雷电</ea-tag>
      <ea-tag type="info">物理</ea-tag>
    </ea-descriptions-item>
  </ea-descriptions>
  <ea-descriptions title="带边框垂直列表" direction="vertical">
    <ea-descriptions-item label="用户名"> 卡列尼娜 </ea-descriptions-item>
    <ea-descriptions-item label="身高"> 163cm </ea-descriptions-item>
    <ea-descriptions-item label="年龄"> 16岁 </ea-descriptions-item>
    <ea-descriptions-item label="机体">
      <ea-tag>辉晓</ea-tag>
    </ea-descriptions-item>
    <ea-descriptions-item label="属性" span="1">
      <ea-tag type="info">暗 100%</ea-tag>
    </ea-descriptions-item>
  </ea-descriptions>
</div>

Descriptions Attributes ​

参数说明类型可选值默认值
title标题string--
direction列表方向stringvertical / horizontalhorizontal
border是否有边框boolean-false
col列表列数number-3

Descriptions-Item Attributes ​

参数说明类型可选值默认值
label标题string--
span列表列数number-1

Descriptions CSS Part ​

名称说明
container外层容器, 包含 标题容器header-wrap 和 表格容器body-wrap
header-wrap标题容器( title 属性内容所在容器)
body-wrap表格容器, 包含 表格本体 table-wrap
table-wrap表格本体
table-tbody表格 tbody 本体
table-tr表格 tr行 本体
table-th表格 th 本体
table-td表格 td 本体
(仅当使用基础用法时存在该属性) table-td-label表格 td 本体中的 label 文本
(仅当使用基础用法时存在该属性) table-td-contentdescriptions-item标签内传入的内容

Descriptions-Item Slots ​

名称说明
label自定义标签文本