container slot demo for Dialog and Message
Tuğçe Küçükoğlu
parent
80fc10d8ce
commit
3be7dcd539
|
|
@ -0,0 +1,144 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p><i>container</i> templating allows customizing the Dialog component.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
|
||||||
|
|
||||||
|
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
|
||||||
|
<template #container="slotProps">
|
||||||
|
<div class="surface-card border-round shadow-2 p-4">
|
||||||
|
<div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
|
||||||
|
<p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
|
||||||
|
<div class="flex mb-4 flex-column lg:flex-row">
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Guests</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
|
||||||
|
<div class="text-600 mb-3">Date</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">24/05/2024</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Time</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">14:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
code: {
|
||||||
|
basic: `<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
|
||||||
|
|
||||||
|
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
|
||||||
|
<template #container="slotProps">
|
||||||
|
<div class="surface-card border-round shadow-2 p-4">
|
||||||
|
<div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
|
||||||
|
<p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
|
||||||
|
<div class="flex mb-4 flex-column lg:flex-row">
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Guests</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
|
||||||
|
<div class="text-600 mb-3">Date</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">24/05/2024</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Time</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">14:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dialog>`,
|
||||||
|
options: `<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
|
||||||
|
|
||||||
|
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
|
||||||
|
<template #container="slotProps">
|
||||||
|
<div class="surface-card border-round shadow-2 p-4">
|
||||||
|
<div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
|
||||||
|
<p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
|
||||||
|
<div class="flex mb-4 flex-column lg:flex-row">
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Guests</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
|
||||||
|
<div class="text-600 mb-3">Date</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">24/05/2024</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Time</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">14:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>`,
|
||||||
|
composition: `<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
|
||||||
|
|
||||||
|
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
|
||||||
|
<template #container="slotProps">
|
||||||
|
<div class="surface-card border-round shadow-2 p-4">
|
||||||
|
<div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
|
||||||
|
<p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
|
||||||
|
<div class="flex mb-4 flex-column lg:flex-row">
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Guests</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
|
||||||
|
<div class="text-600 mb-3">Date</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">24/05/2024</span>
|
||||||
|
</div>
|
||||||
|
<div class="surface-50 p-3 flex-auto">
|
||||||
|
<div class="text-600 mb-3">Time</div>
|
||||||
|
<span class="text-blue-600 font-medium text-xl">14:30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,31 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Custom content inside a message is defined with the <i>default</i> slot.</p>
|
<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 Dialog 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>
|
</DocSectionText>
|
||||||
<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="code" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
code: {
|
code1: {
|
||||||
basic: `<Message
|
basic: `<Message
|
||||||
:style="{
|
:style="{
|
||||||
border: 'solid #696cff',
|
border: 'solid #696cff',
|
||||||
|
|
@ -57,10 +79,7 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</Message>
|
</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>`,
|
||||||
|
|
||||||
<script>
|
|
||||||
<\/script>`,
|
|
||||||
composition: `<template>
|
composition: `<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Message
|
<Message
|
||||||
|
|
@ -78,10 +97,68 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</Message>
|
</Message>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>`
|
||||||
|
},
|
||||||
<script setup>
|
code2: {
|
||||||
<\/script>`
|
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>`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import LongContentDoc from '@/doc/dialog/LongContentDoc';
|
||||||
import MaximizableDoc from '@/doc/dialog/MaximizableDoc';
|
import MaximizableDoc from '@/doc/dialog/MaximizableDoc';
|
||||||
import PositionDoc from '@/doc/dialog/PositionDoc';
|
import PositionDoc from '@/doc/dialog/PositionDoc';
|
||||||
import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
|
import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
|
||||||
|
import TemplateDoc from '@/doc/dialog/TemplateDoc';
|
||||||
import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
|
import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
|
||||||
import PTComponent from '@/doc/dialog/pt/index.vue';
|
import PTComponent from '@/doc/dialog/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/dialog/theming/index.vue';
|
import ThemingDoc from '@/doc/dialog/theming/index.vue';
|
||||||
|
|
@ -44,6 +45,11 @@ export default {
|
||||||
label: 'Without Modal',
|
label: 'Without Modal',
|
||||||
component: WithoutModalDoc
|
component: WithoutModalDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'template',
|
||||||
|
label: 'Template',
|
||||||
|
component: TemplateDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'responsive',
|
id: 'responsive',
|
||||||
label: 'Responsive',
|
label: 'Responsive',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue