hogwarts-ui 官方网站

Appearance

Task 任务栏 ​

基础用法 ​

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

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

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

不传icon ​

点击查看示例代码
vue
<template>
  <h-task-v1 :h_data="h_data1"></h-task-v1>
</template>

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

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