Update Multiple and Sticky samples

This commit is contained in:
Cagatay Civici 2023-10-07 13:14:05 +03:00
parent edf0512f8e
commit f4d107a8af
2 changed files with 30 additions and 31 deletions

View file

@ -3,7 +3,10 @@
<p>A message disappears after 3000ms defined the <i>life</i> option, set <i>sticky</i> option to display messages that do not hide automatically.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Button @click="showSticky" label="Sticky" />
<div class="flex flex-wrap gap-2">
<Button @click="showSticky" label="Sticky" severity="success" />
<Button label="Clear" @click="clear()" />
</div>
</div>
<DocSectionCode :code="code" />
</template>
@ -15,12 +18,16 @@ export default {
code: {
basic: `
<Toast />
<Button @click="showSticky" label="Sticky" />`,
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" @click="clear()" />`,
options: `
<template>
<div class="card flex justify-content-center">
<Toast />
<Button @click="showSticky" label="Sticky" />
<div class="flex flex-wrap gap-2">
<Button @click="showSticky" label="Sticky" severity="success" />
<Button label="Clear" @click="clear()" />
</div>
</div>
</template>
@ -29,6 +36,9 @@ export default {
methods: {
showSticky() {
this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
},
clear() {
this.$toast.removeAllGroups();
}
}
};
@ -37,7 +47,10 @@ export default {
<template>
<div class="card flex justify-content-center">
<Toast />
<Button @click="showSticky" label="Sticky" />
<div class="flex flex-wrap gap-2">
<Button @click="showSticky" label="Sticky" severity="success" />
<Button label="Clear" @click="clear()" />
</div>
</div>
</template>
@ -47,7 +60,11 @@ const toast = useToast();
const showSticky = () => {
toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
};
}
const clear = () => {
toast.removeAllGroups();
}
<\/script>`
}
};
@ -55,6 +72,9 @@ const showSticky = () => {
methods: {
showSticky() {
this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content' });
},
clear() {
this.$toast.removeAllGroups();
}
}
};