Card 卡片

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

基础用法

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

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

条目 1

条目 2

条目 3

条目 4

vue

<template>
  <qy-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">{{ '条目 ' + o }}</div>
  </qy-card>
</template>

  <style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 480px;
  }
  </style>

<template>
  <qy-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">{{ '条目 ' + o }}</div>
  </qy-card>
</template>

  <style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 480px;
  }
  </style>

简单卡片

卡片可以只有内容区域。

列表目录 1

列表目录 2

列表目录 3

列表目录 4

vue

<template>
  <qy-card class="box-card">
    <div v-for="o in 4" :key="o" class="text item">{{ '列表目录 ' + o }}</div>
  </qy-card>
</template>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 680px;
}
</style>

<template>
  <qy-card class="box-card">
    <div v-for="o in 4" :key="o" class="text item">{{ '列表目录 ' + o }}</div>
  </qy-card>
</template>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 680px;
}
</style>

带有阴影效果的卡片

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

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

Always

Hover

Never

vue

<template>
  <el-row :gutter="12">
    <el-col :span="8">
      <qy-card shadow="always"> Always </qy-card>
    </el-col>
    <el-col :span="8">
      <qy-card shadow="hover"> Hover </qy-card>
    </el-col>
    <el-col :span="8">
      <qy-card shadow="never"> Never </qy-card>
    </el-col>
  </el-row>
</template>

<template>
  <el-row :gutter="12">
    <el-col :span="8">
      <qy-card shadow="always"> Always </qy-card>
    </el-col>
    <el-col :span="8">
      <qy-card shadow="hover"> Hover </qy-card>
    </el-col>
    <el-col :span="8">
      <qy-card shadow="never"> Never </qy-card>
    </el-col>
  </el-row>
</template>