AsUI

Card卡片

# 基础用法

卡片名称 操作按钮
列表内容 1
列表内容 2
列表内容 3
列表内容 4 
<template>
  <div class="t-basic-card-area">
    <as-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <as-button style="float: right; padding: 3px 0" type="text">操作按钮</as-button>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{'列表内容 ' + o }}
      </div>
    </as-card>
  </div>
</template>
<script>
export default {
  name: "t-basic-card",
}
</script>
<style>
.t-basic-card-area .text {
  font-size: 14px;
}

.t-basic-card-area .item {
  margin-bottom: 18px;
}

.t-basic-card-area .clearfix:before,
.t-basic-card-area .clearfix:after {
  display: table;
  content: "";
}
.t-basic-card-area .clearfix:after {
  clear: both
}

.t-basic-card-area .box-card {
  width: 100%;
}
</style>
Expand Copy

# 简单卡片

列表内容 1
列表内容 2
列表内容 3
列表内容 4 
<template>
  <div class="t-simple-card-area">
    <as-card class="box-card">
      <div v-for="o in 4" :key="o" class="text item">
        {{'列表内容 ' + o }}
      </div>
    </as-card>
  </div>
</template>
<script>
export default {
  name: "t-simple-card",
}
</script>
<style>
.t-simple-card-area .text {
  font-size: 14px;
}

.t-simple-card-area .item {
  padding: 18px 0;
}

.t-simple-card-area .box-card {
  width: 100%;
}

</style>
Expand Copy

# 带图片

好吃的汉堡
操作按钮
<template>
  <div class="t-images-card-area">
    <as-card :body-style="{ padding: '0px' }">
      <img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <as-button type="text" class="button">操作按钮</as-button>
        </div>
      </div>
    </as-card>
  </div>
</template>
<script>
export default {
  name: "t-images-card",
  data() {
    return {
      currentDate: new Date()
    };
  }
}
</script>
<style>

.t-images-card-area .time {
  font-size: 13px;
  color: #999;
}

.t-images-card-area .bottom {
  margin-top: 13px;
  line-height: 12px;
}

.t-images-card-area .button {
  padding: 0;
  float: right;
}

.t-images-card-area .image {
  width: 50%;
  display: block;
}

.t-images-card-area .clearfix:before,
.t-images-card-area .clearfix:after {
  display: table;
  content: "";
}

.t-images-card-area .clearfix:after {
  clear: both
}
</style>
Expand Copy

# 卡片阴影

总是显示
鼠标悬浮时显示
从不显示 
<template>
  <div class="t-shadow-card-area">
    <div>
      <as-card shadow="always">
        总是显示
      </as-card>
    </div>
    <div>
      <as-card shadow="hover">
        鼠标悬浮时显示
      </as-card>
    </div>
      <div>
      <as-card shadow="never">
        从不显示
      </as-card>
      </div>
  </div>
</template>
<script>
export default {
  name: "t-shadow-card",
}
</script>
<style>
.t-shadow-card-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.t-shadow-card-area>div{
  margin-top: 10px;
}
</style>
Expand Copy

# Attributes

参数 默认值 说明
header -- 设置header,也可以通过slot#header传入DOM,类型为String
body-style { padding:'20px'} 设置 body的样式,类型是Object类型
shadow always 设置阴影显示时机,类型为String,可选值为always/hover/never

← Divider分割线 →