76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<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>
|