Chip

GitHub
数值或状态的指示器。

用法

用芯片包裹任何元件以显示指示器。

<template>
  <UChip>
    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
  </UChip>
</template>

Color

使用color道具来改变芯片的颜色。

<template>
  <UChip color="neutral">
    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
  </UChip>
</template>

Size

使用size道具来改变芯片的大小。

<template>
  <UChip size="3xl">
    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
  </UChip>
</template>

Text

使用text道具设置芯片的文本。

5
<template>
  <UChip :text="5" size="3xl">
    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
  </UChip>
</template>

位置

使用position道具来改变芯片的位置。

<template>
  <UChip position="bottom-left">
    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
  </UChip>
</template>

插入

使用inset道具显示元件内部的芯片。这在处理圆形元件时很有用。

<template>
  <UChip inset>
    <UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
  </UChip>
</template>

独立

使用standalone道具旁边的inset道具显示芯片内联。

<template>
  <UChip standalone inset />
</template>
例如，它在CommandPalette、InputMenu、Select或SelectMenu组件中以这种方式使用。

示例

控件可见性

您可以使用show道具控制芯片的可见性。

<script setup lang="ts">
const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0])

const color = computed(() => status.value ? { online: 'success', away: 'warning', busy: 'error', offline: 'neutral' }[status.value] as any : 'online')

const show = computed(() => status.value !== 'offline')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    if (status.value) {
      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
    }
  }, 1000)
})
</script>

<template>
  <UChip :color="color" :show="show" inset>
    <UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
  </UChip>
</template>

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

const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0])

const color = computed(() => status.value ? { online: 'success', away: 'warning', busy: 'error', offline: 'neutral' }[status.value] as any : 'online')

const show = computed(() => status.value !== 'offline')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    if (status.value) {
      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
    }
  }, 1000)
})
</script>

<template>
  <UChip :color="color" :show="show" inset>
    <UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
  </UChip>
</template>
在本例中，Chip具有每个状态的颜色，并且当状态不是offline时显示。

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

text
string | number

Display some text inside the chip.

color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
size
'md'
"xs" | "sm" | "md" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl"
position
'top-right'
"top-right" | "bottom-right" | "top-left" | "bottom-left"

The position of the chip.

inset
false
boolean

When true, keep the chip inside the component for rounded elements.

standalone
false
boolean

When true, render the chip relatively to the parent.

show
true
boolean
ui
{ root?: SlotClass; base?: SlotClass; }

Slots

Slot Type
default
{}
content
{}

Emits

Event Type
update:show
[value: boolean]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    chip: {
      slots: {
        root: 'relative inline-flex items-center justify-center shrink-0',
        base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap'
      },
      variants: {
        color: {
          primary: 'bg-primary',
          secondary: 'bg-secondary',
          success: 'bg-success',
          info: 'bg-info',
          warning: 'bg-warning',
          error: 'bg-error',
          neutral: 'bg-inverted'
        },
        size: {
          '3xs': 'h-[4px] min-w-[4px] text-[4px]',
          '2xs': 'h-[5px] min-w-[5px] text-[5px]',
          xs: 'h-[6px] min-w-[6px] text-[6px]',
          sm: 'h-[7px] min-w-[7px] text-[7px]',
          md: 'h-[8px] min-w-[8px] text-[8px]',
          lg: 'h-[9px] min-w-[9px] text-[9px]',
          xl: 'h-[10px] min-w-[10px] text-[10px]',
          '2xl': 'h-[11px] min-w-[11px] text-[11px]',
          '3xl': 'h-[12px] min-w-[12px] text-[12px]'
        },
        position: {
          'top-right': 'top-0 right-0',
          'bottom-right': 'bottom-0 right-0',
          'top-left': 'top-0 left-0',
          'bottom-left': 'bottom-0 left-0'
        },
        inset: {
          false: ''
        },
        standalone: {
          false: 'absolute'
        }
      },
      compoundVariants: [
        {
          position: 'top-right',
          inset: false,
          class: '-translate-y-1/2 translate-x-1/2 transform'
        },
        {
          position: 'bottom-right',
          inset: false,
          class: 'translate-y-1/2 translate-x-1/2 transform'
        },
        {
          position: 'top-left',
          inset: false,
          class: '-translate-y-1/2 -translate-x-1/2 transform'
        },
        {
          position: 'bottom-left',
          inset: false,
          class: 'translate-y-1/2 -translate-x-1/2 transform'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        position: 'top-right'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        chip: {
          slots: {
            root: 'relative inline-flex items-center justify-center shrink-0',
            base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap'
          },
          variants: {
            color: {
              primary: 'bg-primary',
              secondary: 'bg-secondary',
              success: 'bg-success',
              info: 'bg-info',
              warning: 'bg-warning',
              error: 'bg-error',
              neutral: 'bg-inverted'
            },
            size: {
              '3xs': 'h-[4px] min-w-[4px] text-[4px]',
              '2xs': 'h-[5px] min-w-[5px] text-[5px]',
              xs: 'h-[6px] min-w-[6px] text-[6px]',
              sm: 'h-[7px] min-w-[7px] text-[7px]',
              md: 'h-[8px] min-w-[8px] text-[8px]',
              lg: 'h-[9px] min-w-[9px] text-[9px]',
              xl: 'h-[10px] min-w-[10px] text-[10px]',
              '2xl': 'h-[11px] min-w-[11px] text-[11px]',
              '3xl': 'h-[12px] min-w-[12px] text-[12px]'
            },
            position: {
              'top-right': 'top-0 right-0',
              'bottom-right': 'bottom-0 right-0',
              'top-left': 'top-0 left-0',
              'bottom-left': 'bottom-0 left-0'
            },
            inset: {
              false: ''
            },
            standalone: {
              false: 'absolute'
            }
          },
          compoundVariants: [
            {
              position: 'top-right',
              inset: false,
              class: '-translate-y-1/2 translate-x-1/2 transform'
            },
            {
              position: 'bottom-right',
              inset: false,
              class: 'translate-y-1/2 translate-x-1/2 transform'
            },
            {
              position: 'top-left',
              inset: false,
              class: '-translate-y-1/2 -translate-x-1/2 transform'
            },
            {
              position: 'bottom-left',
              inset: false,
              class: 'translate-y-1/2 -translate-x-1/2 transform'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            position: 'top-right'
          }
        }
      }
    })
  ]
})

更改日志

No recent changes

Card

Display content in a card with a header, body and footer.

Collapsible

A collapsible element to toggle visibility of its content.