hogwarts-ui 官方网站

Appearance

card 任务栏 ​

基础用法 ​

点击查看示例代码
vue
<template>
  <h-card-v9 :h_data="h_data"></h-card-v9>
</template>

<script setup>
const h_data = {
  component: 'h-card-v9',
  content: [
    {
      icon: {
        class: 'bg-blue-100',
        name: 'fa fa-cards card-blue-500'
      },
      value: 3947,
      name: '全部任务'
    },
    {
      icon: {
        class: 'bg-green-100',
        name: 'fa fa-check card-green-500'
      },
      value: 3947,
      name: '已完成任务'
    },
    {
      icon: {
        class: 'bg-red-100',
        name: 'fa fa-trash card-red-500'
      },
      value: 0,
      name: '删除任务'
    },
  ],
}
</script>
<template>
  <h-card-v9 :h_data="h_data"></h-card-v9>
</template>

<script setup>
const h_data = {
  component: 'h-card-v9',
  content: [
    {
      icon: {
        class: 'bg-blue-100',
        name: 'fa fa-cards card-blue-500'
      },
      value: 3947,
      name: '全部任务'
    },
    {
      icon: {
        class: 'bg-green-100',
        name: 'fa fa-check card-green-500'
      },
      value: 3947,
      name: '已完成任务'
    },
    {
      icon: {
        class: 'bg-red-100',
        name: 'fa fa-trash card-red-500'
      },
      value: 0,
      name: '删除任务'
    },
  ],
}
</script>