hy-element

Card 卡片 ​

Card 组件用于展示信息块，通常包含头部、内容和底部三个部分。

基本用法 ​

最基础的卡片包括头部、内容和底部三个部分。可以通过具名插槽来定义各个部分的内容。

卡片名称

卡片内容

卡片内容

卡片内容

取消确定

<template>
  <div class="demo-card">
    <hy-card>
      <template #header>
        <div class="card-header">
          <span>卡片名称</span>
        </div>
      </template>
      
      <div class="card-content">
        <p>卡片内容</p>
        <p>卡片内容</p>
        <p>卡片内容</p>
      </div>
      
      <template #footer>
        <div class="card-footer">
          <el-button>取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </template>
    </hy-card>
  </div>
</template>

<script setup lang="ts">
// 基本用法展示
</script>

<style scoped>
.demo-card {
  padding: 20px;
}

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

.card-content p {
  margin: 10px 0;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

简洁卡片 ​

不包含头部和底部的简洁卡片。

这是一个简洁的卡片

只包含内容区域

没有头部和底部

<template>
  <div class="demo-card-simple">
    <hy-card>
      <div class="simple-content">
        <p>这是一个简洁的卡片</p>
        <p>只包含内容区域</p>
        <p>没有头部和底部</p>
      </div>
    </hy-card>
  </div>
</template>

<script setup lang="ts">
// 简洁卡片展示
</script>

<style scoped>
.demo-card-simple {
  padding: 20px;
}

.simple-content p {
  margin: 15px 0;
  line-height: 1.6;
  color: #666;
}
</style>

阴影效果 ​

通过 shadow 属性可以控制卡片的阴影效果。

总是显示阴影

shadow="always"

悬停显示阴影

shadow="hover"

从不显示阴影

shadow="never"

<template>
  <div class="demo-card-shadow">
    <div class="shadow-demo-row">
      <hy-card shadow="always">
        <template #header>
          <div class="card-header">总是显示阴影</div>
        </template>
        <div class="card-body">
          <p>shadow="always"</p>
        </div>
      </hy-card>
    </div>
    
    <div class="shadow-demo-row">
      <hy-card shadow="hover">
        <template #header>
          <div class="card-header">悬停显示阴影</div>
        </template>
        <div class="card-body">
          <p>shadow="hover"</p>
        </div>
      </hy-card>
    </div>
    
    <div class="shadow-demo-row">
      <hy-card shadow="never">
        <template #header>
          <div class="card-header">从不显示阴影</div>
        </template>
        <div class="card-body">
          <p>shadow="never"</p>
        </div>
      </hy-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// 阴影效果展示
</script>

<style scoped>
.demo-card-shadow {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shadow-demo-row {
  width: 300px;
}

.card-header {
  font-weight: 500;
  color: #333;
}

.card-body p {
  margin: 0;
  color: #666;
}
</style>

Card API ​

Props ​

NameDescriptionTypeDefault
header卡片头部string-
footer卡片底部string-
shadow阴影效果enum - 'always' | 'hover' | 'never'always

Slots ​

NameDescriptionSub Component
default内容插槽-
header头部插槽-
footer底部插槽-

Events ​

NameDescriptionType
---

Expose ​

NameDescriptionType
---