HopeKitAppearance
Tabs
Switch contents in same area. Tabs organize content across different screens, data sets, and other interactions.
Default Type
Tabs with default theme. Tabs may have different sizes.
Config
Project
Member
Config
Project
Member
<template>
<div class="">
<HcTabs
v-model="value1"
:items="items"
/>
<HcTabs
v-model="value2"
:items="items"
size="large"
class="mt-10"
/>
</div>
</template>
<script lang="ts" setup>
import { HcTabs } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('item_1');
const value2 = ref('item_1');
const items = ref([
{
id: 'item_1',
title: 'Config',
},
{
id: 'item_2',
title: 'Project',
},
{
id: 'item_3',
title: 'Member',
},
]);
</script>
Headline Type
Tabs with headline theme. Tabs may have different sizes.
Config
Project
Member
Config
Project
Member
<template>
<div class="">
<HcTabs
v-model="value1"
:items="items"
type="headline"
/>
<HcTabs
v-model="value2"
:items="items"
type="headline"
size="large"
class="mt-10"
/>
</div>
</template>
<script lang="ts" setup>
import { HcTabs } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('item_1');
const value2 = ref('item_1');
const items = ref([
{
id: 'item_1',
title: 'Config',
},
{
id: 'item_2',
title: 'Project',
},
{
id: 'item_3',
title: 'Member',
},
]);
</script>
Lite Type
Tabs with lite theme. Tabs may have different sizes.
Config
Project
Member
Config
Project
Member
<template>
<div class="">
<HcTabs
v-model="value1"
:items="items"
type="lite"
/>
<HcTabs
v-model="value2"
:items="items"
type="lite"
size="large"
class="mt-10"
/>
</div>
</template>
<script lang="ts" setup>
import { HcTabs } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('item_1');
const value2 = ref('item_1');
const items = ref([
{
id: 'item_1',
title: 'Config',
},
{
id: 'item_2',
title: 'Project',
},
{
id: 'item_3',
title: 'Member',
},
]);
</script>
Small line Type
Tabs with small-line theme. Tabs may have different sizes.
<template>
<div class="">
<HcTabs
v-model="value1"
:items="items"
type="small-line"
/>
<HcTabs
v-model="value2"
:items="items"
type="small-line"
size="large"
class="mt-10"
/>
</div>
</template>
<script lang="ts" setup>
import { HcTabs } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';
const value1 = ref('item_1');
const value2 = ref('item_1');
const items = ref([
{
id: 'item_1',
title: 'Sharing',
icon: 'share',
},
{
id: 'item_2',
title: 'Refresh',
icon: 'refresh',
},
{
id: 'item_3',
title: 'Settings',
icon: 'settings',
},
]);
</script>
Props
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| modelValue | String | String | binding value | false |
| items | Tab[] | Tab[] | tabs items | |
| type | String | defaultheadlinesmall-linelite | tabs type | default |
| size | String | smalllarge | tabs size | small |
Slots
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| label-icon | - | customize label icon | ||
| label | - | customize label content |
Events
| Property | Type | Values | Description | Default |
|---|---|---|---|---|
| update:model-value | Function | value - string | triggers when the active tag changes | |
| change | Function | value - string | triggers when the active tag changes |