Card

Integrate information in a card container, and supporting simple layouts

Use

Basic Use

When used alone it is not much different from using ElCard directly

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

Custom Shadow

Set shadow attribute to define when to show the card shadows

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>

Custom Ghost

Set ghost attribute to make the background and border transparent

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>

Layout

Use the same way as el-row el-col (el-row corresponds to the outer pro-card; el-col corresponds to the nested 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>

Custom Direction

Set direction attribute to change the direction of layout

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>

Custom Split Card

Split Card are an enhancement to the layout

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>

Nested

Achieve more complex layouts through nesting and flexible use of 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>

Props

NameDescriptionTypeOptionsDefault
headertitle of the cardstring
body-styleCSS style of bodystring / object / array{ padding: '20px' }
shadowwhen to show card shadowsstringalways / hover / neveralways
ghostwhether is ghost mode, make the background and border transparentboolean-false
splitwhether to split the card, takes effect when Card is nested insideboolean-false
guttergrid spacing, takes effect when Card is nested insidenumber0
justifyhorizontal alignment of flex layout, takes effect when Card is nested insidestringstart / end / center / space-around / space-between / spacing-evenlystart
alignvertical alignment of flex layout, takes effect when Card is nested insidestringtop / middle / bottomtop
directiondirection of Row, takes effect when Card is nested insidestringrow / row-reverse / column / column-reverserow
spannumber of column the grid spansnumber0
offsetnumber of spacing on the left side of the gridnumber0
pushnumber of columns that grid moves to the rightnumber0
pullnumber of columns that grid moves to the leftnumber0
xs<768px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})
sm≥768px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})
md≥992px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})
lg≥1200px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})
xl≥1920px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})

Slots

NameDescription
customize default content
headercustomize header content