Easy UI

Appearance

Card 卡片 ​

将信息聚合在卡片容器中展示。

引入 ​

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

自定义样式 ​

移步到 CSS Part。

TIP

示例中使用的样式

css
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}

.ea-card-demo {
  width: 400px;
}

.img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

基础用法 ​

卡片包含标题，内容以及操作区域。

Card 组件由 header content 和 footer 组成。 header 和 footer 是可选的，其内容取决于一个具名的 slot。

Card name

content1

content2

content3

content4

Footer content
查看代码
html
<ea-card class="ea-card-demo">
  <div slot="header" class="header">
    <span>Card name</span>
  </div>

  <p class="ea-card-content">content1</p>
  <p class="ea-card-content">content2</p>
  <p class="ea-card-content">content3</p>
  <p class="ea-card-content">content4</p>

  <div slot="footer" class="footer">
    <span>Footer content</span>
  </div>
</ea-card>

简单卡片 ​

卡片可以只有内容区域。

content1

content2

content3

content4

查看代码
html
<ea-card class="ea-card-demo">
  <p class="ea-card-content">content1</p>
  <p class="ea-card-content">content2</p>
  <p class="ea-card-content">content3</p>
  <p class="ea-card-content">content4</p>
</ea-card>

有图片内容的卡片 ​

可配置定义更丰富的内容展示。

view
查看代码
html
<ea-card class="ea-card-demo">
  <div class="header" slot="header">
    <span>view</span>
  </div>
  <img
    class="img"
    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  />
</ea-card>

卡片阴影 ​

你可以定义什么时候展示卡片的阴影效果。

通过 shadow 属性设置卡片阴影出现的时机。 该属性的值可以是：always、hover 或 never。

总是显示

鼠标移入显示

从不显示
查看代码
html
<ea-card shadow="always">总是显示</ea-card>
<ea-card shadow="hover">鼠标移入显示</ea-card>
<ea-card shadow="never">从不显示</ea-card>

EaCard API ​

EaCard Attributes ​

参数说明类型可选值默认值
header卡片的标题。你既可以通过设置 header 来修改标题，也可以通过 slot="header" 传入 DOM 节点string——
footer卡片页脚。你既可以通过设置 footer 来修改卡片底部内容，也可以通过 slot="footer" 传入 DOM 节点string——
shadow卡片阴影显示时机stringalways | hover | neveralways

EaCard CSS Part ​

名称说明
containercard 容器
header标题容器
content内容容器
footer页脚容器

EaCard Slots ​

名称说明
default卡片内容
header卡片标题
footer卡片页脚

EaCard CSS Custom Properties ​

属性名说明默认值
--ea-card-border-color边框颜色var(--grey-200)
--ea-card-border-radius圆角大小var(--border-radius-sm)
--ea-card-box-shadow阴影效果var(--box-shadow-md)
--ea-card-background-color背景颜色var(--white)
--ea-card-padding内边距var(--spacing-lg)
--ea-card-transition过渡动画时长var(--transition-normal)