Update message demos
Cagatay Civici
parent
d9f6b813ad
commit
311678359b
|
|
@ -39,6 +39,13 @@ export default {
|
|||
visible: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
sticky(newValue) {
|
||||
if (!newValue) {
|
||||
this.closeAfterDelay();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.sticky) {
|
||||
this.closeAfterDelay();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
|
||||
<p>Messages are closable by default, disable <i>closable</i> option to remove the close button.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message :closable="false">Message Content</Message>
|
||||
<Message :closable="false">Not Closable</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -14,12 +14,12 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message :closable="false">Message Content</Message>
|
||||
<Message :closable="false">Not Closable</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message :closable="false">Message Content</Message>
|
||||
<Message :closable="false">Not Closable</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message :closable="false">Message Content</Message>
|
||||
<Message :closable="false">Not Closable</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>icon</i> property can change the icon of the message.</p>
|
||||
<p>Icon property and the <i>messageicon</i> slots are available to customize the icon of the message</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message severity="info" icon="pi pi-send">Info Message Content</Message>
|
||||
<Message severity="info" icon="pi pi-send">Info Message</Message>
|
||||
<Message severity="success">
|
||||
<template #messageicon>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
</template>
|
||||
<span class="ml-2">How may I help you?</span>
|
||||
</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -14,12 +20,24 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message severity="info" icon="pi pi-send">Info Message Content</Message>
|
||||
<Message severity="info" icon="pi pi-send">Info Message</Message>
|
||||
<Message severity="success">
|
||||
<template #messageicon>
|
||||
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
|
||||
</template>
|
||||
<span class="ml-2">How may I help you?</span>
|
||||
</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="info" icon="pi pi-send">Info Message Content</Message>
|
||||
<Message severity="info" icon="pi pi-send">Info Message</Message>
|
||||
<Message severity="success">
|
||||
<template #messageicon>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
</template>
|
||||
<span class="ml-2">How may I help you?</span>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,7 +47,13 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="info" icon="pi pi-send">Info Message Content</Message>
|
||||
<Message severity="info" icon="pi pi-send">Info Message</Message>
|
||||
<Message severity="success">
|
||||
<template #messageicon>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
</template>
|
||||
<span class="ml-2">How may I help you?</span>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<p>The <i>severity</i> option specifies the type of the message.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
<Message severity="info">Info Message Content</Message>
|
||||
<Message severity="warn">Warning Message Content</Message>
|
||||
<Message severity="error">Error Message Content</Message>
|
||||
<Message severity="success">Success Message</Message>
|
||||
<Message severity="info">Info Message</Message>
|
||||
<Message severity="warn">Warning Message</Message>
|
||||
<Message severity="error">Error Message</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -17,18 +17,18 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
<Message severity="info">Info Message Content</Message>
|
||||
<Message severity="warn">Warning Message Content</Message>
|
||||
<Message severity="error">Error Message Content</Message>
|
||||
<Message severity="success">Success Message</Message>
|
||||
<Message severity="info">Info Message</Message>
|
||||
<Message severity="warn">Warning Message</Message>
|
||||
<Message severity="error">Error Message</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
<Message severity="info">Info Message Content</Message>
|
||||
<Message severity="warn">Warning Message Content</Message>
|
||||
<Message severity="error">Error Message Content</Message>
|
||||
<Message severity="success">Success Message</Message>
|
||||
<Message severity="info">Info Message</Message>
|
||||
<Message severity="warn">Warning Message</Message>
|
||||
<Message severity="error">Error Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -38,10 +38,10 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
<Message severity="info">Info Message Content</Message>
|
||||
<Message severity="warn">Warning Message Content</Message>
|
||||
<Message severity="error">Error Message Content</Message>
|
||||
<Message severity="success">Success Message</Message>
|
||||
<Message severity="info">Info Message</Message>
|
||||
<Message severity="warn">Warning Message</Message>
|
||||
<Message severity="error">Error Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message should be displayed which is 3000 ms by
|
||||
default.
|
||||
</p>
|
||||
<p>Messages can disappear automatically by turning the <i>sticky</i> option off. The timeout duration is defined using the <i>life</i> property in milliseconds.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message severity="success" sticky>Success Message Content</Message>
|
||||
<Message severity="info" sticky>Info Message Content</Message>
|
||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
||||
<Message severity="error" sticky>Error Message Content</Message>
|
||||
<Button label="Turn off Sticky" @click="sticky = false" />
|
||||
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -18,37 +16,51 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
sticky: true,
|
||||
code: {
|
||||
basic: `
|
||||
<Message severity="success" sticky>Success Message Content</Message>
|
||||
<Message severity="info" sticky>Info Message Content</Message>
|
||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
||||
<Message severity="error" sticky>Error Message Content</Message>
|
||||
<Button label="Turn off Sticky" @click="sticky = false" />
|
||||
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="success" sticky>Success Message Content</Message>
|
||||
<Message severity="info" sticky>Info Message Content</Message>
|
||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
||||
<Message severity="error" sticky>Error Message Content</Message>
|
||||
<Button label="Turn off Sticky" @click="sticky = false" />
|
||||
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sticky: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="success" sticky>Success Message Content</Message>
|
||||
<Message severity="info" sticky>Info Message Content</Message>
|
||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
||||
<Message severity="error" sticky>Error Message Content</Message>
|
||||
<Button label="Turn off Sticky" @click="sticky.value = false" />
|
||||
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
let sticky = ref(true);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,176 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Custom content inside a message is defined with the <i>default</i> slot.</p>
|
||||
<div class="card">
|
||||
<Message
|
||||
:style="{
|
||||
border: 'solid #696cff',
|
||||
borderWidth: '0 0 0 6px',
|
||||
color: '#696cff'
|
||||
}"
|
||||
class="border-primary w-full justify-content-start"
|
||||
severity="info"
|
||||
>
|
||||
<div class="flex align-items-center">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
|
||||
<div class="ml-2">Always bet on Prime.</div>
|
||||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code1" />
|
||||
|
||||
<p><i>container</i> templating allows customizing the Message component.</p>
|
||||
<div class="card">
|
||||
<Message style="border: none">
|
||||
<template #container>
|
||||
<div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
|
||||
<div class="flex align-items-start">
|
||||
<i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
|
||||
<div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
|
||||
<div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
|
||||
<p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
|
||||
<span>Learn More</span>
|
||||
<i class="pi pi-arrow-right text-blue-900 ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code2" />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
<Message
|
||||
:style="{
|
||||
border: 'solid #696cff',
|
||||
borderWidth: '0 0 0 6px',
|
||||
color: '#696cff'
|
||||
}"
|
||||
class="border-primary w-full justify-content-start"
|
||||
severity="info"
|
||||
>
|
||||
<div class="flex align-items-center">
|
||||
<img alt="logo" src="/images/logo.svg" width="20" />
|
||||
<div class="ml-2">Always bet on Prime.</div>
|
||||
</div>
|
||||
</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message
|
||||
:style="{
|
||||
border: 'solid #696cff',
|
||||
borderWidth: '0 0 0 6px',
|
||||
color: '#696cff'
|
||||
}"
|
||||
class="border-primary w-full justify-content-start"
|
||||
severity="info"
|
||||
>
|
||||
<div class="flex align-items-center">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
|
||||
<div class="ml-2">Always bet on Prime.</div>
|
||||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message
|
||||
:style="{
|
||||
border: 'solid #696cff',
|
||||
borderWidth: '0 0 0 6px',
|
||||
color: '#696cff'
|
||||
}"
|
||||
class="border-primary w-full justify-content-start"
|
||||
severity="info"
|
||||
>
|
||||
<div class="flex align-items-center">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
|
||||
<div class="ml-2">Always bet on Prime.</div>
|
||||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
</template>`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
<Message style="border: none">
|
||||
<template #container>
|
||||
<div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
|
||||
<div class="flex align-items-start">
|
||||
<i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
|
||||
<div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
|
||||
<div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
|
||||
<p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
|
||||
<span>Learn More</span>
|
||||
<i class="pi pi-arrow-right text-blue-900 ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message style="border: none">
|
||||
<template #container>
|
||||
<div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
|
||||
<div class="flex align-items-start">
|
||||
<i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
|
||||
<div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
|
||||
<div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
|
||||
<p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
|
||||
<span>Learn More</span>
|
||||
<i class="pi pi-arrow-right text-blue-900 ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message style="border: none">
|
||||
<template #container>
|
||||
<div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
|
||||
<div class="flex align-items-start">
|
||||
<i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
|
||||
<div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
|
||||
<div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
|
||||
<p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
|
||||
<span>Learn More</span>
|
||||
<i class="pi pi-arrow-right text-blue-900 ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</Message>
|
||||
</div>
|
||||
</template>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@ import DynamicDoc from '@/doc/message/DynamicDoc.vue';
|
|||
import ImportDoc from '@/doc/message/ImportDoc.vue';
|
||||
import SeverityDoc from '@/doc/message/SeverityDoc.vue';
|
||||
import StickyDoc from '@/doc/message/StickyDoc.vue';
|
||||
import TemplateDoc from '@/doc/message/TemplateDoc.vue';
|
||||
import PTComponent from '@/doc/message/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/message/theming/index.vue';
|
||||
|
||||
|
|
@ -54,11 +53,6 @@ export default {
|
|||
label: 'Custom Icon',
|
||||
component: CustomIconDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
Loading…
Reference in New Issue