primevue-mirror/src/views/toast/ToastDemo.vue

97 lines
3.4 KiB
Vue
Raw Normal View History

2019-02-08 10:55:52 +00:00
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Toast</h1>
<p>Toast is used to display messages in an overlay.</p>
</div>
</div>
2020-07-02 07:14:49 +00:00
<div class="content-section implementation">
2020-06-18 08:58:07 +00:00
<div class="card">
<h5>Severities</h5>
2020-07-02 07:14:49 +00:00
<Button label="Success" class="p-button-success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" />
2019-02-08 13:16:00 +00:00
2020-06-18 08:58:07 +00:00
<h5>Positions</h5>
2020-07-02 07:14:49 +00:00
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
2019-02-08 13:16:00 +00:00
2020-06-18 08:58:07 +00:00
<h5>Options</h5>
2020-07-02 07:14:49 +00:00
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
<Button @click="showSticky" label="Sticky" />
2019-10-01 13:00:26 +00:00
2020-06-18 08:58:07 +00:00
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
</div>
2019-02-08 10:55:52 +00:00
</div>
2019-04-03 11:43:19 +00:00
<ToastDoc/>
2019-02-08 10:55:52 +00:00
</div>
</template>
<script>
2019-04-03 11:43:19 +00:00
import ToastDoc from './ToastDoc';
2019-02-08 10:55:52 +00:00
export default {
data() {
return {
messages: [],
}
},
methods: {
showSuccess() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
2019-02-08 10:55:52 +00:00
},
showInfo() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
2019-02-08 10:55:52 +00:00
},
showWarn() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
2019-02-08 10:55:52 +00:00
},
showError() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
2019-02-08 13:16:00 +00:00
},
showTopLeft() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
2019-02-08 13:16:00 +00:00
},
showBottomLeft() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
2019-02-08 13:16:00 +00:00
},
showBottomRight() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
2019-02-08 13:16:00 +00:00
},
showSticky() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
2019-02-08 13:16:00 +00:00
},
showMultiple() {
2020-07-02 07:22:03 +00:00
this.$toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
2019-02-08 13:16:00 +00:00
},
clear() {
this.$toast.removeAllGroups();
2019-02-08 10:55:52 +00:00
}
2019-04-03 11:43:19 +00:00
},
components: {
'ToastDoc': ToastDoc
2019-02-08 10:55:52 +00:00
}
}
2020-07-02 07:14:49 +00:00
</script>
<style lang="scss" scoped>
button {
min-width: 10rem;
margin-right: .5rem;
}
@media screen and (max-width: 960px) {
button {
width: 100%;
margin-bottom: .5rem;
}
}
</style>