Update message demos
Cagatay Civici
parent
d9f6b813ad
commit
311678359b
|
|
@ -39,6 +39,13 @@ export default {
|
||||||
visible: true
|
visible: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
sticky(newValue) {
|
||||||
|
if (!newValue) {
|
||||||
|
this.closeAfterDelay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (!this.sticky) {
|
if (!this.sticky) {
|
||||||
this.closeAfterDelay();
|
this.closeAfterDelay();
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<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>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message :closable="false">Message Content</Message>
|
<Message :closable="false">Not Closable</Message>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -14,12 +14,12 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Message :closable="false">Message Content</Message>
|
<Message :closable="false">Not Closable</Message>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message :closable="false">Message Content</Message>
|
<Message :closable="false">Not Closable</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -29,7 +29,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message :closable="false">Message Content</Message>
|
<Message :closable="false">Not Closable</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<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>
|
</DocSectionText>
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -14,12 +20,24 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
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: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -29,7 +47,13 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,10 @@
|
||||||
<p>The <i>severity</i> option specifies the type of the message.</p>
|
<p>The <i>severity</i> option specifies the type of the message.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message severity="success">Success Message Content</Message>
|
<Message severity="success">Success Message</Message>
|
||||||
<Message severity="info">Info Message Content</Message>
|
<Message severity="info">Info Message</Message>
|
||||||
<Message severity="warn">Warning Message Content</Message>
|
<Message severity="warn">Warning Message</Message>
|
||||||
<Message severity="error">Error Message Content</Message>
|
<Message severity="error">Error Message</Message>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -17,18 +17,18 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Message severity="success">Success Message Content</Message>
|
<Message severity="success">Success Message</Message>
|
||||||
<Message severity="info">Info Message Content</Message>
|
<Message severity="info">Info Message</Message>
|
||||||
<Message severity="warn">Warning Message Content</Message>
|
<Message severity="warn">Warning Message</Message>
|
||||||
<Message severity="error">Error Message Content</Message>
|
<Message severity="error">Error Message</Message>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message severity="success">Success Message Content</Message>
|
<Message severity="success">Success Message</Message>
|
||||||
<Message severity="info">Info Message Content</Message>
|
<Message severity="info">Info Message</Message>
|
||||||
<Message severity="warn">Warning Message Content</Message>
|
<Message severity="warn">Warning Message</Message>
|
||||||
<Message severity="error">Error Message Content</Message>
|
<Message severity="error">Error Message</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -38,10 +38,10 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message severity="success">Success Message Content</Message>
|
<Message severity="success">Success Message</Message>
|
||||||
<Message severity="info">Info Message Content</Message>
|
<Message severity="info">Info Message</Message>
|
||||||
<Message severity="warn">Warning Message Content</Message>
|
<Message severity="warn">Warning Message</Message>
|
||||||
<Message severity="error">Error Message Content</Message>
|
<Message severity="error">Error Message</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<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>
|
||||||
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>
|
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message severity="success" sticky>Success Message Content</Message>
|
<Button label="Turn off Sticky" @click="sticky = false" />
|
||||||
<Message severity="info" sticky>Info Message Content</Message>
|
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||||
<Message severity="error" sticky>Error Message Content</Message>
|
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||||
|
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -18,37 +16,51 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
sticky: true,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Message severity="success" sticky>Success Message Content</Message>
|
<Button label="Turn off Sticky" @click="sticky = false" />
|
||||||
<Message severity="info" sticky>Info Message Content</Message>
|
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||||
<Message severity="error" sticky>Error Message Content</Message>
|
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||||
|
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message severity="success" sticky>Success Message Content</Message>
|
<Button label="Turn off Sticky" @click="sticky = false" />
|
||||||
<Message severity="info" sticky>Info Message Content</Message>
|
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||||
<Message severity="error" sticky>Error Message Content</Message>
|
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||||
|
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sticky: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
<\/script>
|
<\/script>
|
||||||
`,
|
`,
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message severity="success" sticky>Success Message Content</Message>
|
<Button label="Turn off Sticky" @click="sticky.value = false" />
|
||||||
<Message severity="info" sticky>Info Message Content</Message>
|
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
|
||||||
<Message severity="warn" sticky>Warning Message Content</Message>
|
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
|
||||||
<Message severity="error" sticky>Error Message Content</Message>
|
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
|
||||||
|
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
let sticky = ref(true);
|
||||||
<\/script>
|
<\/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 ImportDoc from '@/doc/message/ImportDoc.vue';
|
||||||
import SeverityDoc from '@/doc/message/SeverityDoc.vue';
|
import SeverityDoc from '@/doc/message/SeverityDoc.vue';
|
||||||
import StickyDoc from '@/doc/message/StickyDoc.vue';
|
import StickyDoc from '@/doc/message/StickyDoc.vue';
|
||||||
import TemplateDoc from '@/doc/message/TemplateDoc.vue';
|
|
||||||
import PTComponent from '@/doc/message/pt/index.vue';
|
import PTComponent from '@/doc/message/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/message/theming/index.vue';
|
import ThemingDoc from '@/doc/message/theming/index.vue';
|
||||||
|
|
||||||
|
|
@ -54,11 +53,6 @@ export default {
|
||||||
label: 'Custom Icon',
|
label: 'Custom Icon',
|
||||||
component: CustomIconDoc
|
component: CustomIconDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'template',
|
|
||||||
label: 'Template',
|
|
||||||
component: TemplateDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue