Category 分类菜单

粮油类谷物作物

瓜果类水果/仁果类

蔬菜类根菜/菌菇类

禽类及副产品肉

畜牧及副产品肉

水产及副产品肉

其他蜂产品

基础使用

这是 Category 的基础例子

<script setup lang="ts">
import { Button as NpButton, Tooltip as NpTooltip } from 'npc-ui'

const options = [
  { icon: 'bottle', href: 'http://', title: '粮油类', subtitle: '谷物作物' },
  { icon: 'melon', href: 'http://', title: '瓜果类', subtitle: '水果/仁果类' },
  { icon: 'eggplant', href: 'http://', title: '蔬菜类', subtitle: '根菜/菌菇类' },
  { icon: 'chicken', href: 'http://', title: '禽类及副产品', subtitle: '肉' },
  { icon: 'cattle', href: 'http://', title: '畜牧及副产品', subtitle: '肉' },
  { icon: 'shrimp', href: 'http://', title: '水产及副产品', subtitle: '肉' },
  { icon: 'honey', href: 'http://', title: '其他', subtitle: '蜂产品' },
]
</script>

<template>
  <div class="category-demo">
    <NpCategory :data="options" />
    <div class="category-demo2">
      <NpTooltip trigger="click">
        <NpButton plain type="green">
          分类菜单
        </NpButton>
        <template #content>
          <NpCategory :data="options" />
        </template>
      </NpTooltip>
    </div>
  </div>
</template>

<style lang="less">
.category-demo {
  padding: 10px;
  display: flex;
  gap: 10px;
}

.category-demo2 {
  display: flex;
  min-width: 200px;

  .np-tooltip__popper {
    padding: 6px 0;
  }

  .np-category-list {
    box-shadow: none;
  }
}
</style>