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

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-8

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

rowrow-reversecolumncolumn-reverse

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

aside

span-3

auto

card-1

card-2

card-3

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

Name	Description	Type	Options	Default
header	title of the card	string	—	—
body-style	CSS style of body	string / object / array	—	{ padding: ‘20px’ }
shadow	when to show card shadows	string	always / hover / never	always
ghost	whether is ghost mode, make the background and border transparent	boolean	-	false
split	whether to split the card, takes effect when Card is nested inside	boolean	-	false
gutter	grid spacing, takes effect when Card is nested inside	number	—	0
justify	horizontal alignment of flex layout, takes effect when Card is nested inside	string	start / end / center / space-around / space-between / spacing-evenly	start
align	vertical alignment of flex layout, takes effect when Card is nested inside	string	top / middle / bottom	top
direction	direction of Row, takes effect when Card is nested inside	string	row / row-reverse / column / column-reverse	row
span	number of column the grid spans	number	—	0
offset	number of spacing on the left side of the grid	number	—	0
push	number of columns that grid moves to the right	number	—	0
pull	number of columns that grid moves to the left	number	—	0
xs	`<768px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	—	—
sm	`≥768px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	—	—
md	`≥992px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	—	—
lg	`≥1200px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	—	—
xl	`≥1920px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	—	—

Slots

Name	Description
—	customize default content
header	customize header content

Card #

Use #

Basic Use #

Custom Shadow #

Custom Ghost #

Layout #

Custom Direction #

Custom Split Card #

Nested #

Props #

Slots #

Card

Use

Basic Use

Custom Shadow

Custom Ghost

Layout

Custom Direction

Custom Split Card

Nested

Props

Slots