Card

将内容至于卡片中展示同时支持简单的布局

使用

基础用法

当单独使用时就和直接使用 ElCard 无多大差别

header
Content 
<template>
  <pro-card header="header">
    Content
  </pro-card>
</template>

阴影

通过 shadow 属性设置卡片阴影出现的时机

Always
Hover
Never 
<template>
  <pro-card
    :gutter="40"
    ghost
    style="height: 80px"
  >
    <pro-card shadow="always">
      Always
    </pro-card>
    <pro-card shadow="hover">
      Hover
    </pro-card>
    <pro-card shadow="never">
      Never
    </pro-card>
  </pro-card>
</template>

幽灵模式

启用幽灵模式可以让背景边框透明，同时 body 的 padding 也会变为 0

Content 
<template>
  <el-switch v-model="ghost" />
  <pro-card :ghost="ghost">
    Content
  </pro-card>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const ghost = ref(true)

    return { ghost }
  },
})
</script>

栅格布局

与使用 el-row 和 el-col 组件相同 (el-row 对应外部的 pro-card；el-col 对应嵌套的 pro-card)，通过相关配置可以自由地组合布局

span-24
span-12
span-6
span-12
span-6
span-6
span-8
auto
auto
span-8
max-width-200px
auto
flex-0.4
flex-1 
<template>
  <pro-card ghost>
    <pro-card
      :span="24"
      shadow="never"
    >
      span-24
    </pro-card>
    <pro-card
      :span="12"
      shadow="never"
    >
      span-12
    </pro-card>
    <pro-card
      :span="6"
      shadow="never"
    >
      span-6
    </pro-card>
  </pro-card>
  <pro-card
    :gutter="20"
    ghost
  >
    <pro-card
      :span="12"
      shadow="never"
    >
      span-12
    </pro-card>
    <pro-card
      :span="6"
      shadow="never"
    >
      span-6
    </pro-card>
    <pro-card
      :span="6"
      shadow="never"
    >
      span-6
    </pro-card>
  </pro-card>
  <pro-card ghost>
    <pro-card
      :span="8"
      shadow="never"
    >
      span-8
    </pro-card>
    <pro-card shadow="never">
      auto
    </pro-card>
  </pro-card>
  <pro-card ghost>
    <pro-card shadow="never">
      auto
    </pro-card>
    <pro-card
      :span="8"
      shadow="never"
    >
      span-8
    </pro-card>
  </pro-card>
  <pro-card ghost>
    <pro-card
      shadow="never"
      style="max-width: 200px"
    >
      max-width-200px
    </pro-card>
    <pro-card shadow="never">
      auto
    </pro-card>
  </pro-card>
  <pro-card ghost>
    <pro-card
      shadow="never"
      style="flex: 0.4"
    >
      flex-0.4
    </pro-card>
    <pro-card shadow="never">
      flex-1
    </pro-card>
  </pro-card>
</template>

方向

通过 direction 改变栅格布局排序的方向

span-12
span-6
span-3 
<template>
  <pro-radio-button
    v-model="direction"
    :data="data"
  />
  <pro-card :direction="direction">
    <pro-card
      :span="12"
      shadow="never"
    >
      span-12
    </pro-card>
    <pro-card
      :span="6"
      shadow="never"
    >
      span-6
    </pro-card>
    <pro-card
      :span="3"
      shadow="never"
    >
      span-3
    </pro-card>
  </pro-card>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const direction = ref('row')
    const data = [
      { label: 'row', value: 'row' },
      { label: 'row-reverse', value: 'row-reverse' },
      { label: 'column', value: 'column' },
      { label: 'column-reverse', value: 'column-reverse' },
    ]

    return { direction, data }
  },
})
</script>

分割卡片

分割卡片是对栅格布局的增强

span-8
top
bottom 
<template>
  <el-switch v-model="split" />
  <pro-card :split="split">
    <pro-card
      :span="8"
      shadow="never"
    >
      span-8
    </pro-card>
    <pro-card
      :split="split"
      shadow="never"
      direction="column"
    >
      <pro-card shadow="never">
        top
      </pro-card>
      <pro-card shadow="never">
        bottom
      </pro-card>
    </pro-card>
  </pro-card>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const split = ref(true)

    return { split }
  },
})
</script>

嵌套

通过对 Card 的嵌套和灵活使用实现更复杂的布局

title
aside
span-3
span-3
auto
card-1
card-2
card-3
header
auto
auto 
<template>
  <pro-card split>
    <pro-card
      :xs="10"
      :sm="8"
      :md="6"
      :lg="4"
      header="title"
    >
      aside
    </pro-card>
    <pro-card direction="column">
      <pro-card
        :gutter="20"
        shadow="never"
        ghost
      >
        <pro-card
          :span="3"
          shadow="never"
        >
          span-3
        </pro-card>
        <pro-card
          :span="3"
          shadow="never"
        >
          span-3
        </pro-card>
        <pro-card shadow="never">
          auto
        </pro-card>
      </pro-card>
      <pro-card
        shadow="never"
        direction="column"
        split
        style="margin-top: 12px"
      >
        <pro-card shadow="never">
          card-1
        </pro-card>
        <pro-card shadow="never">
          card-2
        </pro-card>
        <pro-card shadow="never">
          card-3
        </pro-card>
      </pro-card>
      <pro-card
        header="header"
        shadow="never"
        split
        style="margin-top: 12px"
      >
        <pro-card shadow="never">
          auto
        </pro-card>
        <pro-card shadow="never">
          auto
        </pro-card>
      </pro-card>
    </pro-card>
  </pro-card>
</template>

配置

参数说明类型可选值默认值
header卡片的标题string——
body-stylebody 的样式string / object / array—{ padding: ‘20px’ }
shadow设置阴影显示时机stringalways / hover / neveralways
ghost是否是幽灵模式，及将背景边框透明boolean-false
split是否分割卡片，当内部嵌套 Card 时生效boolean-false
gutter栅格间隔，当内部嵌套 Card 时生效number-0
justify水平排列方式，当内部嵌套 Card 时生效stringstart / end / center / space-around / space-between / spacing-evenlystart
align垂直排列方式，当内部嵌套 Card 时生效stringtop / middle / bottomtop
direction主轴的方向，当内部嵌套 Card 时生效stringrow / row-reverse / column / column-reverserow
span栅格占据的列数number--
offset栅格左侧的间隔格数number-0
push栅格向右移动格数number-0
pull栅格向左移动格数number-0
xs<768px 响应式栅格数或者栅格属性对象number / object--
sm≥768px 响应式栅格数或者栅格属性对象number / object--
md≥992px 响应式栅格数或者栅格属性对象number / object--
lg≥1200px 响应式栅格数或者栅格属性对象number / object--
xl≥1920px 响应式栅格数或者栅格属性对象number / object--

插槽

插槽名说明
—自定义默认内容
header自定义标题内容