Tag 标签 ​

<template>
  <div class="flex gap-2">
    <u-tag type="primary">Tag 1</u-tag>
    <u-tag type="success">Tag 2</u-tag>
    <u-tag type="info">Tag 3</u-tag>
    <u-tag type="warning">Tag 4</u-tag>
    <u-tag type="danger">Tag 5</u-tag>
  </div>
</template>

<template>
  <div class="flex gap-2">
    <u-tag icon-tag :icon="UserFilled">Tag 1</u-tag>
    <u-tag icon-tag :icon="UserFilled">
      <template #icon>
        <u-icon>
          <User />
        </u-icon>
      </template>
      Tag 2
    </u-tag>
    <u-tag
      type="danger"
      color="#FFECE8"
      :bordered="false"
      icon-tag
      :icon="CircleCloseFilled"
    >
      Cancel
    </u-tag>
    <u-tag
      type="success"
      color="#E8FFEA"
      :bordered="false"
      icon-tag
      :icon="SuccessFilled"
    >
      Success
    </u-tag>
    <u-tag icon-tag :icon="UserFilled" border-color="#1D39C4"
      >Custom Border
    </u-tag>
  </div>
</template>

<script lang="ts" setup>
import {
  CircleCloseFilled,
  SuccessFilled,
  User,
  UserFilled,
} from '@uniboot/icons-vue'
</script>

<template>
  <div class="flex gap-2">
    <u-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
      {{ tag.name }}
    </u-tag>
  </div>
</template>

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

import type { TagProps } from 'uniboot-ui'

interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref<TagsItem[]>([
  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])
</script>

<template>
  <div class="flex gap-2">
    <u-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </u-tag>
    <u-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <u-button v-else class="button-new-tag" size="small" @click="showInput">
      + New Tag
    </u-button>
  </div>
</template>

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

import type { InputInstance } from 'uniboot-ui'

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<template>
  <div class="flex gap-2">
    <u-tag size="large">Large</u-tag>
    <u-tag>Default</u-tag>
    <u-tag size="small">Small</u-tag>
  </div>
</template>

<template>
  <div class="flex gap-2">
    <span>Dark</span>
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
    >
      {{ item.label }}
    </u-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <span>Light</span>
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </u-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <span>Plain</span>
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </u-tag>
  </div>
  <div class="flex gap-5 mt-4">
    <span>Dot</span>
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dot"
    >
      {{ item.label }}
    </u-tag>
  </div>
  <div class="flex gap-5 mt-4">
    <span>Soft</span>
    <u-tag type="primary" effect="soft">提示</u-tag>
    <u-tag
      v-for="item in softItems"
      :key="item.label"
      :type="item.type"
      effect="soft"
    >
      {{ item.label }}
    </u-tag>
    <u-tag type="danger" effect="soft">严重</u-tag>
  </div>
</template>

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

import type { TagProps } from 'uniboot-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
])

const softItems = ref<Array<Item>>([
  { type: 'success', label: '成功' },
  { type: 'info', label: '信息' },
  { type: 'warning', label: '警告' },
])
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <u-tag type="primary" effect="soft">提示</u-tag>
    <u-tag type="success" effect="soft">成功</u-tag>
    <u-tag type="warning" effect="soft">警告</u-tag>
    <u-tag type="info" effect="soft">信息</u-tag>
    <u-tag type="danger" effect="soft">严重</u-tag>
  </div>
  <div class="flex flex-wrap gap-3 mt-4">
    <u-tag type="primary" effect="soft" size="large">提示</u-tag>
    <u-tag type="success" effect="soft" size="small">成功</u-tag>
    <u-tag type="warning" effect="soft" color="#e6a23c">自定义圆点色</u-tag>
    <u-tag type="danger" effect="soft" closable>严重</u-tag>
  </div>
</template>

<template>
  <div class="flex gap-2">
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
      round
    >
      {{ item.label }}
    </u-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
      round
    >
      {{ item.label }}
    </u-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <u-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
      round
    >
      {{ item.label }}
    </u-tag>
  </div>
</template>

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

import type { TagProps } from 'uniboot-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
])
</script>

<template>
  <div class="flex gap-2">
    <u-check-tag checked>Checked</u-check-tag>
    <u-check-tag :checked="checked" @change="onChange">Toggle me</u-check-tag>
    <u-check-tag disabled>Disabled</u-check-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <u-check-tag :checked="checked1" type="primary" @change="onChange1">
      Tag 1
    </u-check-tag>
    <u-check-tag :checked="checked2" type="success" @change="onChange2">
      Tag 2
    </u-check-tag>
    <u-check-tag :checked="checked3" type="info" @change="onChange3">
      Tag 3
    </u-check-tag>
    <u-check-tag :checked="checked4" type="warning" @change="onChange4">
      Tag 4
    </u-check-tag>
    <u-check-tag :checked="checked5" type="danger" @change="onChange5">
      Tag 5
    </u-check-tag>
    <u-check-tag
      :checked="checked6"
      disabled
      type="success"
      @change="onChange6"
    >
      Tag 6
    </u-check-tag>
  </div>
</template>

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

const checked = ref(false)
const checked1 = ref(true)
const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)

const onChange = (status: boolean) => {
  checked.value = status
}

const onChange1 = (status: boolean) => {
  checked1.value = status
}

const onChange2 = (status: boolean) => {
  checked2.value = status
}

const onChange3 = (status: boolean) => {
  checked3.value = status
}

const onChange4 = (status: boolean) => {
  checked4.value = status
}

const onChange5 = (status: boolean) => {
  checked5.value = status
}

const onChange6 = (status: boolean) => {
  checked6.value = status
}
</script>