HopeKitAppearance
Tags
Used for marking and selection.
Basic Usage
Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
Tag provide three different themes: dark, light.
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
<template>
<div class="flex flex-col">
<div class="flex space-x-4">
<HcTag
v-for="tag in tags"
:key="tag.type"
:type="tag.type"
:content="tag.name"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { HcTag } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const tags = ref([
{
name: 'Tag 1',
type: 'success',
},
{
name: 'Tag 2',
type: 'warning',
},
{
name: 'Tag 3',
type: 'danger',
},
{
name: 'Tag 4',
type: 'primary',
},
{
name: 'Tag 5',
type: 'info',
},
{
name: 'Tag 6',
type: 'overline',
},
]);
</script>
Removable Tag
clearable attribute can be used to define a removable tag. It accepts a Boolean.
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
<template>
<div class="flex flex-col">
<div class="flex space-x-4">
<HcTag
v-for="tag in tags"
:key="tag.type"
:type="tag.type"
:content="tag.name"
clearable
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { HcTag } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const tags = ref([
{
name: 'Tag 1',
type: 'success',
},
{
name: 'Tag 2',
type: 'warning',
},
{
name: 'Tag 3',
type: 'danger',
},
{
name: 'Tag 4',
type: 'primary',
},
{
name: 'Tag 5',
type: 'info',
},
{
name: 'Tag 6',
type: 'overline',
},
]);
</script>
Sizes
Use attribute size to set size of the component. Available sizes: medium or small.
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
<template>
<div class="flex flex-col">
<div class="flex space-x-4">
<HcTag
v-for="tag in tags"
:key="tag.type"
:type="tag.type"
:content="tag.name"
/>
</div>
<div class="mt-5 flex space-x-4">
<HcTag
v-for="tag in tags"
:key="tag.type"
:type="tag.type"
:content="tag.name"
size="small"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { HcTag } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const tags = ref([
{
name: 'Tag 1',
type: 'success',
},
{
name: 'Tag 2',
type: 'warning',
},
{
name: 'Tag 3',
type: 'danger',
},
{
name: 'Tag 4',
type: 'primary',
},
{
name: 'Tag 5',
type: 'info',
},
{
name: 'Tag 6',
type: 'overline',
},
]);
</script>
Props
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| type | String | successinfowarningdangerprimaryoverline | component type | info |
| customClass | String | String | custom class for component | |
| theme | String | darklight | component theme | light |
| clearable | Boolean | Boolean | whether Tag can be removed | false |
| content | String | String | component content | |
| size | String | mediumsmall | tag size | medium |
Slots
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| default | - | customize default content |
Events
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| update:model-value | Function | value - string | triggers when the Input value change | |
| keydown-enter | Function | event - KeyboardEvent | triggers when press enter | |
| clear | Function | - | triggers when click on clear icon | |
| focus | Function | event - FocusEvent | triggers when Input focuses | |
| blur | Function | value - string | triggers when Input blurs | |
| input | Function | value - string | triggers when the Input value change |