first commit
This commit is contained in:
Inshal
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
const isDefaultChipVisible = ref(true)
|
||||
const isPrimaryChipVisible = ref(true)
|
||||
const isSecondaryChipVisible = ref(true)
|
||||
const isSuccessChipVisible = ref(true)
|
||||
const isInfoChipVisible = ref(true)
|
||||
const isWarningChipVisible = ref(true)
|
||||
const isErrorChipVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip
|
||||
v-if="isDefaultChipVisible"
|
||||
closable
|
||||
@click:close="isDefaultChipVisible = !isDefaultChipVisible"
|
||||
>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isPrimaryChipVisible"
|
||||
closable
|
||||
color="primary"
|
||||
@click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSecondaryChipVisible"
|
||||
closable
|
||||
color="secondary"
|
||||
@click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSuccessChipVisible"
|
||||
closable
|
||||
color="success"
|
||||
@click:close="isSuccessChipVisible = !isSuccessChipVisible"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isInfoChipVisible"
|
||||
closable
|
||||
color="info"
|
||||
@click:close="isInfoChipVisible = !isInfoChipVisible"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isWarningChipVisible"
|
||||
closable
|
||||
color="warning"
|
||||
@click:close="isWarningChipVisible = !isWarningChipVisible"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isErrorChipVisible"
|
||||
closable
|
||||
color="error"
|
||||
@click:close="isErrorChipVisible = !isErrorChipVisible"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
31
resources/js/views/demos/components/chip/DemoChipColor.vue
Normal file
31
resources/js/views/demos/components/chip/DemoChipColor.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="elevated">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="elevated"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="elevated"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="elevated"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="elevated"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
const isMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="isMenuVisible"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<!-- v-menu activator -->
|
||||
<template #activator="{ props }">
|
||||
<VChip v-bind="props">
|
||||
VueJS
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- v-menu list -->
|
||||
<VList>
|
||||
<VListItem>
|
||||
<VListItemTitle>VueJS</VListItemTitle>
|
||||
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="ms-1">
|
||||
<IconBtn @click="isMenuVisible = false">
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-close-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
const chips = ref([
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
|
||||
const items = ref([
|
||||
'Streaming',
|
||||
'Eating',
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCombobox
|
||||
v-model="chips"
|
||||
chips
|
||||
clearable
|
||||
multiple
|
||||
closable-chips
|
||||
clear-icon="ri-close-circle-line"
|
||||
:items="items"
|
||||
label="Your favorite hobbies"
|
||||
prepend-icon="ri-filter-3-line"
|
||||
/>
|
||||
</template>
|
||||
49
resources/js/views/demos/components/chip/DemoChipLabel.vue
Normal file
49
resources/js/views/demos/components/chip/DemoChipLabel.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip label>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="outlined">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="outlined"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="outlined"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
21
resources/js/views/demos/components/chip/DemoChipSizes.vue
Normal file
21
resources/js/views/demos/components/chip/DemoChipSizes.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip size="x-small">
|
||||
x-small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="small">
|
||||
small chip
|
||||
</VChip>
|
||||
|
||||
<VChip>Default</VChip>
|
||||
|
||||
<VChip size="large">
|
||||
large chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="x-large">
|
||||
x-large chip
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip :prepend-avatar="avatar1">
|
||||
<span>Chip</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar2">
|
||||
<span>Darcy Nooser</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar3">
|
||||
<span>Felicia Risker</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar4">
|
||||
<span>Minnie Mostly</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip prepend-icon="ri-user-line">
|
||||
Account
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
prepend-icon="ri-star-line"
|
||||
>
|
||||
Premium
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
prepend-icon="ri-cake-line"
|
||||
>
|
||||
1 Year
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
prepend-icon="ri-notification-line"
|
||||
>
|
||||
Notification
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
prepend-icon="ri-message-line"
|
||||
>
|
||||
Message
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
prepend-icon="ri-error-warning-line"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
prepend-icon="ri-error-warning-line"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
837
resources/js/views/demos/components/chip/demoCodeChip.js
Normal file
837
resources/js/views/demos/components/chip/demoCodeChip.js
Normal file
@@ -0,0 +1,837 @@
|
||||
export const closable = { ts: `<script lang="ts" setup>
|
||||
const isDefaultChipVisible = ref(true)
|
||||
const isPrimaryChipVisible = ref(true)
|
||||
const isSecondaryChipVisible = ref(true)
|
||||
const isSuccessChipVisible = ref(true)
|
||||
const isInfoChipVisible = ref(true)
|
||||
const isWarningChipVisible = ref(true)
|
||||
const isErrorChipVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip
|
||||
v-if="isDefaultChipVisible"
|
||||
closable
|
||||
@click:close="isDefaultChipVisible = !isDefaultChipVisible"
|
||||
>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isPrimaryChipVisible"
|
||||
closable
|
||||
color="primary"
|
||||
@click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSecondaryChipVisible"
|
||||
closable
|
||||
color="secondary"
|
||||
@click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSuccessChipVisible"
|
||||
closable
|
||||
color="success"
|
||||
@click:close="isSuccessChipVisible = !isSuccessChipVisible"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isInfoChipVisible"
|
||||
closable
|
||||
color="info"
|
||||
@click:close="isInfoChipVisible = !isInfoChipVisible"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isWarningChipVisible"
|
||||
closable
|
||||
color="warning"
|
||||
@click:close="isWarningChipVisible = !isWarningChipVisible"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isErrorChipVisible"
|
||||
closable
|
||||
color="error"
|
||||
@click:close="isErrorChipVisible = !isErrorChipVisible"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isDefaultChipVisible = ref(true)
|
||||
const isPrimaryChipVisible = ref(true)
|
||||
const isSecondaryChipVisible = ref(true)
|
||||
const isSuccessChipVisible = ref(true)
|
||||
const isInfoChipVisible = ref(true)
|
||||
const isWarningChipVisible = ref(true)
|
||||
const isErrorChipVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip
|
||||
v-if="isDefaultChipVisible"
|
||||
closable
|
||||
@click:close="isDefaultChipVisible = !isDefaultChipVisible"
|
||||
>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isPrimaryChipVisible"
|
||||
closable
|
||||
color="primary"
|
||||
@click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSecondaryChipVisible"
|
||||
closable
|
||||
color="secondary"
|
||||
@click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSuccessChipVisible"
|
||||
closable
|
||||
color="success"
|
||||
@click:close="isSuccessChipVisible = !isSuccessChipVisible"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isInfoChipVisible"
|
||||
closable
|
||||
color="info"
|
||||
@click:close="isInfoChipVisible = !isInfoChipVisible"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isWarningChipVisible"
|
||||
closable
|
||||
color="warning"
|
||||
@click:close="isWarningChipVisible = !isWarningChipVisible"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isErrorChipVisible"
|
||||
closable
|
||||
color="error"
|
||||
@click:close="isErrorChipVisible = !isErrorChipVisible"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const color = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const elevated = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="elevated">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="elevated"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="elevated"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="elevated"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="elevated"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="elevated">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="elevated"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="elevated"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="elevated"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="elevated"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const expandable = { ts: `<script lang="ts" setup>
|
||||
const isMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="isMenuVisible"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<!-- v-menu activator -->
|
||||
<template #activator="{ props }">
|
||||
<VChip v-bind="props">
|
||||
VueJS
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- v-menu list -->
|
||||
<VList>
|
||||
<VListItem>
|
||||
<VListItemTitle>VueJS</VListItemTitle>
|
||||
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="ms-1">
|
||||
<IconBtn @click="isMenuVisible = false">
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-close-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="isMenuVisible"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<!-- v-menu activator -->
|
||||
<template #activator="{ props }">
|
||||
<VChip v-bind="props">
|
||||
VueJS
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- v-menu list -->
|
||||
<VList>
|
||||
<VListItem>
|
||||
<VListItemTitle>VueJS</VListItemTitle>
|
||||
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="ms-1">
|
||||
<IconBtn @click="isMenuVisible = false">
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-close-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inSelects = { ts: `<script lang="ts" setup>
|
||||
const chips = ref(['Programming', 'Playing games', 'Sleeping'])
|
||||
const items = ref(['Streaming', 'Eating', 'Programming', 'Playing games', 'Sleeping'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCombobox
|
||||
v-model="chips"
|
||||
chips
|
||||
clearable
|
||||
multiple
|
||||
closable-chips
|
||||
clear-icon="ri-close-circle-line"
|
||||
:items="items"
|
||||
label="Your favorite hobbies"
|
||||
prepend-icon="ri-filter-3-line"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const chips = ref([
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
|
||||
const items = ref([
|
||||
'Streaming',
|
||||
'Eating',
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCombobox
|
||||
v-model="chips"
|
||||
chips
|
||||
clearable
|
||||
multiple
|
||||
closable-chips
|
||||
clear-icon="ri-close-circle-line"
|
||||
:items="items"
|
||||
label="Your favorite hobbies"
|
||||
prepend-icon="ri-filter-3-line"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const label = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip label>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip label>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
label
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const outlined = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="outlined">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="outlined"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="outlined"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="outlined">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="outlined"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="outlined"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const sizes = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip size="x-small">
|
||||
x-small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="small">
|
||||
small chip
|
||||
</VChip>
|
||||
|
||||
<VChip>Default</VChip>
|
||||
|
||||
<VChip size="large">
|
||||
large chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="x-large">
|
||||
x-large chip
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip size="x-small">
|
||||
x-small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="small">
|
||||
small chip
|
||||
</VChip>
|
||||
|
||||
<VChip>Default</VChip>
|
||||
|
||||
<VChip size="large">
|
||||
large chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="x-large">
|
||||
x-large chip
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const withAvatar = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip :prepend-avatar="avatar1">
|
||||
<span>Chip</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar2">
|
||||
<span>Darcy Nooser</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar3">
|
||||
<span>Felicia Risker</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar4">
|
||||
<span>Minnie Mostly</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip :prepend-avatar="avatar1">
|
||||
<span>Chip</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar2">
|
||||
<span>Darcy Nooser</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar3">
|
||||
<span>Felicia Risker</span>
|
||||
</VChip>
|
||||
|
||||
<VChip :prepend-avatar="avatar4">
|
||||
<span>Minnie Mostly</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const withIcon = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip prepend-icon="ri-user-line">
|
||||
Account
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
prepend-icon="ri-star-line"
|
||||
>
|
||||
Premium
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
prepend-icon="ri-cake-line"
|
||||
>
|
||||
1 Year
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
prepend-icon="ri-notification-line"
|
||||
>
|
||||
Notification
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
prepend-icon="ri-message-line"
|
||||
>
|
||||
Message
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
prepend-icon="ri-error-warning-line"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
prepend-icon="ri-error-warning-line"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip prepend-icon="ri-user-line">
|
||||
Account
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
prepend-icon="ri-star-line"
|
||||
>
|
||||
Premium
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
prepend-icon="ri-cake-line"
|
||||
>
|
||||
1 Year
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
prepend-icon="ri-notification-line"
|
||||
>
|
||||
Notification
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
prepend-icon="ri-message-line"
|
||||
>
|
||||
Message
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
prepend-icon="ri-error-warning-line"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
prepend-icon="ri-error-warning-line"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user