vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

docs(toast): document all remove methods

pull/7003/head
j0rgedev 2024-12-25 14:58:10 -05:00
parent e5af2d3ad0
commit 26fbfc87d6
2 changed files with 180 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
apps/showcase/doc/toast/RemovingToastsDoc.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The Toast Service provides multiple methods for removing toasts programmatically, whether it is a <i>specific</i> toast, all toasts in a <i>group</i>, or <i>all</i> toasts currently displayed.</p>
</DocSectionText>
<div class="card flex justify-center">
<Toast />
<Toast group="warning" position="bottom-right"/>
<div class="flex flex-col gap-4">
<div class="flex flex-wrap gap-2 justify-center">
<Button @click="addToast" label="Add Toast" />
<Button @click="addWarningToast" label="Add Warning Toast" />
</div>
<div class="flex flex-wrap gap-2 justify-center">
<Button @click="clearToast" label="Clear Toast" severity="secondary" />
<Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
<Button @click="clearAll" label="Clear All" severity="secondary" />
</div>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
generalToastMessage: {
severity: 'info',
summary: 'General Toast',
detail: 'General toast message',
},
warningToastMessage: {
severity: 'warn',
summary: 'Warning Toast',
detail: 'Warning toast message',
group: 'warning'
},
code: {
basic: `
<Toast />
<Toast group="warning" position="bottom-right"/>
<Button @click="addToast" label="Add Toast" />
<Button @click="addWarningToast" label="Add Warning Toast" />
<Button @click="clearToast" label="Clear Toast" severity="secondary" />
<Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
<Button @click="clearAll" label="Clear All" severity="secondary" />
`,
options: `
<template>
<div class="card flex justify-center">
<Toast />
<Toast group="warning" position="bottom-right"/>
<div class="flex flex-col gap-4">
<div class="flex flex-wrap gap-2 justify-center">
<Button @click="addToast" label="Add Toast" />
<Button @click="addWarningToast" label="Add Warning Toast" />
</div>
<div class="flex flex-wrap gap-2 justify-center">
<Button @click="clearToast" label="Clear Toast" severity="secondary" />
<Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
<Button @click="clearAll" label="Clear All" severity="secondary" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
generalToastMessage: {
severity: 'info',
summary: 'General Toast',
detail: 'General toast message',
},
warningToastMessage: {
severity: 'warn',
summary: 'Warning Toast',
detail: 'Warning toast message',
group: 'warning'
},
};
},
methods: {
addToast() {
this.$toast.add(this.generalToastMessage);
},
clearToast() {
this.$toast.remove(this.generalToastMessage);
},
addWarningToast() {
this.$toast.add(this.warningToastMessage);
},
clearAllWarningToasts() {
this.$toast.removeGroup('warning');
},
clearAll() {
this.$toast.removeAllGroups();
}
}
};
<\/script>`,
composition: `
<template>
<div class="card flex justify-center">
<Toast />
<Toast group="warning" position="bottom-right"/>
<div class="flex flex-col gap-4">
<div class="flex flex-wrap gap-2 justify-center">
<Button @click="addToast" label="Add Toast" />
<Button @click="addWarningToast" label="Add Warning Toast" />
</div>
<div class="flex flex-wrap gap-2 justify-center">
<Button @click="clearToast" label="Clear Toast" severity="secondary" />
<Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
<Button @click="clearAll" label="Clear All" severity="secondary" />
</div>
</div>
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
const toast = useToast();
const generalToastMessage = {
severity: 'info',
summary: 'General Toast',
detail: 'General toast message',
};
const warningToastMessage = {
severity: 'warn',
summary: 'Warning Toast',
detail: 'Warning toast message',
group: 'warning'
};
const addToast = () => toast.add(generalToastMessage);
const clearToast = () => toast.remove(generalToastMessage);
const addWarningToast = () => toast.add(warningToastMessage);
const clearAllWarningToasts = () => toast.removeGroup('warning');
const clearAll = () => toast.removeAllGroups();
<\/script>
`
},
};
},
methods: {
addToast() {
this.$toast.add(this.generalToastMessage);
},
clearToast() {
this.$toast.remove(this.generalToastMessage);
},
addWarningToast() {
this.$toast.add(this.warningToastMessage);
},
clearAllWarningToasts() {
this.$toast.removeGroup('warning');
},
clearAll() {
this.$toast.removeAllGroups();
}
}
};
</script>

6
apps/showcase/pages/toast/index.vue
View File

@ -15,6 +15,7 @@ import TemplateDoc from '@/doc/toast/TemplateDoc.vue';
import ToastServiceDoc from '@/doc/toast/ToastServiceDoc.vue';
import PTComponent from '@/doc/toast/pt/index.vue';
import ThemingDoc from '@/doc/toast/theming/index.vue';
import RemovingToastsDoc from '@/doc/toast/RemovingToastsDoc.vue';
export default {
data() {
@ -65,6 +66,11 @@ export default {
label: 'Headless',
component: HeadlessDoc
},
{
id: 'remove-toast',
label: 'Removing Toasts',
component: RemovingToastsDoc
},
{
id: 'accessibility',
label: 'Accessibility',