标签与徽标

NTag 与 NBadge 的常见用法。

标签类型

默认

成功

警告

错误

信息

圆角

<script setup>
import { NSpace, NTag } from 'naive-ui'
</script>

<template>
  <n-space>
    <n-tag>默认</n-tag>
    <n-tag type="success">成功</n-tag>
    <n-tag type="warning">警告</n-tag>
    <n-tag type="error">错误</n-tag>
    <n-tag type="info">信息</n-tag>
    <n-tag round type="primary">圆角</n-tag>
  </n-space>
</template>

可关闭标签

标签一

标签二

标签三

<script setup>
import { ref } from 'vue'
import { NSpace, NTag } from 'naive-ui'

const tags = ref(['标签一', '标签二', '标签三'])

function handleClose(index) {
  tags.value.splice(index, 1)
}
</script>

<template>
  <n-space>
    <n-tag
      v-for="(tag, index) in tags"
      :key="tag"
      closable
      @close="handleClose(index)"
    >
      {{ tag }}
    </n-tag>
  </n-space>
</template>

徽标

A⁵⁵⁵

B⁹⁹⁹⁹⁹⁹

C

D^new

<script setup>
import { NAvatar, NBadge, NSpace } from 'naive-ui'
</script>

<template>
  <n-space :size="24">
    <n-badge :value="5">
      <n-avatar>A</n-avatar>
    </n-badge>
    <n-badge :value="99" :max="99">
      <n-avatar>B</n-avatar>
    </n-badge>
    <n-badge dot type="success">
      <n-avatar>C</n-avatar>
    </n-badge>
    <n-badge value="new" type="info">
      <n-avatar>D</n-avatar>
    </n-badge>
  </n-space>
</template>