Tu View PlusTag
Used for marking and selection.
Basic usage
Tag basic usage.
Tag Tag
<template>
<tu-tag>Tag</tu-tag>
<tu-tag>
<template #icon><Search /></template>
Tag
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-tag>Tag</tu-tag>
<tu-tag>
<template #icon><Search /></template>
Tag
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>Removable tag
Closable attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you don t want to use it, you can set the disable-transitions attribute, which accepts a Boolean, to true. close event triggers when Tag is removed.
Tag Tag
<template>
<tu-tag closable>Tag</tu-tag>
<tu-tag closable>
<template #icon><Search /></template>
Tag
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-tag closable>Tag</tu-tag>
<tu-tag closable>
<template #icon><Search /></template>
Tag
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>Edit dynamically
You can use the close event to add and remove tag dynamically.
Tag 1Tag 2Tag 3
<template>
<tu-tag
v-for="tag in dynamicTags"
closable
:key="tag"
@close="handleClose(tag)"
>
{{ tag }}
</tu-tag>
<tu-input
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="deme-tag-input"
size="mini"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<tu-button v-else class="demo-tag-new" size="mini" @click="handleInputShow">
+ New Tag
</tu-button>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { TuInput } from 'tu-view-plus';
const inputValue = ref('');
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof TuInput>>();
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const handleInputShow = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value!.input!.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = '';
};
</script>
<style scoped>
.deme-tag-input {
width: 74px;
margin-left: 8px;
}
.demo-tag-new {
margin-left: 8px;
}
</style><template>
<tu-tag
v-for="tag in dynamicTags"
closable
:key="tag"
@close="handleClose(tag)"
>
{{ tag }}
</tu-tag>
<tu-input
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="deme-tag-input"
size="mini"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<tu-button v-else class="demo-tag-new" size="mini" @click="handleInputShow">
+ New Tag
</tu-button>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { TuInput } from 'tu-view-plus';
const inputValue = ref('');
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof TuInput>>();
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const handleInputShow = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value!.input!.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = '';
};
</script>
<style scoped>
.deme-tag-input {
width: 74px;
margin-left: 8px;
}
.demo-tag-new {
margin-left: 8px;
}
</style>Color
Setting color attribute can define tag text color.
DefaultGreenBlueRedOrange
<template>
<tu-tag>Default</tu-tag>
<tu-tag color="#50d4ab">Green</tu-tag>
<tu-tag color="#5e7ce0">Blue</tu-tag>
<tu-tag color="#f66f6a">Red</tu-tag>
<tu-tag color="#fa9841">Orange</tu-tag>
</template><template>
<tu-tag>Default</tu-tag>
<tu-tag color="#50d4ab">Green</tu-tag>
<tu-tag color="#5e7ce0">Blue</tu-tag>
<tu-tag color="#f66f6a">Red</tu-tag>
<tu-tag color="#fa9841">Orange</tu-tag>
</template>Themes
Tag provide five different themes: outset、inset、dark、light and plain. Using effect to change, default is outset.
Outset
DefaultGreenBlueRedOrange
Inset
DefaultGreenBlueRedOrange
Light
DefaultGreenBlueRedOrange
Dark
DefaultGreenBlueRedOrange
Plain
DefaultGreenBlueRedOrange
<template>
<p>Outset</p>
<tu-row>
<tu-tag>Default</tu-tag>
<tu-tag color="#50d4ab">Green</tu-tag>
<tu-tag color="#5e7ce0">Blue</tu-tag>
<tu-tag color="#f66f6a">Red</tu-tag>
<tu-tag color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Inset</p>
<tu-row>
<tu-tag effect="inset">Default</tu-tag>
<tu-tag effect="inset" color="#50d4ab">Green</tu-tag>
<tu-tag effect="inset" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="inset" color="#f66f6a">Red</tu-tag>
<tu-tag effect="inset" color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Light</p>
<tu-row>
<tu-tag effect="light">Default</tu-tag>
<tu-tag effect="light" color="#50d4ab">Green</tu-tag>
<tu-tag effect="light" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="light" color="#f66f6a">Red</tu-tag>
<tu-tag effect="light" color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Dark</p>
<tu-row>
<tu-tag effect="dark">Default</tu-tag>
<tu-tag effect="dark" color="#50d4ab">Green</tu-tag>
<tu-tag effect="dark" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="dark" color="#f66f6a">Red</tu-tag>
<tu-tag effect="dark" color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Plain</p>
<tu-row>
<tu-tag effect="plain">Default</tu-tag>
<tu-tag effect="plain" color="#50d4ab">Green</tu-tag>
<tu-tag effect="plain" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="plain" color="#f66f6a">Red</tu-tag>
<tu-tag effect="plain" color="#fa9841">Orange</tu-tag>
</tu-row>
</template><template>
<p>Outset</p>
<tu-row>
<tu-tag>Default</tu-tag>
<tu-tag color="#50d4ab">Green</tu-tag>
<tu-tag color="#5e7ce0">Blue</tu-tag>
<tu-tag color="#f66f6a">Red</tu-tag>
<tu-tag color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Inset</p>
<tu-row>
<tu-tag effect="inset">Default</tu-tag>
<tu-tag effect="inset" color="#50d4ab">Green</tu-tag>
<tu-tag effect="inset" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="inset" color="#f66f6a">Red</tu-tag>
<tu-tag effect="inset" color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Light</p>
<tu-row>
<tu-tag effect="light">Default</tu-tag>
<tu-tag effect="light" color="#50d4ab">Green</tu-tag>
<tu-tag effect="light" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="light" color="#f66f6a">Red</tu-tag>
<tu-tag effect="light" color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Dark</p>
<tu-row>
<tu-tag effect="dark">Default</tu-tag>
<tu-tag effect="dark" color="#50d4ab">Green</tu-tag>
<tu-tag effect="dark" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="dark" color="#f66f6a">Red</tu-tag>
<tu-tag effect="dark" color="#fa9841">Orange</tu-tag>
</tu-row>
<p>Plain</p>
<tu-row>
<tu-tag effect="plain">Default</tu-tag>
<tu-tag effect="plain" color="#50d4ab">Green</tu-tag>
<tu-tag effect="plain" color="#5e7ce0">Blue</tu-tag>
<tu-tag effect="plain" color="#f66f6a">Red</tu-tag>
<tu-tag effect="plain" color="#fa9841">Orange</tu-tag>
</tu-row>
</template>Rounded
Tag can also be rounded like button.
DefaultGreenBlueRedOrange
DefaultGreenBlueRedOrange
DefaultGreenBlueRedOrange
DefaultGreenBlueRedOrange
DefaultGreenBlueRedOrange
<template>
<tu-row class="mb-2">
<tu-tag round>Default</tu-tag>
<tu-tag round color="#50d4ab">Green</tu-tag>
<tu-tag round color="#5e7ce0">Blue</tu-tag>
<tu-tag round color="#f66f6a">Red</tu-tag>
<tu-tag round color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="inset">Default</tu-tag>
<tu-tag round effect="inset" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="inset" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="inset" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="inset" color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="light">Default</tu-tag>
<tu-tag round effect="light" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="light" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="light" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="light" color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="dark">Default</tu-tag>
<tu-tag round effect="dark" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="dark" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="dark" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="dark" color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="plain">Default</tu-tag>
<tu-tag round effect="plain" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="plain" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="plain" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="plain" color="#fa9841">Orange</tu-tag>
</tu-row>
</template><template>
<tu-row class="mb-2">
<tu-tag round>Default</tu-tag>
<tu-tag round color="#50d4ab">Green</tu-tag>
<tu-tag round color="#5e7ce0">Blue</tu-tag>
<tu-tag round color="#f66f6a">Red</tu-tag>
<tu-tag round color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="inset">Default</tu-tag>
<tu-tag round effect="inset" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="inset" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="inset" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="inset" color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="light">Default</tu-tag>
<tu-tag round effect="light" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="light" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="light" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="light" color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="dark">Default</tu-tag>
<tu-tag round effect="dark" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="dark" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="dark" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="dark" color="#fa9841">Orange</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="plain">Default</tu-tag>
<tu-tag round effect="plain" color="#50d4ab">Green</tu-tag>
<tu-tag round effect="plain" color="#5e7ce0">Blue</tu-tag>
<tu-tag round effect="plain" color="#f66f6a">Red</tu-tag>
<tu-tag round effect="plain" color="#fa9841">Orange</tu-tag>
</tu-row>
</template>Sizes
Besides default size, tu-tag component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.
Mini TagSmall TagMedium TagLarge Tag
<template>
<tu-row class="demo-tag-row">
<tu-tag size="mini">Mini Tag</tu-tag>
<tu-tag size="small">Small Tag</tu-tag>
<tu-tag>Medium Tag</tu-tag>
<tu-tag size="large">Large Tag</tu-tag>
</tu-row>
</template>
<style>
.demo-tag-row {
align-items: baseline;
}
</style><template>
<tu-row class="demo-tag-row">
<tu-tag size="mini">Mini Tag</tu-tag>
<tu-tag size="small">Small Tag</tu-tag>
<tu-tag>Medium Tag</tu-tag>
<tu-tag size="large">Large Tag</tu-tag>
</tu-row>
</template>
<style>
.demo-tag-row {
align-items: baseline;
}
</style>Tag API
Tag Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| closable | Whether Tag can be removed | Boolean | false |
| effect | Theme of Tag | String | outset |
| round | Whether Tag is rounded | Boolean | false |
| color | Color of the Tag | String | - |
| disable-transitions | Whether to disable animations | Boolean | false |
| hit | Whether Tag has a highlighted border | Boolean | false |
| size | Size of Tag | String | medium |
Tag Events
| Name | Description | Type |
|---|---|---|
| click | Triggers when Tag is clicked | Function |
| close | Triggers when Tag is removed | Function |
Tag Slots
| Name | Description |
|---|---|
| - | Customize default content |