gi-component

Appearance

Card 卡片 ​

该组件提供了比el-card更加易用，便捷的功能

基础用法 ​

卡片标题

暂无数据

查看代码
vue
<template>
  <gi-card title="卡片标题" bordered>
    <template #extra>
      <el-button type="primary">保存</el-button>
      <el-button>返回</el-button>
    </template>
    <el-empty description="暂无数据" />
  </gi-card>
</template>

内置类名 ​

内置类名提供了卡片标题伪元素样式

卡片标题

暂无数据

查看代码
vue
<template>
  <gi-card title="卡片标题" bordered class="gi-card-title">
    <template #extra>
      <el-button type="primary">保存</el-button>
      <el-button>返回</el-button>
    </template>
    <el-empty description="暂无数据" />
  </gi-card>
</template>

底部插槽 ​

卡片标题
查看代码
vue
<template>
  <gi-card title="卡片标题" bordered class="gi-card-title">
    <template #extra>
      <el-button type="primary">保存</el-button>
      <el-button>返回</el-button>
    </template>
    <el-space wrap>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-space>
    <template #footer>
      <el-alert title="Customized close text" type="info" close-text="Gotcha" />
    </template>
  </gi-card>
</template>

迷你卡片 ​

卡片标题
查看代码
vue
<template>
  <gi-card title="卡片标题" bordered size="small" class="gi-card-title">
    <template #extra>
      <el-button type="primary" size="small">保存</el-button>
      <el-button size="small">返回</el-button>
    </template>
    <el-space wrap>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-space>
    <template #footer>
      <el-alert title="Customized close text" type="info" close-text="Gotcha" />
    </template>
  </gi-card>
</template>

内容滚动 ​

卡片标题
查看代码
vue
<template>
  <gi-card title="卡片标题" bordered style="height: 400px" :body-style="{ overflowY: 'auto' }">
    <template #extra>
      <el-button type="primary">保存</el-button>
      <el-button>返回</el-button>
    </template>
    <el-space wrap>
      <el-button v-for="i in 100" :key="i" type="primary">
        按钮{{ i }}
      </el-button>
    </el-space>
  </gi-card>
</template>

内嵌模式 ​

卡片标题
查看代码
vue
<template>
  <gi-card title="卡片标题" inner>
    <template #extra>
      <el-button type="primary">保存</el-button>
      <el-button>返回</el-button>
    </template>
    <el-alert title="内嵌模式消除了左右内边距" type="primary" :closable="false" />
  </gi-card>
</template>

API ​

Props ​

参数说明类型默认值
title标题string-
extra卡片右上角的操作区域string-
bordered是否有边框booleanfalse
size尺寸samll | middlemiddle
headerStyle卡片头部区域的样式CSSProperties-
bodyStyle卡片内容区域的样式CSSProperties-
inner内嵌模式，消除左右内边距booleanfalse

Slots ​

名称说明
default卡片内容
extra卡片右上角的操作区域