first commit
This commit is contained in:
Inshal
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>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user