first commit
This commit is contained in:
Inshal
14
resources/js/views/demos/components/alert/DemoAlertBasic.vue
Normal file
14
resources/js/views/demos/components/alert/DemoAlertBasic.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert color="primary">
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
title="Alert Title"
|
||||
type="error"
|
||||
closable
|
||||
>
|
||||
Alert content
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
color="primary"
|
||||
border="top"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="end"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="bottom"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
const isAlertVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAlert
|
||||
v-model="isAlertVisible"
|
||||
closable
|
||||
close-label="Close Alert"
|
||||
color="primary"
|
||||
>
|
||||
Pudding wafer I love chocolate bar wafer chupa chups wafer. Cake gummies pudding gummies cake.
|
||||
</VAlert>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="text-center">
|
||||
<VBtn
|
||||
v-if="!isAlertVisible"
|
||||
@click="isAlertVisible = true"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="primary"
|
||||
>
|
||||
Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="secondary"
|
||||
>
|
||||
Cookie brownie tootsie roll pudding biscuit chupa chups. Dragée gingerbread carrot.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="success"
|
||||
>
|
||||
Gingerbread jelly beans macaroon croissant soufflé. Muffin halvah cake brownie cake.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="info"
|
||||
>
|
||||
Muffin I love wafer pudding caramels jelly beans fruitcake I love cotton candy.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="warning"
|
||||
>
|
||||
Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="error"
|
||||
>
|
||||
Lemon drops tootsie roll liquorice marzipan lollipop I love tiramisu tootsie roll.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert color="primary">
|
||||
I'm an alert with primary background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="secondary">
|
||||
I'm an alert with secondary background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="success">
|
||||
I'm an alert with success background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="info">
|
||||
I'm an alert with info background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="warning">
|
||||
I'm an alert with warning background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="error">
|
||||
I'm an alert with error background color.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
density="compact"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a compact alert with a <strong>color</strong> of primary.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
density="comfortable"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a comfortable alert with the <strong>variant</strong> prop and a <strong>color</strong> of secondary.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
density="default"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a default alert with the <strong>color</strong> of success.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
const alertShadow = ref(5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSlider
|
||||
v-model="alertShadow"
|
||||
color="primary"
|
||||
:max="24"
|
||||
:min="0"
|
||||
:step="1"
|
||||
thumb-label
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<VAlert
|
||||
color="primary"
|
||||
:elevation="alertShadow"
|
||||
>
|
||||
I'm an alert with box shadow.
|
||||
</VAlert>
|
||||
</template>
|
||||
26
resources/js/views/demos/components/alert/DemoAlertIcons.vue
Normal file
26
resources/js/views/demos/components/alert/DemoAlertIcons.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
color="primary"
|
||||
icon="ri-rocket-line"
|
||||
>
|
||||
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="error"
|
||||
icon="ri-whatsapp-line"
|
||||
variant="tonal"
|
||||
>
|
||||
Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="success"
|
||||
icon="ri-npmjs-line"
|
||||
variant="outlined"
|
||||
>
|
||||
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
Praesent venenatis metus at tortor pulvinar varius. Aenean commodo ligula eget dolor. Praesent ac massa at ligula laoreet iaculis.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="success"
|
||||
>
|
||||
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="info"
|
||||
>
|
||||
Marshmallow jelly beans toffee. Sweet roll lemon drops muffin biscuit. Gummies jujubes halvah dessert cream croissant.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
>
|
||||
Tootsie roll candy canes wafer icing sweet jelly macaroon. Caramels icing fruitcake chocolate cake cake donut.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Jelly beans dragée jelly. Cotton candy danish chocolate cake. Carrot cake pastry jelly beans gummi bears.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
prominent
|
||||
type="info"
|
||||
>
|
||||
<template #text>
|
||||
Macaroon I love tiramisu I love wafer apple pie jelly beans shortbread.
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="success"
|
||||
icon="ri-school-line"
|
||||
prominent
|
||||
>
|
||||
Cotton candy tart tiramisu lollipop gummi bears oat cake cupcake macaroon.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
icon="ri-shield-keyhole-line"
|
||||
prominent
|
||||
type="warning"
|
||||
>
|
||||
Ice cream candy I love wafer bonbon gingerbread candy canes tiramisu.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
45
resources/js/views/demos/components/alert/DemoAlertTonal.vue
Normal file
45
resources/js/views/demos/components/alert/DemoAlertTonal.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
>
|
||||
Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="secondary"
|
||||
>
|
||||
Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="success"
|
||||
>
|
||||
Vestibulum ullamcorper mauris at ligula. Nulla porta dolor.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="info"
|
||||
>
|
||||
Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus tempus. Mauris turpis nunc.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="warning"
|
||||
>
|
||||
Marzipan topping croissant cake sweet roll ice cream soufflé chocolate. Jelly beans chupa chups tootsie roll biscuit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Marzipan topping croissant cake sweet roll ice cream soufflé chocolate. Jelly beans chupa chups tootsie roll biscuit.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
19
resources/js/views/demos/components/alert/DemoAlertType.vue
Normal file
19
resources/js/views/demos/components/alert/DemoAlertType.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert type="info">
|
||||
I'm a alert with a <strong>type</strong> of info
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="success">
|
||||
I'm a alert with a <strong>type</strong> of success
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="warning">
|
||||
I'm a alert with a <strong>type</strong> of warning
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="error">
|
||||
I'm a alert with a <strong>type</strong> of error
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
const isAlertVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="alert-demo-v-model-wrapper">
|
||||
<VAlert
|
||||
v-model="isAlertVisible"
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
|
||||
</VAlert>
|
||||
</div>
|
||||
|
||||
<!-- button -->
|
||||
<VBtn @click="isAlertVisible = !isAlertVisible">
|
||||
{{ isAlertVisible ? "Hide Alert" : "Show Alert" }}
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.alert-demo-v-model-wrapper {
|
||||
margin-block-end: 1rem;
|
||||
min-block-size: 80px;
|
||||
}
|
||||
</style>
|
||||
788
resources/js/views/demos/components/alert/demoCodeAlert.js
Normal file
788
resources/js/views/demos/components/alert/demoCodeAlert.js
Normal file
@@ -0,0 +1,788 @@
|
||||
export const basic = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert color="primary">
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
title="Alert Title"
|
||||
type="error"
|
||||
closable
|
||||
>
|
||||
Alert content
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert color="primary">
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
title="Alert Title"
|
||||
type="error"
|
||||
closable
|
||||
>
|
||||
Alert content
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const border = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
color="primary"
|
||||
border="top"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="end"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="bottom"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
color="primary"
|
||||
border="top"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="end"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="bottom"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
Good Morning! Start your day with some alerts.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const closable = { ts: `<script lang="ts" setup>
|
||||
const isAlertVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAlert
|
||||
v-model="isAlertVisible"
|
||||
closable
|
||||
close-label="Close Alert"
|
||||
color="primary"
|
||||
>
|
||||
Pudding wafer I love chocolate bar wafer chupa chups wafer. Cake gummies pudding gummies cake.
|
||||
</VAlert>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="text-center">
|
||||
<VBtn
|
||||
v-if="!isAlertVisible"
|
||||
@click="isAlertVisible = true"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isAlertVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VAlert
|
||||
v-model="isAlertVisible"
|
||||
closable
|
||||
close-label="Close Alert"
|
||||
color="primary"
|
||||
>
|
||||
Pudding wafer I love chocolate bar wafer chupa chups wafer. Cake gummies pudding gummies cake.
|
||||
</VAlert>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="text-center">
|
||||
<VBtn
|
||||
v-if="!isAlertVisible"
|
||||
@click="isAlertVisible = true"
|
||||
>
|
||||
Reset
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const coloredBorder = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="primary"
|
||||
>
|
||||
Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="secondary"
|
||||
>
|
||||
Cookie brownie tootsie roll pudding biscuit chupa chups. Dragée gingerbread carrot.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="success"
|
||||
>
|
||||
Gingerbread jelly beans macaroon croissant soufflé. Muffin halvah cake brownie cake.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="info"
|
||||
>
|
||||
Muffin I love wafer pudding caramels jelly beans fruitcake I love cotton candy.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="warning"
|
||||
>
|
||||
Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="error"
|
||||
>
|
||||
Lemon drops tootsie roll liquorice marzipan lollipop I love tiramisu tootsie roll.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="primary"
|
||||
>
|
||||
Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="secondary"
|
||||
>
|
||||
Cookie brownie tootsie roll pudding biscuit chupa chups. Dragée gingerbread carrot.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="success"
|
||||
>
|
||||
Gingerbread jelly beans macaroon croissant soufflé. Muffin halvah cake brownie cake.
|
||||
</VAlert>
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="info"
|
||||
>
|
||||
Muffin I love wafer pudding caramels jelly beans fruitcake I love cotton candy.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="warning"
|
||||
>
|
||||
Cake sweet roll sesame snaps cheesecake halvah apple pie gingerbread cake.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
border="start"
|
||||
border-color="error"
|
||||
>
|
||||
Lemon drops tootsie roll liquorice marzipan lollipop I love tiramisu tootsie roll.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const colors = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert color="primary">
|
||||
I'm an alert with primary background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="secondary">
|
||||
I'm an alert with secondary background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="success">
|
||||
I'm an alert with success background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="info">
|
||||
I'm an alert with info background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="warning">
|
||||
I'm an alert with warning background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="error">
|
||||
I'm an alert with error background color.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert color="primary">
|
||||
I'm an alert with primary background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="secondary">
|
||||
I'm an alert with secondary background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="success">
|
||||
I'm an alert with success background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="info">
|
||||
I'm an alert with info background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="warning">
|
||||
I'm an alert with warning background color.
|
||||
</VAlert>
|
||||
|
||||
<VAlert color="error">
|
||||
I'm an alert with error background color.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
density="compact"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a compact alert with a <strong>color</strong> of primary.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
density="comfortable"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a comfortable alert with the <strong>variant</strong> prop and a <strong>color</strong> of secondary.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
density="default"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a default alert with the <strong>color</strong> of success.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
density="compact"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a compact alert with a <strong>color</strong> of primary.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
density="comfortable"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a comfortable alert with the <strong>variant</strong> prop and a <strong>color</strong> of secondary.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
density="default"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
I'm a default alert with the <strong>color</strong> of success.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const elevation = { ts: `<script lang="ts" setup>
|
||||
const alertShadow = ref(5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSlider
|
||||
v-model="alertShadow"
|
||||
color="primary"
|
||||
:max="24"
|
||||
:min="0"
|
||||
:step="1"
|
||||
thumb-label
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<VAlert
|
||||
color="primary"
|
||||
:elevation="alertShadow"
|
||||
>
|
||||
I'm an alert with box shadow.
|
||||
</VAlert>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const alertShadow = ref(5)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VSlider
|
||||
v-model="alertShadow"
|
||||
color="primary"
|
||||
:max="24"
|
||||
:min="0"
|
||||
:step="1"
|
||||
thumb-label
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<VAlert
|
||||
color="primary"
|
||||
:elevation="alertShadow"
|
||||
>
|
||||
I'm an alert with box shadow.
|
||||
</VAlert>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const icons = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
color="primary"
|
||||
icon="ri-rocket-line"
|
||||
>
|
||||
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="error"
|
||||
icon="ri-whatsapp-line"
|
||||
variant="tonal"
|
||||
>
|
||||
Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="success"
|
||||
icon="ri-npmjs-line"
|
||||
variant="outlined"
|
||||
>
|
||||
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
color="primary"
|
||||
icon="ri-rocket-line"
|
||||
>
|
||||
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="error"
|
||||
icon="ri-whatsapp-line"
|
||||
variant="tonal"
|
||||
>
|
||||
Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="success"
|
||||
icon="ri-npmjs-line"
|
||||
variant="outlined"
|
||||
>
|
||||
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const outlined = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
Praesent venenatis metus at tortor pulvinar varius. Aenean commodo ligula eget dolor. Praesent ac massa at ligula laoreet iaculis.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="success"
|
||||
>
|
||||
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="info"
|
||||
>
|
||||
Marshmallow jelly beans toffee. Sweet roll lemon drops muffin biscuit. Gummies jujubes halvah dessert cream croissant.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
>
|
||||
Tootsie roll candy canes wafer icing sweet jelly macaroon. Caramels icing fruitcake chocolate cake cake donut.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Jelly beans dragée jelly. Cotton candy danish chocolate cake. Carrot cake pastry jelly beans gummi bears.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
Praesent venenatis metus at tortor pulvinar varius. Aenean commodo ligula eget dolor. Praesent ac massa at ligula laoreet iaculis.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="success"
|
||||
>
|
||||
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="info"
|
||||
>
|
||||
Marshmallow jelly beans toffee. Sweet roll lemon drops muffin biscuit. Gummies jujubes halvah dessert cream croissant.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
>
|
||||
Tootsie roll candy canes wafer icing sweet jelly macaroon. Caramels icing fruitcake chocolate cake cake donut.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Jelly beans dragée jelly. Cotton candy danish chocolate cake. Carrot cake pastry jelly beans gummi bears.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const prominent = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
prominent
|
||||
type="info"
|
||||
>
|
||||
<template #text>
|
||||
Macaroon I love tiramisu I love wafer apple pie jelly beans shortbread.
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="success"
|
||||
icon="ri-school-line"
|
||||
prominent
|
||||
>
|
||||
Cotton candy tart tiramisu lollipop gummi bears oat cake cupcake macaroon.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
icon="ri-shield-keyhole-line"
|
||||
prominent
|
||||
type="warning"
|
||||
>
|
||||
Ice cream candy I love wafer bonbon gingerbread candy canes tiramisu.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
prominent
|
||||
type="info"
|
||||
>
|
||||
<template #text>
|
||||
Macaroon I love tiramisu I love wafer apple pie jelly beans shortbread.
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
color="success"
|
||||
icon="ri-school-line"
|
||||
prominent
|
||||
>
|
||||
Cotton candy tart tiramisu lollipop gummi bears oat cake cupcake macaroon.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
icon="ri-shield-keyhole-line"
|
||||
prominent
|
||||
type="warning"
|
||||
>
|
||||
Ice cream candy I love wafer bonbon gingerbread candy canes tiramisu.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const tonal = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
>
|
||||
Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="secondary"
|
||||
>
|
||||
Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="success"
|
||||
>
|
||||
Vestibulum ullamcorper mauris at ligula. Nulla porta dolor.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="info"
|
||||
>
|
||||
Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus tempus. Mauris turpis nunc.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="warning"
|
||||
>
|
||||
Marzipan topping croissant cake sweet roll ice cream soufflé chocolate. Jelly beans chupa chups tootsie roll biscuit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Marzipan topping croissant cake sweet roll ice cream soufflé chocolate. Jelly beans chupa chups tootsie roll biscuit.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
>
|
||||
Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="secondary"
|
||||
>
|
||||
Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="success"
|
||||
>
|
||||
Vestibulum ullamcorper mauris at ligula. Nulla porta dolor.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="info"
|
||||
>
|
||||
Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus tempus. Mauris turpis nunc.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="warning"
|
||||
>
|
||||
Marzipan topping croissant cake sweet roll ice cream soufflé chocolate. Jelly beans chupa chups tootsie roll biscuit.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Marzipan topping croissant cake sweet roll ice cream soufflé chocolate. Jelly beans chupa chups tootsie roll biscuit.
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const type = { ts: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert type="info">
|
||||
I'm a alert with a <strong>type</strong> of info
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="success">
|
||||
I'm a alert with a <strong>type</strong> of success
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="warning">
|
||||
I'm a alert with a <strong>type</strong> of warning
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="error">
|
||||
I'm a alert with a <strong>type</strong> of error
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-y">
|
||||
<VAlert type="info">
|
||||
I'm a alert with a <strong>type</strong> of info
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="success">
|
||||
I'm a alert with a <strong>type</strong> of success
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="warning">
|
||||
I'm a alert with a <strong>type</strong> of warning
|
||||
</VAlert>
|
||||
|
||||
<VAlert type="error">
|
||||
I'm a alert with a <strong>type</strong> of error
|
||||
</VAlert>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const vModelSupport = { ts: `<script lang="ts" setup>
|
||||
const isAlertVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="alert-demo-v-model-wrapper">
|
||||
<VAlert
|
||||
v-model="isAlertVisible"
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
|
||||
</VAlert>
|
||||
</div>
|
||||
|
||||
<!-- button -->
|
||||
<VBtn @click="isAlertVisible = !isAlertVisible">
|
||||
{{ isAlertVisible ? "Hide Alert" : "Show Alert" }}
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.alert-demo-v-model-wrapper {
|
||||
margin-block-end: 1rem;
|
||||
min-block-size: 80px;
|
||||
}
|
||||
</style>
|
||||
`, js: `<script setup>
|
||||
const isAlertVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="alert-demo-v-model-wrapper">
|
||||
<VAlert
|
||||
v-model="isAlertVisible"
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
|
||||
</VAlert>
|
||||
</div>
|
||||
|
||||
<!-- button -->
|
||||
<VBtn @click="isAlertVisible = !isAlertVisible">
|
||||
{{ isAlertVisible ? "Hide Alert" : "Show Alert" }}
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.alert-demo-v-model-wrapper {
|
||||
margin-block-end: 1rem;
|
||||
min-block-size: 80px;
|
||||
}
|
||||
</style>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar color="primary">
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="secondary">
|
||||
SE
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="success">
|
||||
SU
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="info">
|
||||
IN
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="warning">
|
||||
WA
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="error">
|
||||
ER
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,91 @@
|
||||
<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'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="v-avatar-group demo-avatar-group">
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar1" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
John Doe
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar2" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Jennie Obrien
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar3" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Peter Harper
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar4" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Vivian Padilla
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar5" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Scott Wells
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar6" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Angel Bishop
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="45"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.demo-avatar-group{
|
||||
&.v-avatar-group {
|
||||
.v-avatar{
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
icon="ri-home-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
icon="ri-cloud-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="success"
|
||||
icon="ri-bell-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="info"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="warning"
|
||||
icon="ri-alert-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
icon="ri-message-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<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'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar :image="avatar1" />
|
||||
|
||||
<VAvatar :image="avatar2" />
|
||||
|
||||
<VAvatar :image="avatar3" />
|
||||
|
||||
<VAvatar :image="avatar4" />
|
||||
|
||||
<VAvatar :image="avatar5" />
|
||||
|
||||
<VAvatar :image="avatar6" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
rounded="0"
|
||||
color="primary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="sm"
|
||||
color="secondary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded
|
||||
color="success"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
color="info"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="xl"
|
||||
color="warning"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<small>PI</small>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
size="small"
|
||||
>
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="success">
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="info"
|
||||
size="large"
|
||||
>
|
||||
<span class="text-lg">PI</span>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
size="x-large"
|
||||
>
|
||||
<span class="text-lg">PI</span>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
SE
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
SU
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
IN
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
WA
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="error"
|
||||
variant="tonal"
|
||||
>
|
||||
ER
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
592
resources/js/views/demos/components/avatar/demoCodeAvatar.js
Normal file
592
resources/js/views/demos/components/avatar/demoCodeAvatar.js
Normal file
@@ -0,0 +1,592 @@
|
||||
export const colors = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar color="primary">
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="secondary">
|
||||
SE
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="success">
|
||||
SU
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="info">
|
||||
IN
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="warning">
|
||||
WA
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="error">
|
||||
ER
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar color="primary">
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="secondary">
|
||||
SE
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="success">
|
||||
SU
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="info">
|
||||
IN
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="warning">
|
||||
WA
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="error">
|
||||
ER
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const group = { 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'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="v-avatar-group demo-avatar-group">
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar1" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
John Doe
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar2" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Jennie Obrien
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar3" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Peter Harper
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar4" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Vivian Padilla
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar5" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Scott Wells
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar6" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Angel Bishop
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="45"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.demo-avatar-group{
|
||||
&.v-avatar-group {
|
||||
.v-avatar{
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`, 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'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="v-avatar-group demo-avatar-group">
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar1" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
John Doe
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar2" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Jennie Obrien
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar3" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Peter Harper
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar4" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Vivian Padilla
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar5" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Scott Wells
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar :size="45">
|
||||
<VImg :src="avatar6" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
location="top"
|
||||
>
|
||||
Angel Bishop
|
||||
</VTooltip>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
||||
:size="45"
|
||||
>
|
||||
+3
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.demo-avatar-group{
|
||||
&.v-avatar-group {
|
||||
.v-avatar{
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
` }
|
||||
|
||||
export const icons = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
icon="ri-home-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
icon="ri-cloud-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="success"
|
||||
icon="ri-bell-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="info"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="warning"
|
||||
icon="ri-alert-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
icon="ri-message-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
icon="ri-home-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
icon="ri-cloud-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="success"
|
||||
icon="ri-bell-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="info"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="warning"
|
||||
icon="ri-alert-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
icon="ri-message-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const images = { 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'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar :image="avatar1" />
|
||||
|
||||
<VAvatar :image="avatar2" />
|
||||
|
||||
<VAvatar :image="avatar3" />
|
||||
|
||||
<VAvatar :image="avatar4" />
|
||||
|
||||
<VAvatar :image="avatar5" />
|
||||
|
||||
<VAvatar :image="avatar6" />
|
||||
</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'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar :image="avatar1" />
|
||||
|
||||
<VAvatar :image="avatar2" />
|
||||
|
||||
<VAvatar :image="avatar3" />
|
||||
|
||||
<VAvatar :image="avatar4" />
|
||||
|
||||
<VAvatar :image="avatar5" />
|
||||
|
||||
<VAvatar :image="avatar6" />
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const rounded = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
rounded="0"
|
||||
color="primary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="sm"
|
||||
color="secondary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded
|
||||
color="success"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
color="info"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="xl"
|
||||
color="warning"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
rounded="0"
|
||||
color="primary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="sm"
|
||||
color="secondary"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded
|
||||
color="success"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
color="info"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
rounded="xl"
|
||||
color="warning"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const sizes = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<small>PI</small>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
size="small"
|
||||
>
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="success">
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="info"
|
||||
size="large"
|
||||
>
|
||||
<span class="text-lg">PI</span>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
size="x-large"
|
||||
>
|
||||
<span class="text-lg">PI</span>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<small>PI</small>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
size="small"
|
||||
>
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar color="success">
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="info"
|
||||
size="large"
|
||||
>
|
||||
<span class="text-lg">PI</span>
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="error"
|
||||
size="x-large"
|
||||
>
|
||||
<span class="text-lg">PI</span>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const tonal = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
SE
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
SU
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
IN
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
WA
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="error"
|
||||
variant="tonal"
|
||||
>
|
||||
ER
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VAvatar
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
PI
|
||||
</VAvatar>
|
||||
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
SE
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
SU
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
IN
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
WA
|
||||
</VAvatar>
|
||||
<VAvatar
|
||||
color="error"
|
||||
variant="tonal"
|
||||
>
|
||||
ER
|
||||
</VAvatar>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="success"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="warning"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="error"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
63
resources/js/views/demos/components/badge/DemoBadgeColor.vue
Normal file
63
resources/js/views/demos/components/badge/DemoBadgeColor.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
color="primary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="success"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="info"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="warning"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="error"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const notifications = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center">
|
||||
<VBadge
|
||||
:content="notifications"
|
||||
:model-value="!!notifications"
|
||||
color="success"
|
||||
class="me-5"
|
||||
>
|
||||
<VIcon
|
||||
size="40"
|
||||
icon="ri-vuejs-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="notifications = (notifications || 0) + 1">
|
||||
Send Message
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="notifications = 0"
|
||||
>
|
||||
Clear Notifications
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
25
resources/js/views/demos/components/badge/DemoBadgeIcon.vue
Normal file
25
resources/js/views/demos/components/badge/DemoBadgeIcon.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- avatar -->
|
||||
<VBadge>
|
||||
<template #badge>
|
||||
<VIcon icon="ri-error-warning-line" />
|
||||
</template>
|
||||
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge icon="ri-lock-unlock-line">
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="99"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="100"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1000"
|
||||
max="999"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- 👉 Top End -->
|
||||
<VBadge
|
||||
content="1"
|
||||
location="end top"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom Start -->
|
||||
<VBadge
|
||||
location="bottom start"
|
||||
content="2"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom End -->
|
||||
<VBadge
|
||||
location="bottom end"
|
||||
content="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 top Start -->
|
||||
<VBadge
|
||||
location="top start"
|
||||
content="4"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
const tRefInstagramBadge = ref()
|
||||
const tRefTwitterBadge = ref()
|
||||
const tRefWhatsappBadge = ref()
|
||||
const showTwitterBadgeOnHover = useElementHover(tRefTwitterBadge)
|
||||
const showInstagramBadgeOnHover = useElementHover(tRefInstagramBadge)
|
||||
const showWhatsappBadgeOnHover = useElementHover(tRefWhatsappBadge)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="3"
|
||||
transition="slide-x-transition"
|
||||
:model-value="showTwitterBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefTwitterBadge"
|
||||
size="25"
|
||||
icon="ri-twitter-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="5"
|
||||
transition="scale-transition"
|
||||
:model-value="showInstagramBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefInstagramBadge"
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1"
|
||||
transition="slide-x-transition"
|
||||
:model-value="showWhatsappBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefWhatsappBadge"
|
||||
size="25"
|
||||
icon="ri-whatsapp-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
56
resources/js/views/demos/components/badge/DemoBadgeStyle.vue
Normal file
56
resources/js/views/demos/components/badge/DemoBadgeStyle.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x d-flex align-center flex-wrap">
|
||||
<!-- default -->
|
||||
<VBadge content="1">
|
||||
<VBtn variant="tonal">
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- bordered -->
|
||||
<VBadge
|
||||
content="5"
|
||||
bordered
|
||||
>
|
||||
<VBtn variant="tonal">
|
||||
Border
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- dot -->
|
||||
<VBadge
|
||||
dot
|
||||
location="bottom end"
|
||||
offset-x="3"
|
||||
offset-y="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- inline -->
|
||||
<VBadge
|
||||
inline
|
||||
content="5"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- Rounded -->
|
||||
<VBadge
|
||||
rounded="sm"
|
||||
content="5"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
36
resources/js/views/demos/components/badge/DemoBadgeTabs.vue
Normal file
36
resources/js/views/demos/components/badge/DemoBadgeTabs.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
const tabs = [
|
||||
{
|
||||
badge: '3',
|
||||
content: 'Item One',
|
||||
},
|
||||
{
|
||||
badge: '1',
|
||||
content: 'Item Two',
|
||||
},
|
||||
{
|
||||
badge: '2',
|
||||
content: 'Item Three',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTabs
|
||||
grow
|
||||
height="52"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.content"
|
||||
:value="tab.content"
|
||||
>
|
||||
<VBadge
|
||||
:content="tab.badge"
|
||||
floating
|
||||
>
|
||||
{{ tab.content }}
|
||||
</VBadge>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</template>
|
||||
41
resources/js/views/demos/components/badge/DemoBadgeTonal.vue
Normal file
41
resources/js/views/demos/components/badge/DemoBadgeTonal.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="5"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- default -->
|
||||
<VBadge
|
||||
content="1"
|
||||
class="v-badge--tonal"
|
||||
color="error"
|
||||
>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge
|
||||
icon="ri-lock-unlock-line"
|
||||
color="info"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
889
resources/js/views/demos/components/badge/demoCodeBadge.js
Normal file
889
resources/js/views/demos/components/badge/demoCodeBadge.js
Normal file
@@ -0,0 +1,889 @@
|
||||
export const avatarStatus = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="success"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="warning"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="error"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="success"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="warning"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
bordered
|
||||
color="error"
|
||||
location="bottom end"
|
||||
:offset-x="5"
|
||||
:offset-y="1"
|
||||
>
|
||||
<VAvatar size="large">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const color = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
color="primary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="success"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="info"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="warning"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="error"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
dot
|
||||
color="primary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="success"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="info"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="warning"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
dot
|
||||
color="error"
|
||||
>
|
||||
<VIcon
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const dynamicNotifications = { ts: `<script lang="ts" setup>
|
||||
const notifications = ref<number>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center">
|
||||
<VBadge
|
||||
:content="notifications"
|
||||
:model-value="!!notifications"
|
||||
color="success"
|
||||
class="me-5"
|
||||
>
|
||||
<VIcon
|
||||
size="40"
|
||||
icon="ri-vuejs-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="notifications = (notifications || 0) + 1">
|
||||
Send Message
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="notifications = 0"
|
||||
>
|
||||
Clear Notifications
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const notifications = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center">
|
||||
<VBadge
|
||||
:content="notifications"
|
||||
:model-value="!!notifications"
|
||||
color="success"
|
||||
class="me-5"
|
||||
>
|
||||
<VIcon
|
||||
size="40"
|
||||
icon="ri-vuejs-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<div class="demo-space-x">
|
||||
<VBtn @click="notifications = (notifications || 0) + 1">
|
||||
Send Message
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="notifications = 0"
|
||||
>
|
||||
Clear Notifications
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const icon = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- avatar -->
|
||||
<VBadge>
|
||||
<template #badge>
|
||||
<VIcon icon="ri-error-warning-line" />
|
||||
</template>
|
||||
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge icon="ri-lock-unlock-line">
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- avatar -->
|
||||
<VBadge>
|
||||
<template #badge>
|
||||
<VIcon icon="ri-error-warning-line" />
|
||||
</template>
|
||||
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge icon="ri-lock-unlock-line">
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const maximumValue = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="99"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="100"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1000"
|
||||
max="999"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="99"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="100"
|
||||
max="99"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1000"
|
||||
max="999"
|
||||
offset-x="5"
|
||||
offset-y="-1"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const position = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- 👉 Top End -->
|
||||
<VBadge
|
||||
content="1"
|
||||
location="end top"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom Start -->
|
||||
<VBadge
|
||||
location="bottom start"
|
||||
content="2"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom End -->
|
||||
<VBadge
|
||||
location="bottom end"
|
||||
content="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 top Start -->
|
||||
<VBadge
|
||||
location="top start"
|
||||
content="4"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<!-- 👉 Top End -->
|
||||
<VBadge
|
||||
content="1"
|
||||
location="end top"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom Start -->
|
||||
<VBadge
|
||||
location="bottom start"
|
||||
content="2"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 Bottom End -->
|
||||
<VBadge
|
||||
location="bottom end"
|
||||
content="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- 👉 top Start -->
|
||||
<VBadge
|
||||
location="top start"
|
||||
content="4"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const showOnHover = { ts: `<script lang="ts" setup>
|
||||
const tRefInstagramBadge = ref()
|
||||
const tRefTwitterBadge = ref()
|
||||
const tRefWhatsappBadge = ref()
|
||||
|
||||
const showTwitterBadgeOnHover = useElementHover(tRefTwitterBadge)
|
||||
const showInstagramBadgeOnHover = useElementHover(tRefInstagramBadge)
|
||||
const showWhatsappBadgeOnHover = useElementHover(tRefWhatsappBadge)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="3"
|
||||
transition="slide-x-transition"
|
||||
:model-value="showTwitterBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefTwitterBadge"
|
||||
size="25"
|
||||
icon="ri-twitter-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="5"
|
||||
transition="scale-transition"
|
||||
:model-value="showInstagramBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefInstagramBadge"
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1"
|
||||
transition="slide-x-transition"
|
||||
:model-value="showWhatsappBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefWhatsappBadge"
|
||||
size="25"
|
||||
icon="ri-whatsapp-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const tRefInstagramBadge = ref()
|
||||
const tRefTwitterBadge = ref()
|
||||
const tRefWhatsappBadge = ref()
|
||||
const showTwitterBadgeOnHover = useElementHover(tRefTwitterBadge)
|
||||
const showInstagramBadgeOnHover = useElementHover(tRefInstagramBadge)
|
||||
const showWhatsappBadgeOnHover = useElementHover(tRefWhatsappBadge)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="3"
|
||||
transition="slide-x-transition"
|
||||
:model-value="showTwitterBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefTwitterBadge"
|
||||
size="25"
|
||||
icon="ri-twitter-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="5"
|
||||
transition="scale-transition"
|
||||
:model-value="showInstagramBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefInstagramBadge"
|
||||
size="25"
|
||||
icon="ri-instagram-line"
|
||||
/>
|
||||
</VBadge>
|
||||
|
||||
<VBadge
|
||||
content="1"
|
||||
transition="slide-x-transition"
|
||||
:model-value="showWhatsappBadgeOnHover"
|
||||
>
|
||||
<VIcon
|
||||
ref="tRefWhatsappBadge"
|
||||
size="25"
|
||||
icon="ri-whatsapp-line"
|
||||
/>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const style = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x d-flex align-center flex-wrap">
|
||||
<!-- default -->
|
||||
<VBadge content="1">
|
||||
<VBtn variant="tonal">
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- bordered -->
|
||||
<VBadge
|
||||
content="5"
|
||||
bordered
|
||||
>
|
||||
<VBtn variant="tonal">
|
||||
Border
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- dot -->
|
||||
<VBadge
|
||||
dot
|
||||
location="bottom end"
|
||||
offset-x="3"
|
||||
offset-y="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- inline -->
|
||||
<VBadge
|
||||
inline
|
||||
content="5"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- Rounded -->
|
||||
<VBadge
|
||||
rounded="sm"
|
||||
content="5"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x d-flex align-center flex-wrap">
|
||||
<!-- default -->
|
||||
<VBadge content="1">
|
||||
<VBtn variant="tonal">
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- bordered -->
|
||||
<VBadge
|
||||
content="5"
|
||||
bordered
|
||||
>
|
||||
<VBtn variant="tonal">
|
||||
Border
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- dot -->
|
||||
<VBadge
|
||||
dot
|
||||
location="bottom end"
|
||||
offset-x="3"
|
||||
offset-y="3"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- inline -->
|
||||
<VBadge
|
||||
inline
|
||||
content="5"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- Rounded -->
|
||||
<VBadge
|
||||
rounded="sm"
|
||||
content="5"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const tabs = { ts: `<script setup lang="ts">
|
||||
const tabs = [
|
||||
{
|
||||
badge: '3',
|
||||
content: 'Item One',
|
||||
},
|
||||
{
|
||||
badge: '1',
|
||||
content: 'Item Two',
|
||||
},
|
||||
{
|
||||
badge: '2',
|
||||
content: 'Item Three',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTabs
|
||||
grow
|
||||
height="52"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.content"
|
||||
:value="tab.content"
|
||||
>
|
||||
<VBadge
|
||||
:content="tab.badge"
|
||||
floating
|
||||
>
|
||||
{{ tab.content }}
|
||||
</VBadge>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const tabs = [
|
||||
{
|
||||
badge: '3',
|
||||
content: 'Item One',
|
||||
},
|
||||
{
|
||||
badge: '1',
|
||||
content: 'Item Two',
|
||||
},
|
||||
{
|
||||
badge: '2',
|
||||
content: 'Item Three',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VTabs
|
||||
grow
|
||||
height="52"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.content"
|
||||
:value="tab.content"
|
||||
>
|
||||
<VBadge
|
||||
:content="tab.badge"
|
||||
floating
|
||||
>
|
||||
{{ tab.content }}
|
||||
</VBadge>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const tonal = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="5"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- default -->
|
||||
<VBadge
|
||||
content="1"
|
||||
class="v-badge--tonal"
|
||||
color="error"
|
||||
>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge
|
||||
icon="ri-lock-unlock-line"
|
||||
color="info"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBadge
|
||||
content="5"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar size="48">
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
|
||||
<!-- default -->
|
||||
<VBadge
|
||||
content="1"
|
||||
class="v-badge--tonal"
|
||||
color="error"
|
||||
>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
color="error"
|
||||
>
|
||||
Default
|
||||
</VBtn>
|
||||
</VBadge>
|
||||
|
||||
<!-- icon -->
|
||||
<VBadge
|
||||
icon="ri-lock-unlock-line"
|
||||
color="info"
|
||||
class="v-badge--tonal"
|
||||
>
|
||||
<VAvatar>
|
||||
<VImg :src="avatar1" />
|
||||
</VAvatar>
|
||||
</VBadge>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VBtn block>
|
||||
Block Button
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
block
|
||||
>
|
||||
Block Button
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn color="primary">
|
||||
Primary
|
||||
</VBtn>
|
||||
<VBtn color="secondary">
|
||||
Secondary
|
||||
</VBtn>
|
||||
<VBtn color="success">
|
||||
Success
|
||||
</VBtn>
|
||||
<VBtn color="info">
|
||||
Info
|
||||
</VBtn>
|
||||
<VBtn color="warning">
|
||||
Warning
|
||||
</VBtn>
|
||||
<VBtn color="error">
|
||||
Error
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="flat">
|
||||
Primary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="flat"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="flat"
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="flat"
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="flat"
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="flat"
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup>
|
||||
const toggleExclusive = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtnToggle
|
||||
v-model="toggleExclusive"
|
||||
density="compact"
|
||||
>
|
||||
<VBtn icon="ri-align-left" />
|
||||
<VBtn icon="ri-align-center" />
|
||||
<VBtn icon="ri-align-right" />
|
||||
<VBtn icon="ri-align-justify" />
|
||||
</VBtnToggle>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn>
|
||||
Accept
|
||||
<VIcon
|
||||
end
|
||||
icon="ri-checkbox-circle-line"
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="secondary">
|
||||
<VIcon
|
||||
start
|
||||
icon="ri-subtract-line"
|
||||
/>Cancel
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="success">
|
||||
Upload
|
||||
<VIcon
|
||||
end
|
||||
icon="ri-upload-cloud-line"
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="info">
|
||||
<VIcon
|
||||
start
|
||||
icon="ri-arrow-left-line"
|
||||
/>
|
||||
Back
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="warning">
|
||||
<VIcon icon="ri-hammer-line" />
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="error">
|
||||
<VIcon icon="ri-prohibited-line" />
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn
|
||||
icon="ri-suitcase-line"
|
||||
variant="text"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
icon="ri-user-add-line"
|
||||
color="secondary"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
icon="ri-search-line"
|
||||
variant="text"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
icon="ri-thumb-up-line"
|
||||
variant="text"
|
||||
color="info"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
icon="ri-star-line"
|
||||
variant="text"
|
||||
color="warning"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
icon="ri-heart-line"
|
||||
variant="text"
|
||||
color="error"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn href="https://themeselection.com/">
|
||||
String Literal
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
href="https://themeselection.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Open New Tab
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
const loadings = ref([])
|
||||
|
||||
const load = i => {
|
||||
loadings.value[i] = true
|
||||
setTimeout(() => {
|
||||
loadings.value[i] = false
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn
|
||||
:loading="loadings[0]"
|
||||
:disabled="loadings[0]"
|
||||
color="primary"
|
||||
@click="load(0)"
|
||||
>
|
||||
Accept Terms
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
:loading="loadings[1]"
|
||||
:disabled="loadings[1]"
|
||||
color="secondary"
|
||||
@click="load(1)"
|
||||
>
|
||||
Upload
|
||||
<VIcon
|
||||
end
|
||||
icon="ri-upload-cloud-line"
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
:loading="loadings[2]"
|
||||
:disabled="loadings[2]"
|
||||
color="success"
|
||||
@click="load(2)"
|
||||
>
|
||||
Loader slot
|
||||
<template #loader>
|
||||
<span>Loading...</span>
|
||||
</template>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
:loading="loadings[3]"
|
||||
:disabled="loadings[3]"
|
||||
color="info"
|
||||
@click="load(3)"
|
||||
>
|
||||
Icon Loader
|
||||
<template #loader>
|
||||
<span class="custom-loader">
|
||||
<VIcon icon="ri-refresh-line" />
|
||||
</span>
|
||||
</template>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
:loading="loadings[4]"
|
||||
:disabled="loadings[4]"
|
||||
color="warning"
|
||||
icon="ri-upload-cloud-line"
|
||||
@click="load(4)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-loader {
|
||||
display: flex;
|
||||
animation: loader 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="outlined">
|
||||
Primary
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="plain">
|
||||
Primary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="plain"
|
||||
>
|
||||
Secondary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
variant="plain"
|
||||
>
|
||||
Success
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="info"
|
||||
variant="plain"
|
||||
>
|
||||
Info
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="warning"
|
||||
variant="plain"
|
||||
>
|
||||
Warning
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="plain"
|
||||
>
|
||||
Error
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn>
|
||||
Normal Button
|
||||
</VBtn>
|
||||
<VBtn
|
||||
rounded="lg"
|
||||
color="secondary"
|
||||
>
|
||||
Rounded Button
|
||||
</VBtn>
|
||||
<VBtn
|
||||
:rounded="0"
|
||||
color="success"
|
||||
>
|
||||
Tile Button
|
||||
</VBtn>
|
||||
<VBtn
|
||||
rounded="pill"
|
||||
color="info"
|
||||
>
|
||||
Pill Button
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn to="/components/alert">
|
||||
String Literal
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="warning"
|
||||
:to="{ path: '/components/alert' }"
|
||||
>
|
||||
Object Path
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
:to="{ name: 'components-alert' }"
|
||||
>
|
||||
Named Router
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
:to="{ path: '/components/alert', query: { plan: 'private' } }"
|
||||
>
|
||||
With Query
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn size="x-large">
|
||||
Extra large Button
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
size="large"
|
||||
>
|
||||
Large Button
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="info">
|
||||
Normal Button
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
size="small"
|
||||
color="warning"
|
||||
>
|
||||
Small Button
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
size="x-small"
|
||||
color="error"
|
||||
>
|
||||
Extra small Button
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="text">
|
||||
Primary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VBtn variant="tonal">
|
||||
Primary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
Secondary
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
variant="tonal"
|
||||
>
|
||||
Success
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
Info
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
>
|
||||
Warning
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="tonal"
|
||||
>
|
||||
Error
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
1096
resources/js/views/demos/components/button/demoCodeButton.js
Normal file
1096
resources/js/views/demos/components/button/demoCodeButton.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
width="500"
|
||||
>
|
||||
<!-- Activator -->
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Click Me
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- Dialog Content -->
|
||||
<VCard title="Privacy Policy">
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogVisible = false"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
Bear claw pastry cotton candy jelly toffee. Pudding chocolate cake shortbread bonbon biscuit sweet. Lemon drops cupcake muffin brownie fruitcake. Pastry pastry tootsie roll jujubes chocolate cake gummi bears muffin pudding caramels. Jujubes lollipop gummies croissant shortbread. Cupcake dessert marzipan topping gingerbread apple pie chupa chups powder. Cake croissant halvah candy canes gummies.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn @click="isDialogVisible = false">
|
||||
I accept
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
125
resources/js/views/demos/components/dialog/DemoDialogForm.vue
Normal file
125
resources/js/views/demos/components/dialog/DemoDialogForm.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
const firstName = ref('')
|
||||
const middleName = ref('')
|
||||
const lastName = ref('')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const age = ref()
|
||||
const interest = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
max-width="600"
|
||||
>
|
||||
<!-- Dialog Activator -->
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Open Dialog
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- Dialog Content -->
|
||||
<VCard title="User Profile">
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogVisible = false"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
v-model="middleName"
|
||||
label="Middle Name"
|
||||
placeholder="peter"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
v-model="lastName"
|
||||
label="Last Name"
|
||||
persistent-hint
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
autocomplete="on"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="age"
|
||||
label="Age"
|
||||
type="number"
|
||||
placeholder="18"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="interest"
|
||||
label="Interests"
|
||||
placeholder="Sports, Music, Movies"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="success"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
fullscreen
|
||||
:scrim="false"
|
||||
transition="dialog-bottom-transition"
|
||||
>
|
||||
<!-- Dialog Activator -->
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Open Dialog
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- Dialog Content -->
|
||||
<VCard>
|
||||
<!-- Toolbar -->
|
||||
<div>
|
||||
<VToolbar color="primary">
|
||||
<VBtn
|
||||
icon
|
||||
variant="plain"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
<VIcon
|
||||
color="white"
|
||||
icon="ri-close-line"
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VToolbarTitle>Settings</VToolbarTitle>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<VToolbarItems>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
</VToolbarItems>
|
||||
</VToolbar>
|
||||
</div>
|
||||
|
||||
<!-- List -->
|
||||
<VList lines="two">
|
||||
<VListSubheader>User Controls</VListSubheader>
|
||||
<VListItem
|
||||
title="Content filtering"
|
||||
subtitle="Set the content filtering level to restrict apps that can be downloaded"
|
||||
/>
|
||||
<VListItem
|
||||
title="Password"
|
||||
subtitle="Require password for purchase or use password to restrict purchase"
|
||||
/>
|
||||
</VList>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- List -->
|
||||
<VList
|
||||
lines="two"
|
||||
select-strategy="classic"
|
||||
>
|
||||
<VListSubheader>General</VListSubheader>
|
||||
|
||||
<VListItem
|
||||
title="Notifications"
|
||||
subtitle="Notify me about updates to apps or games that I downloaded"
|
||||
value="Notifications"
|
||||
>
|
||||
<template #prepend="{ isActive }">
|
||||
<VListItemAction start>
|
||||
<VCheckbox
|
||||
:model-value="isActive"
|
||||
color="primary"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem
|
||||
title="Sound"
|
||||
subtitle="Auto-update apps at any time. Data charges may apply"
|
||||
value="Sound"
|
||||
>
|
||||
<template #prepend="{ isActive }">
|
||||
<VListItemAction start>
|
||||
<VCheckbox
|
||||
:model-value="isActive"
|
||||
color="primary"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VListItem
|
||||
title="Auto-add widgets"
|
||||
subtitle="Automatically add home screen widgets"
|
||||
value="Auto-add widgets"
|
||||
>
|
||||
<template #prepend="{ isActive }">
|
||||
<VListItemAction start>
|
||||
<VCheckbox
|
||||
:model-value="isActive"
|
||||
color="primary"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog-bottom-transition-enter-active,
|
||||
.dialog-bottom-transition-leave-active {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
|
||||
watch(isDialogVisible, value => {
|
||||
if (!value)
|
||||
return
|
||||
setTimeout(() => {
|
||||
isDialogVisible.value = false
|
||||
}, 4000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Dialog Activator -->
|
||||
<VBtn
|
||||
:disabled="isDialogVisible"
|
||||
@click="isDialogVisible = true"
|
||||
>
|
||||
Start loading
|
||||
</VBtn>
|
||||
|
||||
<!-- Dialog -->
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
width="300"
|
||||
>
|
||||
<VCard
|
||||
color="primary"
|
||||
width="300"
|
||||
>
|
||||
<VCardText class="pt-3 text-white">
|
||||
Please stand by
|
||||
<VProgressLinear
|
||||
indeterminate
|
||||
class="mt-4"
|
||||
color="#fff"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
const isDialogTwoShow = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VBtn @click="isDialogVisible = true">
|
||||
Open Dialog
|
||||
</VBtn>
|
||||
|
||||
<!-- Dialog -->
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
class="v-dialog-sm"
|
||||
>
|
||||
<VCard title="Dialog">
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogVisible = false"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
Biscuit fruitcake marshmallow jelly beans jujubes halvah cupcake topping. Chocolate cookie jelly-o toffee tart oat cake. Tart sugar plum gingerbread halvah muffin sweet. Cake halvah tart soufflé pudding.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
<VBtn @click="isDialogTwoShow = !isDialogTwoShow">
|
||||
Open Dialog 2
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Dialog 2 -->
|
||||
<VDialog
|
||||
v-model="isDialogTwoShow"
|
||||
class="v-dialog-sm"
|
||||
>
|
||||
<VCard title="Dialog 2">
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogTwoShow = false"
|
||||
/>
|
||||
|
||||
<VCardText>I'm a nested dialog.</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn @click="isDialogTwoShow = false">
|
||||
Close
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
class="v-dialog-sm"
|
||||
>
|
||||
<!-- Dialog Activator -->
|
||||
<template #activator="{ props }">
|
||||
<VBtn
|
||||
color="primary"
|
||||
v-bind="props"
|
||||
>
|
||||
Open Dialog
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- Dialog Content -->
|
||||
<VCard title="Use Google's location service?">
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogVisible = false"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
Bear claw pastry cotton candy jelly toffee. Pudding chocolate cake shortbread bonbon biscuit sweet. Lemon drops cupcake muffin brownie fruitcake. Pastry pastry tootsie roll jujubes chocolate cake gummi bears muffin pudding caramels. Jujubes lollipop gummies croissant shortbread. Cupcake dessert marzipan topping gingerbread apple pie chupa chups powder. Cake croissant halvah candy canes gummies. Candy tootsie roll sweet lemon drops tart cotton candy jujubes topping chupa chups. Biscuit icing pastry chocolate bar lollipop. Lemon drops oat cake chocolate cake dessert chocolate. Carrot cake ice cream bonbon tart tootsie roll cupcake dessert gingerbread. Apple pie dessert sweet candy bonbon. Sugar plum gummies powder brownie dessert candy canes candy canes candy.
|
||||
|
||||
Sweet liquorice danish jujubes tart marshmallow cake. Danish chocolate bar icing dessert bonbon. Chocolate liquorice candy donut shortbread bonbon jujubes tart. Marshmallow cupcake marzipan icing pie dragée toffee. Cupcake soufflé pastry oat cake icing sesame snaps oat cake. Lollipop cheesecake cake tiramisu chocolate cake croissant. Donut candy canes sweet roll ice cream toffee gingerbread. Jelly-o biscuit oat cake cheesecake jujubes. Pudding chocolate biscuit gummies sesame snaps. Lemon drops candy canes chupa chups pudding muffin jujubes cupcake danish. Wafer chocolate oat cake sweet chocolate muffin. Pie dragée soufflé oat cake toffee dragée gummi bears. Jelly-o chocolate jelly fruitcake tart muffin icing sweet.
|
||||
|
||||
Gummies pie lollipop carrot cake gingerbread sweet. Marshmallow tiramisu chocolate cake cake marshmallow. Pudding fruitcake shortbread biscuit powder cake. Dragée cookie cheesecake chupa chups toffee wafer. Wafer donut pudding chocolate shortbread cheesecake. Cupcake sweet roll lollipop chupa chups donut croissant carrot cake chocolate cake. Toffee soufflé biscuit gingerbread fruitcake. Jelly beans pudding jelly-o gingerbread apple pie ice cream. Muffin halvah cookie topping muffin sugar plum. Bonbon dessert cake tiramisu marzipan apple pie. Jelly beans caramels icing cake cake tiramisu dessert dessert jelly-o. Halvah ice cream cotton candy chupa chups cheesecake pudding cheesecake cupcake gummies. Croissant cookie candy canes cake chocolate.
|
||||
|
||||
Pie cotton candy caramels sweet cake liquorice. Bear claw oat cake candy danish jelly-o fruitcake muffin sugar plum cupcake. Pudding cake cake lollipop chupa chups topping apple pie jelly oat cake. Pie candy canes tiramisu gummies icing cotton candy fruitcake marshmallow dragée. Pudding caramels muffin cookie cookie cupcake brownie ice cream. Liquorice lemon drops lemon drops cotton candy biscuit jelly-o jujubes topping. Lemon drops sweet dragée dessert sugar plum chocolate topping sugar plum oat cake. Muffin candy canes bonbon cotton candy liquorice gingerbread sesame snaps chocolate bar. Muffin gingerbread sesame snaps cake donut pie gingerbread soufflé croissant. Topping tart shortbread toffee jelly-o gingerbread cheesecake cupcake cake. Pudding powder icing marshmallow bear claw sesame snaps carrot cake. Jelly beans dessert tiramisu shortbread gummi bears gummies cotton candy. Tiramisu liquorice cookie pastry caramels icing tootsie roll.
|
||||
|
||||
Pudding croissant tootsie roll jelly-o jelly beans gummi bears. Shortbread candy canes biscuit candy donut marshmallow candy canes. Fruitcake marshmallow chocolate bar sweet roll tart gummi bears brownie cupcake dragée. Cheesecake gummies sesame snaps soufflé jelly beans halvah bonbon tootsie roll. Sesame snaps marzipan cupcake candy cheesecake lollipop. Donut candy jelly-o liquorice topping gummi bears halvah. Pie sweet sweet jujubes bear claw marshmallow pudding lollipop tiramisu. Tiramisu tootsie roll topping chocolate cake tootsie roll cotton candy brownie. Jelly beans biscuit caramels cake toffee toffee lemon drops dessert. Toffee chupa chups tart bonbon brownie cake shortbread. Gummies marshmallow topping dragée chocolate bar. Chupa chups donut cheesecake cookie fruitcake muffin. Jelly-o cupcake cheesecake chocolate bar cupcake wafer. Liquorice muffin marzipan cotton candy cake lemon drops cake brownie.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Disagree
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="success"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Agree
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
const isDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
persistent
|
||||
class="v-dialog-sm"
|
||||
>
|
||||
<!-- Dialog Activator -->
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Open Dialog
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- Dialog Content -->
|
||||
<VCard title="Use Google's location service?">
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogVisible = false"
|
||||
/>
|
||||
|
||||
<VCardText>
|
||||
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Disagree
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="success"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Agree
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
const countryList = [
|
||||
{
|
||||
label: 'Bahamas, The',
|
||||
value: 'bahamas',
|
||||
},
|
||||
{
|
||||
label: 'Bahrain',
|
||||
value: 'bahrain',
|
||||
},
|
||||
{
|
||||
label: 'Bangladesh',
|
||||
value: 'bangladesh',
|
||||
},
|
||||
{
|
||||
label: 'Barbados',
|
||||
value: 'barbados',
|
||||
},
|
||||
{
|
||||
label: 'Belarus',
|
||||
value: 'belarus',
|
||||
},
|
||||
{
|
||||
label: 'Belgium',
|
||||
value: 'belgium',
|
||||
},
|
||||
{
|
||||
label: 'Belize',
|
||||
value: 'belize',
|
||||
},
|
||||
{
|
||||
label: 'Benin',
|
||||
value: 'benin',
|
||||
},
|
||||
{
|
||||
label: 'Bhutan',
|
||||
value: 'bhutan',
|
||||
},
|
||||
{
|
||||
label: 'Bolivia',
|
||||
value: 'bolivia',
|
||||
},
|
||||
{
|
||||
label: 'Bosnia and Herzegovina',
|
||||
value: 'bosnia',
|
||||
},
|
||||
{
|
||||
label: 'Botswana',
|
||||
value: 'botswana',
|
||||
},
|
||||
{
|
||||
label: 'Brazil',
|
||||
value: 'brazil',
|
||||
},
|
||||
{
|
||||
label: 'Brunei',
|
||||
value: 'brunei',
|
||||
},
|
||||
{
|
||||
label: 'Bulgaria',
|
||||
value: 'bulgaria',
|
||||
},
|
||||
{
|
||||
label: 'Burkina Faso',
|
||||
value: 'burkina',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCountry = ref('')
|
||||
const isDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="isDialogVisible"
|
||||
scrollable
|
||||
max-width="350"
|
||||
>
|
||||
<!-- Dialog Activator -->
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Open Dialog
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- Dialog Content -->
|
||||
<VCard>
|
||||
<DialogCloseBtn
|
||||
variant="text"
|
||||
size="default"
|
||||
@click="isDialogVisible = false"
|
||||
/>
|
||||
|
||||
<VCardItem class="pb-3">
|
||||
<VCardTitle>Select Country</VCardTitle>
|
||||
</VCardItem>
|
||||
|
||||
<VDivider />
|
||||
<VCardText style="block-size: 300px;">
|
||||
<VRadioGroup
|
||||
v-model="selectedCountry"
|
||||
:inline="false"
|
||||
>
|
||||
<VRadio
|
||||
v-for="country in countryList"
|
||||
:key="country.label"
|
||||
:label="country.label"
|
||||
:value="country.value"
|
||||
color="primary"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText class="pt-5 text-end">
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
class="me-4"
|
||||
@click="isDialogVisible = false"
|
||||
>
|
||||
Close
|
||||
</VBtn>
|
||||
<VBtn @click="isDialogVisible = false">
|
||||
Save Changes
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
1227
resources/js/views/demos/components/dialog/demoCodeDialog.js
Normal file
1227
resources/js/views/demos/components/dialog/demoCodeDialog.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<VExpansionPanels variant="accordion">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
Accordion {{ item }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Sweet roll ice cream chocolate bar. Ice cream croissant sugar plum I love cupcake gingerbread liquorice cake. Bonbon tart caramels marshmallow chocolate cake icing icing danish pie.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<VExpansionPanels multiple>
|
||||
<VExpansionPanel
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
Item {{ i }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
const panel = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VExpansionPanels v-model="panel">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
Server Down
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-error-warning-line"
|
||||
color="error"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Gummies biscuit dessert macaroon liquorice carrot cake oat cake jelly beans cake. Candy wafer tiramisu sugar plum sweet. Ice cream topping gummies biscuit soufflé marzipan topping brownie marshmallow. Chocolate cake cookie pudding gummies cotton candy ice cream. Pie liquorice marzipan cake carrot cake macaroon jelly toffee. Lollipop donut gummi bears caramels icing marzipan.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
Sales report generated
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-check-line"
|
||||
color="success"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Bear claw ice cream icing gummies gingerbread cotton candy tootsie roll cupcake macaroon. Halvah brownie soufflé. Pie dragée macaroon. Tart tootsie roll chocolate bar biscuit jujubes lemon drops. Pudding cotton candy tart jelly-o bear claw lollipop. Jelly-o apple pie candy bonbon chupa chups cupcake cotton candy. Sweet roll cotton candy toffee caramels. Jelly-o chocolate cake toffee pastry halvah. Muffin tiramisu ice cream danish jelly-o brownie powde
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
High Memory usage
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-alert-line"
|
||||
color="warning"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Jelly beans wafer lemon drops macaroon muffin gummies muffin. Ice cream oat cake chocolate bar sesame snaps. Halvah macaroon caramels gummies. Marshmallow jelly beans danish. Cake chocolate cake tiramisu chocolate bar sugar plum biscuit jelly danish. Pudding gummi bears sesame snaps cake soufflé ice cream chocolate bar. Cotton candy ice cream danish chocolate cake topping ice cream. Brownie muffin gingerbread.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<VExpansionPanels
|
||||
variant="accordion"
|
||||
class="customized-panels"
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
elevation="0"
|
||||
>
|
||||
<VExpansionPanelTitle
|
||||
collapse-icon="ri-subtract-line"
|
||||
expand-icon="ri-add-line"
|
||||
>
|
||||
Accordion {{ item }}
|
||||
</VExpansionPanelTitle>
|
||||
|
||||
<VExpansionPanelText>
|
||||
Sweet roll ice cream chocolate bar. Ice cream croissant sugar plum I love cupcake gingerbread liquorice cake. Bonbon tart caramels marshmallow chocolate cake icing icing danish pie.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<VExpansionPanels variant="inset">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Inset {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Chocolate bar sweet roll chocolate cake pastry I love gummi bears pudding chocolate cake. I love brownie powder apple pie sugar plum I love cake candy canes wafer. Tiramisu I love oat cake oat cake danish icing. Dessert sugar plum sugar plum cookie donut chocolate cake oat cake I love gummi bears.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
const openedPanels = ref([])
|
||||
const items = ref(5)
|
||||
|
||||
const all = () => {
|
||||
|
||||
// [...Array(5).keys()] => [0, 1, 2, 3, 4]
|
||||
openedPanels.value = [...Array(items.value).keys()]
|
||||
}
|
||||
|
||||
const none = () => {
|
||||
openedPanels.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<VBtn
|
||||
class="me-4"
|
||||
@click="all"
|
||||
>
|
||||
all
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="none"
|
||||
>
|
||||
none
|
||||
</VBtn>
|
||||
|
||||
<div class="mt-3">
|
||||
<span class="font-weight-medium">Selected: </span>{{ openedPanels }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VExpansionPanels
|
||||
v-model="openedPanels"
|
||||
multiple
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Header {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
I love I love jujubes halvah cheesecake cookie macaroon sugar plum. Sugar plum I love bear claw marzipan wafer. Wafer sesame snaps danish candy cheesecake carrot cake tootsie roll.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<VExpansionPanels variant="popout">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Popout {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Cupcake ipsum dolor sit amet. Candy canes cheesecake chocolate bar I love I love jujubes gummi bears ice cream. Cheesecake tiramisu toffee cheesecake sugar plum candy canes bonbon candy.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
@@ -0,0 +1,382 @@
|
||||
export const accordion = { ts: `<template>
|
||||
<VExpansionPanels variant="accordion">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
Accordion {{ item }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Sweet roll ice cream chocolate bar. Ice cream croissant sugar plum I love cupcake gingerbread liquorice cake. Bonbon tart caramels marshmallow chocolate cake icing icing danish pie.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VExpansionPanels variant="accordion">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
Accordion {{ item }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Sweet roll ice cream chocolate bar. Ice cream croissant sugar plum I love cupcake gingerbread liquorice cake. Bonbon tart caramels marshmallow chocolate cake icing icing danish pie.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const basic = { ts: `<template>
|
||||
<VExpansionPanels multiple>
|
||||
<VExpansionPanel
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
Item {{ i }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VExpansionPanels multiple>
|
||||
<VExpansionPanel
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
Item {{ i }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customIcon = { ts: `<script setup lang="ts">
|
||||
const panel = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VExpansionPanels v-model="panel">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
Server Down
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-error-warning-line"
|
||||
color="error"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Gummies biscuit dessert macaroon liquorice carrot cake oat cake jelly beans cake. Candy wafer tiramisu sugar plum sweet. Ice cream topping gummies biscuit soufflé marzipan topping brownie marshmallow. Chocolate cake cookie pudding gummies cotton candy ice cream. Pie liquorice marzipan cake carrot cake macaroon jelly toffee. Lollipop donut gummi bears caramels icing marzipan.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
Sales report generated
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-check-line"
|
||||
color="success"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Bear claw ice cream icing gummies gingerbread cotton candy tootsie roll cupcake macaroon. Halvah brownie soufflé. Pie dragée macaroon. Tart tootsie roll chocolate bar biscuit jujubes lemon drops. Pudding cotton candy tart jelly-o bear claw lollipop. Jelly-o apple pie candy bonbon chupa chups cupcake cotton candy. Sweet roll cotton candy toffee caramels. Jelly-o chocolate cake toffee pastry halvah. Muffin tiramisu ice cream danish jelly-o brownie powde
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
High Memory usage
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-alert-line"
|
||||
color="warning"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Jelly beans wafer lemon drops macaroon muffin gummies muffin. Ice cream oat cake chocolate bar sesame snaps. Halvah macaroon caramels gummies. Marshmallow jelly beans danish. Cake chocolate cake tiramisu chocolate bar sugar plum biscuit jelly danish. Pudding gummi bears sesame snaps cake soufflé ice cream chocolate bar. Cotton candy ice cream danish chocolate cake topping ice cream. Brownie muffin gingerbread.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const panel = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VExpansionPanels v-model="panel">
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
Server Down
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-error-warning-line"
|
||||
color="error"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Gummies biscuit dessert macaroon liquorice carrot cake oat cake jelly beans cake. Candy wafer tiramisu sugar plum sweet. Ice cream topping gummies biscuit soufflé marzipan topping brownie marshmallow. Chocolate cake cookie pudding gummies cotton candy ice cream. Pie liquorice marzipan cake carrot cake macaroon jelly toffee. Lollipop donut gummi bears caramels icing marzipan.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
Sales report generated
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-check-line"
|
||||
color="success"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Bear claw ice cream icing gummies gingerbread cotton candy tootsie roll cupcake macaroon. Halvah brownie soufflé. Pie dragée macaroon. Tart tootsie roll chocolate bar biscuit jujubes lemon drops. Pudding cotton candy tart jelly-o bear claw lollipop. Jelly-o apple pie candy bonbon chupa chups cupcake cotton candy. Sweet roll cotton candy toffee caramels. Jelly-o chocolate cake toffee pastry halvah. Muffin tiramisu ice cream danish jelly-o brownie powde
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
|
||||
<VExpansionPanel>
|
||||
<VExpansionPanelTitle disable-icon-rotate>
|
||||
High Memory usage
|
||||
<template #actions>
|
||||
<VIcon
|
||||
icon="ri-alert-line"
|
||||
color="warning"
|
||||
/>
|
||||
</template>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Jelly beans wafer lemon drops macaroon muffin gummies muffin. Ice cream oat cake chocolate bar sesame snaps. Halvah macaroon caramels gummies. Marshmallow jelly beans danish. Cake chocolate cake tiramisu chocolate bar sugar plum biscuit jelly danish. Pudding gummi bears sesame snaps cake soufflé ice cream chocolate bar. Cotton candy ice cream danish chocolate cake topping ice cream. Brownie muffin gingerbread.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customizedAccordion = { ts: `<template>
|
||||
<VExpansionPanels
|
||||
variant="accordion"
|
||||
class="customized-panels"
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
elevation="0"
|
||||
>
|
||||
<VExpansionPanelTitle
|
||||
collapse-icon="ri-subtract-line"
|
||||
expand-icon="ri-add-line"
|
||||
>
|
||||
Accordion {{ item }}
|
||||
</VExpansionPanelTitle>
|
||||
|
||||
<VExpansionPanelText>
|
||||
Sweet roll ice cream chocolate bar. Ice cream croissant sugar plum I love cupcake gingerbread liquorice cake. Bonbon tart caramels marshmallow chocolate cake icing icing danish pie.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VExpansionPanels
|
||||
variant="accordion"
|
||||
class="customized-panels"
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
elevation="0"
|
||||
>
|
||||
<VExpansionPanelTitle
|
||||
collapse-icon="ri-subtract-line"
|
||||
expand-icon="ri-add-line"
|
||||
>
|
||||
Accordion {{ item }}
|
||||
</VExpansionPanelTitle>
|
||||
|
||||
<VExpansionPanelText>
|
||||
Sweet roll ice cream chocolate bar. Ice cream croissant sugar plum I love cupcake gingerbread liquorice cake. Bonbon tart caramels marshmallow chocolate cake icing icing danish pie.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inset = { ts: `<template>
|
||||
<VExpansionPanels variant="inset">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Inset {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Chocolate bar sweet roll chocolate cake pastry I love gummi bears pudding chocolate cake. I love brownie powder apple pie sugar plum I love cake candy canes wafer. Tiramisu I love oat cake oat cake danish icing. Dessert sugar plum sugar plum cookie donut chocolate cake oat cake I love gummi bears.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VExpansionPanels variant="inset">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Inset {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Chocolate bar sweet roll chocolate cake pastry I love gummi bears pudding chocolate cake. I love brownie powder apple pie sugar plum I love cake candy canes wafer. Tiramisu I love oat cake oat cake danish icing. Dessert sugar plum sugar plum cookie donut chocolate cake oat cake I love gummi bears.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const model = { ts: `<script lang="ts" setup>
|
||||
const openedPanels = ref<number[]>([])
|
||||
|
||||
const items = ref(5)
|
||||
|
||||
const all = () => {
|
||||
// [...Array(5).keys()] => [0, 1, 2, 3, 4]
|
||||
openedPanels.value = [...Array(items.value).keys()]
|
||||
}
|
||||
|
||||
const none = () => {
|
||||
openedPanels.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<VBtn
|
||||
class="me-4"
|
||||
@click="all"
|
||||
>
|
||||
all
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="none"
|
||||
>
|
||||
none
|
||||
</VBtn>
|
||||
|
||||
<div class="mt-3">
|
||||
<span class="font-weight-medium">Selected: </span>{{ openedPanels }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VExpansionPanels
|
||||
v-model="openedPanels"
|
||||
multiple
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Header {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
I love I love jujubes halvah cheesecake cookie macaroon sugar plum. Sugar plum I love bear claw marzipan wafer. Wafer sesame snaps danish candy cheesecake carrot cake tootsie roll.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const openedPanels = ref([])
|
||||
const items = ref(5)
|
||||
|
||||
const all = () => {
|
||||
|
||||
// [...Array(5).keys()] => [0, 1, 2, 3, 4]
|
||||
openedPanels.value = [...Array(items.value).keys()]
|
||||
}
|
||||
|
||||
const none = () => {
|
||||
openedPanels.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<VBtn
|
||||
class="me-4"
|
||||
@click="all"
|
||||
>
|
||||
all
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
@click="none"
|
||||
>
|
||||
none
|
||||
</VBtn>
|
||||
|
||||
<div class="mt-3">
|
||||
<span class="font-weight-medium">Selected: </span>{{ openedPanels }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VExpansionPanels
|
||||
v-model="openedPanels"
|
||||
multiple
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Header {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
I love I love jujubes halvah cheesecake cookie macaroon sugar plum. Sugar plum I love bear claw marzipan wafer. Wafer sesame snaps danish candy cheesecake carrot cake tootsie roll.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const popout = { ts: `<template>
|
||||
<VExpansionPanels variant="popout">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Popout {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Cupcake ipsum dolor sit amet. Candy canes cheesecake chocolate bar I love I love jujubes gummi bears ice cream. Cheesecake tiramisu toffee cheesecake sugar plum candy canes bonbon candy.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VExpansionPanels variant="popout">
|
||||
<VExpansionPanel
|
||||
v-for="item in 4"
|
||||
:key="item"
|
||||
>
|
||||
<VExpansionPanelTitle>Popout {{ item }}</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
Cupcake ipsum dolor sit amet. Candy canes cheesecake chocolate bar I love I love jujubes gummi bears ice cream. Cheesecake tiramisu toffee cheesecake sugar plum candy canes bonbon candy.
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<VList
|
||||
lines="three"
|
||||
density="compact"
|
||||
select-strategy="classic"
|
||||
>
|
||||
<VListSubheader>General</VListSubheader>
|
||||
|
||||
<VListItem value="notifications">
|
||||
<template #prepend="{ isActive }">
|
||||
<VListItemAction start>
|
||||
<VCheckbox
|
||||
:model-value="isActive"
|
||||
color="primary"
|
||||
class="mt-2"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Notifications</VListItemTitle>
|
||||
<VListItemSubtitle>Notify me about updates to apps or games that I downloaded</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem value="sound">
|
||||
<template #prepend="{ isActive }">
|
||||
<VListItemAction start>
|
||||
<VCheckbox
|
||||
:model-value="isActive"
|
||||
color="primary"
|
||||
class="mt-2"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Sound</VListItemTitle>
|
||||
<VListItemSubtitle>Auto-update apps at any time. Data charges may apply</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem value="widgets">
|
||||
<template #prepend="{ isActive }">
|
||||
<VListItemAction start>
|
||||
<VCheckbox
|
||||
:model-value="isActive"
|
||||
color="primary"
|
||||
class="mt-2"
|
||||
/>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>Auto-add widgets</VListItemTitle>
|
||||
<VListItemSubtitle>Automatically add home screen widgets when downloads complete</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</template>
|
||||
12
resources/js/views/demos/components/list/DemoListBasic.vue
Normal file
12
resources/js/views/demos/components/list/DemoListBasic.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
'Cras justo odio',
|
||||
'Dapibus ac facilisis in',
|
||||
'Morbi leo risus',
|
||||
'Porta ac consectetur ac',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList :items="items" />
|
||||
</template>
|
||||
43
resources/js/views/demos/components/list/DemoListDensity.vue
Normal file
43
resources/js/views/demos/components/list/DemoListDensity.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'halvah icing marshmallow',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
title: 'Cake caramels donut danish muffin biscuit',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
title: 'Chocolate cake pie lollipop',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
title: 'Apple pie toffee pudding gummi bears',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
title: 'Jujubes chupa chups cheesecake tart',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
title: 'Candy fruitcake bonbon sesame snaps dessert',
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
title: 'Candy wafer tiramisu sugar plum sweet.',
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
title: 'Toffee gingerbread muffin macaroon cotton candy bonbon lollipop.',
|
||||
value: 8,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList
|
||||
density="compact"
|
||||
:items="items"
|
||||
/>
|
||||
</template>
|
||||
63
resources/js/views/demos/components/list/DemoListNav.vue
Normal file
63
resources/js/views/demos/components/list/DemoListNav.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'My Files',
|
||||
value: 1,
|
||||
prependIcon: 'ri-folder-line',
|
||||
},
|
||||
{
|
||||
title: 'Shared with me',
|
||||
value: 2,
|
||||
prependIcon: 'ri-group-line',
|
||||
},
|
||||
{
|
||||
title: 'Starred',
|
||||
value: 3,
|
||||
prependIcon: 'ri-star-line',
|
||||
},
|
||||
{
|
||||
title: 'Recent',
|
||||
value: 4,
|
||||
prependIcon: 'ri-history-line',
|
||||
},
|
||||
{
|
||||
title: 'Offline',
|
||||
value: 5,
|
||||
prependIcon: 'ri-checkbox-circle-line',
|
||||
},
|
||||
{
|
||||
title: 'Uploads',
|
||||
value: 6,
|
||||
prependIcon: 'ri-upload-line',
|
||||
},
|
||||
{
|
||||
title: 'Backups',
|
||||
value: 7,
|
||||
prependIcon: 'ri-upload-cloud-line',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList
|
||||
nav
|
||||
:lines="false"
|
||||
>
|
||||
<VListItem
|
||||
v-for="item in items"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
:icon="item.prependIcon"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>
|
||||
{{ item.title }}
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</template>
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
const languageProgress = [
|
||||
{
|
||||
avatar: 'ri-reactjs-line',
|
||||
title: 'React is a JavaScript library for building user interfaces',
|
||||
language: 'react',
|
||||
amount: 90,
|
||||
},
|
||||
{
|
||||
avatar: 'ri-bootstrap-line',
|
||||
title: 'Bootstrap is an open source toolkit',
|
||||
language: 'bootstrap',
|
||||
amount: 80,
|
||||
},
|
||||
{
|
||||
avatar: 'ri-vuejs-line',
|
||||
title: 'Vue.js is the Progressive JavaScript Framework',
|
||||
language: 'vue',
|
||||
amount: 65,
|
||||
},
|
||||
{
|
||||
avatar: 'ri-angularjs-line',
|
||||
title: 'Angular implements Functional Programming concepts',
|
||||
language: 'angular',
|
||||
amount: 75,
|
||||
},
|
||||
{
|
||||
avatar: 'ri-javascript-line',
|
||||
title: 'JavaScript is the programming language of the Web',
|
||||
language: 'javascript',
|
||||
amount: 70,
|
||||
},
|
||||
]
|
||||
|
||||
const resolveStatusColor = {
|
||||
react: 'info',
|
||||
bootstrap: 'primary',
|
||||
vue: 'success',
|
||||
angular: 'error',
|
||||
javascript: 'warning',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList
|
||||
lines="two"
|
||||
border
|
||||
rounded
|
||||
>
|
||||
<template
|
||||
v-for="(progress, index) of languageProgress"
|
||||
:key="progress.language"
|
||||
>
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="36"
|
||||
rounded
|
||||
variant="tonal"
|
||||
:icon="progress.avatar"
|
||||
:color="resolveStatusColor[progress.language]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>
|
||||
{{ progress.title }}
|
||||
</VListItemTitle>
|
||||
|
||||
<VListItemSubtitle class="mt-2">
|
||||
<VProgressLinear
|
||||
height="6"
|
||||
rounded
|
||||
:model-value="progress.amount"
|
||||
bg-color="secondary"
|
||||
:color="resolveStatusColor[progress.language]"
|
||||
/>
|
||||
</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VDivider v-if="index !== languageProgress.length - 1" />
|
||||
</template>
|
||||
</VList>
|
||||
</template>
|
||||
40
resources/js/views/demos/components/list/DemoListRounded.vue
Normal file
40
resources/js/views/demos/components/list/DemoListRounded.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Cupcake sesame snaps dessert marzipan.',
|
||||
value: 1,
|
||||
props: {
|
||||
prependIcon: 'ri-dribbble-line',
|
||||
rounded: 'xl',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Jelly beans jelly-o gummi bears chupa chups marshmallow.',
|
||||
value: 2,
|
||||
props: {
|
||||
prependIcon: 'ri-facebook-circle-line',
|
||||
rounded: 'xl',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Bonbon macaroon gummies pie jelly',
|
||||
value: 3,
|
||||
props: {
|
||||
prependIcon: 'ri-twitter-line',
|
||||
rounded: 'xl',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'halvah icing marshmallow',
|
||||
value: 4,
|
||||
props: {
|
||||
prependIcon: 'ri-instagram-line',
|
||||
rounded: 'xl',
|
||||
},
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList :items="items" />
|
||||
</template>
|
||||
33
resources/js/views/demos/components/list/DemoListShaped.vue
Normal file
33
resources/js/views/demos/components/list/DemoListShaped.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
text: 'Cupcake sesame snaps dessert marzipan.',
|
||||
icon: 'ri-instagram-line',
|
||||
},
|
||||
{
|
||||
text: 'Jelly beans jelly-o gummi bears chupa chups marshmallow.',
|
||||
icon: 'ri-facebook-circle-line',
|
||||
},
|
||||
{
|
||||
text: 'Bonbon macaroon gummies pie jelly',
|
||||
icon: 'ri-twitter-line',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
:value="item.text"
|
||||
rounded="shaped"
|
||||
>
|
||||
<template #prepend>
|
||||
<VIcon :icon="item.icon" />
|
||||
</template>
|
||||
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
|
||||
<VListItemTitle v-text="item.text" />
|
||||
</VListItem>
|
||||
</VList>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup>
|
||||
const open = ref([
|
||||
'Users',
|
||||
'Admin',
|
||||
])
|
||||
|
||||
const admins = [
|
||||
[
|
||||
'Management',
|
||||
'ri-group-line',
|
||||
],
|
||||
[
|
||||
'Settings',
|
||||
'ri-settings-5-line',
|
||||
],
|
||||
]
|
||||
|
||||
const cruds = [
|
||||
[
|
||||
'Create',
|
||||
'ri-add-line',
|
||||
],
|
||||
[
|
||||
'Read',
|
||||
'ri-file-line',
|
||||
],
|
||||
[
|
||||
'Update',
|
||||
'ri-refresh-line',
|
||||
],
|
||||
[
|
||||
'Delete',
|
||||
'ri-delete-bin-line',
|
||||
],
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList v-model:opened="open">
|
||||
<VListItem
|
||||
prepend-icon="ri-home-line"
|
||||
title="Home"
|
||||
value="Home"
|
||||
/>
|
||||
|
||||
<VListGroup value="Users">
|
||||
<template #activator="{ props }">
|
||||
<VListItem
|
||||
v-bind="props"
|
||||
prepend-icon="ri-user-line"
|
||||
title="Users"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListGroup value="Admin">
|
||||
<template #activator="{ props }">
|
||||
<VListItem
|
||||
v-bind="props"
|
||||
title="Admin"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItem
|
||||
v-for="([title, icon], i) in admins"
|
||||
:key="i"
|
||||
:value="title"
|
||||
:title="title"
|
||||
:prepend-icon="icon"
|
||||
/>
|
||||
</VListGroup>
|
||||
|
||||
<VListGroup value="Actions">
|
||||
<template #activator="{ props }">
|
||||
<VListItem
|
||||
v-bind="props"
|
||||
title="Actions"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItem
|
||||
v-for="([title, icon], i) in cruds"
|
||||
:key="i"
|
||||
:value="title"
|
||||
:title="title"
|
||||
:prepend-icon="icon"
|
||||
/>
|
||||
</VListGroup>
|
||||
</VListGroup>
|
||||
</VList>
|
||||
</template>
|
||||
@@ -0,0 +1,58 @@
|
||||
<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'
|
||||
|
||||
const items = [
|
||||
{
|
||||
type: 'subheader',
|
||||
title: 'Today',
|
||||
},
|
||||
{
|
||||
prependAvatar: avatar1,
|
||||
title: 'Brunch this weekend?',
|
||||
subtitle: '<span class="text-primary">Ali Connors</span> — I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
inset: true,
|
||||
},
|
||||
{
|
||||
prependAvatar: avatar2,
|
||||
title: 'Summer BBQ',
|
||||
subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> — Wish I could come, but I\'m out of town this weekend.',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
inset: true,
|
||||
},
|
||||
{
|
||||
prependAvatar: avatar3,
|
||||
title: 'Oui oui',
|
||||
subtitle: '<span class="text-primary">Sandra Adams</span> — Do you have Paris recommendations? Have you ever been?',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
inset: true,
|
||||
},
|
||||
{
|
||||
prependAvatar: avatar4,
|
||||
title: 'Birthday gift',
|
||||
subtitle: '<span class="text-primary">Trevor Hansen</span> — Have any ideas about what we should get Heidi for her birthday?',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList
|
||||
lines="three"
|
||||
:items="items"
|
||||
item-props
|
||||
>
|
||||
<template #subtitle="{ subtitle }">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="subtitle" />
|
||||
</template>
|
||||
</VList>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
const files = [
|
||||
{
|
||||
color: 'blue',
|
||||
icon: 'ri-clipboard-line',
|
||||
subtitle: 'Jan 20, 2014',
|
||||
title: 'Vacation itinerary',
|
||||
},
|
||||
{
|
||||
color: 'amber',
|
||||
icon: 'ri-hard-drive-2-line',
|
||||
subtitle: 'Jan 10, 2014',
|
||||
title: 'Kitchen remodel',
|
||||
},
|
||||
]
|
||||
|
||||
const folders = [
|
||||
{
|
||||
subtitle: 'Jan 9, 2014',
|
||||
title: 'Photos',
|
||||
},
|
||||
{
|
||||
subtitle: 'Jan 17, 2014',
|
||||
title: 'Recipes',
|
||||
},
|
||||
{
|
||||
subtitle: 'Jan 28, 2014',
|
||||
title: 'Work',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList lines="two">
|
||||
<VListSubheader inset>
|
||||
Folders
|
||||
</VListSubheader>
|
||||
|
||||
<VListItem
|
||||
v-for="folder in folders"
|
||||
:key="folder.title"
|
||||
:title="folder.title"
|
||||
:subtitle="folder.subtitle"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
:size="26"
|
||||
icon="ri-folder-line"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="default"
|
||||
icon="ri-information-line"
|
||||
/>
|
||||
</template>
|
||||
</VListItem>
|
||||
|
||||
<VDivider inset />
|
||||
|
||||
<VListSubheader inset>
|
||||
Files
|
||||
</VListSubheader>
|
||||
|
||||
<VListItem
|
||||
v-for="file in files"
|
||||
:key="file.title"
|
||||
:title="file.title"
|
||||
:subtitle="file.subtitle"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
:size="26"
|
||||
:icon="file.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="default"
|
||||
icon="ri-information-line"
|
||||
/>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</template>
|
||||
@@ -0,0 +1,82 @@
|
||||
<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'
|
||||
|
||||
const users = [
|
||||
{
|
||||
avatar: avatar1,
|
||||
name: 'Caroline Black',
|
||||
status: 'Online',
|
||||
lastVisited: '13 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: avatar2,
|
||||
name: 'Alfred Copeland',
|
||||
status: 'Away',
|
||||
lastVisited: '11 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: avatar3,
|
||||
name: 'Celia Schneider',
|
||||
status: 'Offline',
|
||||
lastVisited: '9 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: avatar4,
|
||||
name: 'Max Rogan',
|
||||
status: 'In Meeting',
|
||||
lastVisited: '28 minutes ago',
|
||||
},
|
||||
]
|
||||
|
||||
const resolveStatusColor = {
|
||||
'Online': 'success',
|
||||
'Away': 'warning',
|
||||
'Offline': 'secondary',
|
||||
'In Meeting': 'error',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList
|
||||
lines="two"
|
||||
border
|
||||
rounded
|
||||
>
|
||||
<template
|
||||
v-for="(user, index) of users"
|
||||
:key="user.name"
|
||||
>
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VAvatar :image="user.avatar" />
|
||||
</template>
|
||||
<VListItemTitle>
|
||||
{{ user.name }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="mt-1">
|
||||
<VBadge
|
||||
dot
|
||||
location="start center"
|
||||
offset-x="2"
|
||||
:color="resolveStatusColor[user.status]"
|
||||
class="me-3"
|
||||
>
|
||||
<span class="ms-4">{{ user.status }}</span>
|
||||
</VBadge>
|
||||
|
||||
<span class="text-xs text-disabled">{{ user.lastVisited }}</span>
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn size="small">
|
||||
Add
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
<VDivider v-if="index !== users.length - 1" />
|
||||
</template>
|
||||
</VList>
|
||||
</template>
|
||||
1266
resources/js/views/demos/components/list/demoCodeList.js
Normal file
1266
resources/js/views/demos/components/list/demoCodeList.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
import { mergeProps } from 'vue'
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu location="top">
|
||||
<template #activator="{ props: menuProps }">
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
|
||||
Dropdown w/ Tooltip
|
||||
</VBtn>
|
||||
</template>
|
||||
<span>I am a Tooltip</span>
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</template>
|
||||
45
resources/js/views/demos/components/menu/DemoMenuBasic.vue
Normal file
45
resources/js/views/demos/components/menu/DemoMenuBasic.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
const menusVariant = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
'error',
|
||||
]
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu
|
||||
v-for="menu in menusVariant"
|
||||
:key="menu"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VBtn
|
||||
:color="menu"
|
||||
v-bind="props"
|
||||
>
|
||||
{{ menu }}
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu transition="scale-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Scale Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu transition="slide-x-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Slide X Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu transition="slide-y-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Slide Y Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu location="top">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Top
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Bottom
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="start">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Start
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="end">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
End
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu open-on-hover>
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
On hover
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</template>
|
||||
41
resources/js/views/demos/components/menu/DemoMenuPopover.vue
Normal file
41
resources/js/views/demos/components/menu/DemoMenuPopover.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
|
||||
const menu = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="menu"
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Menu as Popover
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VCard max-width="300">
|
||||
<VList>
|
||||
<VListItem
|
||||
:prepend-avatar="avatar1"
|
||||
title="John Leider"
|
||||
subtitle="Founder of Vuetify"
|
||||
/>
|
||||
</VList>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
|
||||
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn icon="ri-heart-fill" />
|
||||
<VBtn icon="ri-bookmark-line" />
|
||||
<VBtn icon="ri-thumb-down-line" />
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VMenu>
|
||||
</template>
|
||||
457
resources/js/views/demos/components/menu/demoCodeMenu.js
Normal file
457
resources/js/views/demos/components/menu/demoCodeMenu.js
Normal file
@@ -0,0 +1,457 @@
|
||||
export const activatorAndTooltip = { ts: `<script lang="ts" setup>
|
||||
import { mergeProps } from 'vue'
|
||||
|
||||
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu location="top">
|
||||
<template #activator="{ props: menuProps }">
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
|
||||
Dropdown w/ Tooltip
|
||||
</VBtn>
|
||||
</template>
|
||||
<span>I am a Tooltip</span>
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import { mergeProps } from 'vue'
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu location="top">
|
||||
<template #activator="{ props: menuProps }">
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
|
||||
Dropdown w/ Tooltip
|
||||
</VBtn>
|
||||
</template>
|
||||
<span>I am a Tooltip</span>
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const basic = { ts: `<script lang="ts" setup>
|
||||
const menusVariant = ['primary', 'secondary', 'success', 'info', 'warning', 'error']
|
||||
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu
|
||||
v-for="menu in menusVariant"
|
||||
:key="menu"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VBtn
|
||||
:color="menu"
|
||||
v-bind="props"
|
||||
>
|
||||
{{ menu }}
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const menusVariant = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'success',
|
||||
'info',
|
||||
'warning',
|
||||
'error',
|
||||
]
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu
|
||||
v-for="menu in menusVariant"
|
||||
:key="menu"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VBtn
|
||||
:color="menu"
|
||||
v-bind="props"
|
||||
>
|
||||
{{ menu }}
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customTransitions = { ts: `<script lang="ts" setup>
|
||||
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu transition="scale-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Scale Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu transition="slide-x-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Slide X Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu transition="slide-y-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Slide Y Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu transition="scale-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Scale Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu transition="slide-x-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Slide X Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu transition="slide-y-transition">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Slide Y Transition
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const location = { ts: `<script lang="ts" setup>
|
||||
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu location="top">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Top
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Bottom
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="start">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Start
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="end">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
End
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VMenu location="top">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Top
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Bottom
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="start">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Start
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
|
||||
<VMenu location="end">
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
End
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const openOnHover = { ts: `<script lang="ts" setup>
|
||||
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu open-on-hover>
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
On hover
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const items = [
|
||||
{
|
||||
title: 'Option 1',
|
||||
value: 'Option 1',
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
value: 'Option 2',
|
||||
},
|
||||
{
|
||||
title: 'Option 3',
|
||||
value: 'Option 3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu open-on-hover>
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
On hover
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VList :items="items" />
|
||||
</VMenu>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const popover = { ts: `<script lang="ts" setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
|
||||
const menu = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="menu"
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Menu as Popover
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VCard max-width="300">
|
||||
<VList>
|
||||
<VListItem
|
||||
:prepend-avatar="avatar1"
|
||||
title="John Leider"
|
||||
subtitle="Founder of Vuetify"
|
||||
/>
|
||||
</VList>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
|
||||
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn icon="ri-heart-fill" />
|
||||
<VBtn icon="ri-bookmark-line" />
|
||||
<VBtn icon="ri-thumb-down-line" />
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VMenu>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
|
||||
const menu = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="menu"
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<VBtn v-bind="props">
|
||||
Menu as Popover
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VCard max-width="300">
|
||||
<VList>
|
||||
<VListItem
|
||||
:prepend-avatar="avatar1"
|
||||
title="John Leider"
|
||||
subtitle="Founder of Vuetify"
|
||||
/>
|
||||
</VList>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
|
||||
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VBtn icon="ri-heart-fill" />
|
||||
<VBtn icon="ri-bookmark-line" />
|
||||
<VBtn icon="ri-thumb-down-line" />
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VMenu>
|
||||
</template>
|
||||
` }
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
const currentPage = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPagination
|
||||
v-model="currentPage"
|
||||
:length="5"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
const currentPage = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPagination
|
||||
v-model="currentPage"
|
||||
:length="5"
|
||||
rounded="circle"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
const pageSuccess = ref(1)
|
||||
const pageError = ref(2)
|
||||
const pageInfo = ref(3)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-6">
|
||||
<VPagination
|
||||
v-model="pageSuccess"
|
||||
:length="7"
|
||||
color="success"
|
||||
/>
|
||||
<VPagination
|
||||
v-model="pageError"
|
||||
:length="7"
|
||||
color="error"
|
||||
/>
|
||||
<VPagination
|
||||
v-model="pageInfo"
|
||||
:length="7"
|
||||
color="info"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<VPagination
|
||||
:length="5"
|
||||
disabled
|
||||
/>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user