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

Update Multiple and Sticky samples

pull/4591/head
Cagatay Civici 2023-10-07 13:14:05 +03:00
parent edf0512f8e
commit f4d107a8af
2 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
doc/toast/MultipleDoc.vue
View File

@ -3,10 +3,7 @@
<p>Multiple messages are displayed by passing an array to the <i>show</i> method.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="flex flex-wrap gap-2">
<Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" />
</div>
<Button label="Multiple" severity="warning" @click="showMultiple()" />
</div>
<DocSectionCode :code="code" />
</template>
@ -18,18 +15,13 @@ export default {
code: {
basic: `
<Toast />
<div class="flex flex-wrap gap-2">
<Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" />
</div>`,
<Button label="Multiple" severity="warning" @click="showMultiple()" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Toast />
<div class="flex flex-wrap gap-2">
<Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" />
</div>
<Button label="Multiple" severity="warning" @click="showMultiple()" />
</div>
</template>
@ -41,9 +33,6 @@ export default {
this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
},
clear() {
this.$toast.removeAllGroups();
}
}
};
@ -52,10 +41,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Toast />
<div class="flex flex-wrap gap-2">
<Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" />
</div>
<Button label="Multiple" severity="warning" @click="showMultiple()" />
</div>
</template>
@ -69,10 +55,6 @@ const showMultiple = () => {
toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
};
const clear = () => {
toast.removeAllGroups();
};
<\/script>`
}
};
@ -83,9 +65,6 @@ const clear = () => {
this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
},
clear() {
this.$toast.removeAllGroups();
}
}
};

30
doc/toast/StickyDoc.vue
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();
}
}
};