CheckCard

A card that aggregates multiple related information and can be selected.

Basic Usage

Pass options to configure option cards.

<script lang="ts" setup>
import { ref } from 'vue'

const options = [
  {
    title: 'Image Classification',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'A',
  },
  {
    title: 'Object Detection',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'B',
  },
  {
    title: 'OCR Custom',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'C',
  },
  {
    title: 'OCR',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'D',
  },
  {
    title: 'Video Classification',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'E',
  },
  {
    title: 'Keypoint Detection',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'F',
    disabled: true,
  },
]

const handleChange = (val) => {
  console.log(val, 'handleChange')
}

const val = ref('E')
</script>

<template>
  <div :style="{ padding: 24, backgroundColor: '#f7f8fa' }">
    <z-check-card v-model="val" :options="options" @change="handleChange" />
  </div>
</template>

Multiple Selection

Set multiple to true to enable multiple selection mode.

<script lang="ts" setup>
import { ref } from 'vue'

const options = [
  {
    title: 'Image Classification',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'A',
  },
  {
    title: 'Object Detection',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'B',
  },
  {
    title: 'OCR Custom',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'C',
  },
]

const handleChange = (val) => {
  console.log(val, 'handleChange')
}

const val = ref(['A'])
</script>

<template>
  <div :style="{ padding: 24, backgroundColor: '#f7f8fa' }">
    <z-check-card v-model="val" :options="options" :multiple="true" @change="handleChange" />
  </div>
</template>

Field Path

Set the alias attribute to customize field paths.

<script lang="ts" setup>
import { ref } from 'vue'

const options = [
  {
    data: {
      label: 'Image Classification',
      key: 'A',
    },
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
  },
  {
    data: {
      label: 'Object Detection',
      key: 'B',
    },
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
  },
  {
    data: {
      label: 'OCR Custom',
      key: 'C',
    },
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
  },
]

const alias = {
  title: 'data.label',
  value: 'data.key',
}

const val = ref(['A'])
</script>

<template>
  <div :style="{ padding: 24, backgroundColor: '#f7f8fa' }">
    <z-check-card v-model="val" :options="options" :multiple="true" :alias="alias" />
  </div>
</template>

Size

Configure the component's size attribute to uniformly configure size. You can also configure the size of individual option for custom sizing.

<script lang="ts" setup>
import { ref } from 'vue'

const size = ref('default')

const sizeOptions = ref([
  { label: 'large', value: 'large', type: 'radio-button' },
  { label: 'default', value: 'default', type: 'radio-button' },
  { label: 'small', value: 'small', type: 'radio-button' },
])

const options = [
  {
    title: 'Image Classification',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'A',
  },
  {
    title: 'Object Detection',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'B',
  },
  {
    title: 'OCR Custom',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'C',
  },
]

const val = ref('')
</script>

<template>
  <div class="flex flex-col">
    <z-radio v-model="size" :options="sizeOptions" class="mb-2" />
    <z-check-card v-model="val" :options="options" :size="size" />
  </div>
</template>

Custom Size

You can also customize card size through style or class.

<script lang="ts" setup>
import { ref } from 'vue'

const options = [
  {
    title: 'Image Classification',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'A',
    style: {
      width: '200px',
      height: '200px',
    },
  },
]

const val = ref('A')
</script>

<template>
  <div :style="{ padding: 24, backgroundColor: '#f7f8fa' }">
    <z-check-card v-model="val" :options="options" />
  </div>
</template>

Combination Styles

Avatar, title, and description areas can be freely combined or presented individually. The component will adjust to the most appropriate alignment for you.

<script lang="ts" setup>
import { ref } from 'vue'

const options = [
  {
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg',
    value: 'A',
  },
  {
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'B',
  },
  {
    title: 'OCR Custom',
    description: 'This is a description of the algorithm',
    value: 'C',
  },
  {
    title: 'OCR Custom',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    value: 'D',
  },
  {
    title: 'OCR Custom',
    value: 'E',
  },
  {
    description: 'This is a description of the algorithm',
    value: 'F',
  },
]

const val = ref('')
</script>

<template>
  <ZCheckCard v-model="val" :options="options" />
</template>

Custom Avatar

Pass a custom render function to the avatar attribute.

<script lang="ts" setup>
import { h, ref, resolveComponent } from 'vue'

const options = [
  {
    title: 'Title',
    avatar: () => h(resolveComponent('el-avatar'), { icon: 'i-user-filled' }),
    value: 'A',
  },
]

const val = ref('')
</script>

<template>
  <z-check-card v-model="val" :options="options" />
</template>

Custom Title

Pass a custom render function to the title attribute.

<script lang="ts" setup>
import { h, ref, resolveComponent } from 'vue'

const options = [
  {
    title: () => h(resolveComponent('el-tag'), { }, () => 'Tag 1'),
    description: 'Choose a typical user case provided by workflow orchestration to learn many design concepts',
    value: 'A',
  },
  {
    title: 'Long title content will be automatically truncated; long title content will be automatically truncated',
    description: 'Choose a typical user case provided by workflow orchestration to learn many design concepts',
    value: 'B',
  },
]

const val = ref('')
</script>

<template>
  <z-check-card v-model="val" :options="options" />
</template>

Custom Description

The description area can be customized through description.

<script lang="ts" setup>
import { h, ref } from 'vue'

const options = [
  {
    title: 'The default description area will not wrap',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg',
    value: 'A',
    description: () => h(
      'div',
      {},
      h(
        'span',
        {},
        'Choose a typical user case provided by workflow orchestration to learn many design concepts.',
        h('a', { onClick: e => e.stopPropagation() }, 'View details'),
      ),
    ),
  },
]

const val = ref('')
</script>

<template>
  <z-check-card v-model="val" :options="options" />
</template>

Action Bar

Configure extra to add an action bar to the card.

<script lang="ts" setup>
import { h, ref } from 'vue'

const options = [
  {
    title: 'Example',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg',
    description: 'Choose a typical user case provided by workflow orchestration to learn many design concepts.',
    value: 'A',
    extra: () => h(
      'div',
      {},
      h('a', { onClick: e => console.log('View details') }, 'View details'),
    ),
  },
]

const val = ref('')
</script>

<template>
  <z-check-card v-model="val" :options="options" />
</template>

Component Loading

Configure the loading attribute to true to show content in loading state.

<template>
  <z-check-card loading />
</template>

Pure Image Options

<script lang="ts" setup>
import { h, ref } from 'vue'

const options = [
  {
    value: '1',
    cover: () => h('img', {
      alt: 'example',
      src: 'https://gw.alipayobjects.com/mdn/rms_66ee3f/afts/img/A*FyH5TY53zSwAAAAAAAAAAABkARQnAQ',
    }),
  },
]

const val = ref('')
</script>

<template>
  <z-check-card v-model="val" :options="options" />
</template>

Disabled Options

Configure the disabled attribute to make options unavailable.

Partially Disabled

Fully Disabled

<script lang="ts" setup>
import { ref } from 'vue'

const options = ref([
  {
    title: 'Card A',
    description: 'Option 1',
    value: 'A',
  },
  {
    title: 'Card B',
    description: 'Option 2',
    value: 'B',
  },
])

const dataSource = [
  {
    title: 'Image Classification',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    disabled: true,
    value: 'A',
  },
  {
    title: 'Object Detection',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'B',
  },
  {
    title: 'OCR Custom',
    avatar: 'https://gw.alipayobjects.com/zos/bmw-prod/ae0adacf-9456-4ed3-b1ab-51e4417d8d0c.svg',
    description: 'This is a description of the algorithm',
    value: 'C',
  },
]

const selectedCard = ref('A')
const val = ref('')
</script>

<template>
  <div>
    <h4>Partially Disabled</h4>
    <z-check-card v-model="val" :options="dataSource" />
  </div>
  <div>
    <h4>Fully Disabled</h4>
    <z-check-card v-model="selectedCard" :options="options" disabled />
  </div>
</template>

z-check-card Attributes

Attribute	Description	Type	Default
modelValue	Two-way binding	string / string[]	—
alias	Key-value pair configuration	object	{ label: 'label', value: 'value', disabled: 'disabled' }
multiple	Multiple selection	boolean	false
bordered	Whether to show border	boolean	true
disabled	Disable entire group	boolean	false
loading	When card group content is still loading, loading can be used as placeholder	boolean	false
options	Specify available options	array	[]
size	Selection box size, options: large small default	string	default
onChange	Callback function when changed	Function(checkedValue)	—

z-check-card Options Configurable Attributes

Attribute	Description	Type	Default
title	Title	string / VNode	—
value	Option value	string	—
bordered	Whether to show border	boolean	true
disabled	Disabled state	boolean	false
size	Selection box size, options: large small	string	default
description	Description	string / VNode	—
avatar	Image address of option element	link / VNode	—
extra	Action area in the top right corner of the card	string / VNode	—
cover	Card background image, note that title, description and avatar are disabled when using this option	VNode	—

z-check-card Events

Event Name	Description	Callback Parameters
change	Callback function on change	checked