85 lines
3.0 KiB
Vue
85 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
// common components
|
|
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
|
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
|
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
|
|
|
import FilledColor from '@/components/ui-components/chip/FilledColor.vue';
|
|
import Outlined from '@/components/ui-components/chip/Outlined.vue';
|
|
import CustomIcon from '@/components/ui-components/chip/CustomIcon.vue';
|
|
import CustomIconOutlined from '@/components/ui-components/chip/CustomIconOutlined.vue';
|
|
import Disabled from '@/components/ui-components/chip/Disabled.vue';
|
|
import Sizes from '@/components/ui-components/chip/Sizes.vue';
|
|
import Closable from '@/components/ui-components/chip/Closable.vue';
|
|
|
|
// template breadcrumb
|
|
const page = ref({ title: 'Chip' });
|
|
const breadcrumbs = ref([
|
|
{
|
|
text: 'Dashboard',
|
|
disabled: false,
|
|
href: '#'
|
|
},
|
|
{
|
|
text: 'Chip',
|
|
disabled: true,
|
|
href: '#'
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<UiParentCard title="Chip">
|
|
<v-row>
|
|
<!-- Filled Color -->
|
|
<v-col cols="12" >
|
|
<UiChildCard title="Filled">
|
|
<FilledColor/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
<!-- Outlined -->
|
|
<v-col cols="12" >
|
|
<UiChildCard title="Outlined">
|
|
<Outlined/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
<!-- Label with Icon -->
|
|
<v-col cols="12" lg="6">
|
|
<UiChildCard title="Custom Icon">
|
|
<CustomIcon/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
<!-- Outlined Color -->
|
|
<v-col cols="12" lg="6">
|
|
<UiChildCard title="Custom Outlined Icon">
|
|
<CustomIconOutlined/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
<!-- Disabled -->
|
|
<v-col cols="12" lg="6">
|
|
<UiChildCard title="Disabled">
|
|
<Disabled/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
<!-- Sizes -->
|
|
<v-col cols="12" lg="6">
|
|
<UiChildCard title="Sizes">
|
|
<Sizes/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
<!-- Closable -->
|
|
<v-col cols="12" >
|
|
<UiChildCard title="Closable">
|
|
<Closable/>
|
|
</UiChildCard>
|
|
</v-col>
|
|
</v-row>
|
|
</UiParentCard>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|