Tag

Basic Usage

View source

<script setup lang="ts">
import { UniTag } from "unify-ui";
</script>

<template>
  <UniTag>test</UniTag>
</template>

Preset

View source

<script setup lang="ts">
import { UniTag } from "unify-ui";

const presets = ["default", "info", "success", "warning", "error"] as const;
</script>

<template>
  <UniTag v-for="preset in presets" :key="preset" :type="preset">{{ preset }}</UniTag>
</template>

Closeable

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniTag } from "unify-ui";

const originPreset = ["default", "info", "success", "warning", "error"] as const;
const presets = ref(new Set(originPreset as typeof originPreset));

function handleClose(tag: (typeof originPreset)[number]) {
  presets.value.delete(tag);
}
</script>

<template>
  <UniTag v-for="preset of presets" :key="preset" :type="preset" closable @close="handleClose(preset)">
    {{ preset }}
  </UniTag>
</template>

API

Properties

withDefaults(
  defineProps<{
    type?: "default" | "success" | "info" | "warning" | "error";
    closable?: boolean;
  }>(),
  {
    type: "default",
  }
);

Events

const emit = defineEmits<{
  (e: "close"): void;
}>();

Slots

defineSlots<{
  default(props: {}): any;
}>();