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,7 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Custom content inside a message is defined with the <i>default</i> slot.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message
|
||||
:style="{
|
||||
|
|
@ -18,14 +17,37 @@
|
|||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
code1: {
|
||||
basic: `<Message
|
||||
:style="{
|
||||
border: 'solid #696cff',
|
||||
|
|
@ -57,10 +79,7 @@ export default {
|
|||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>`,
|
||||
</template>`,
|
||||
composition: `<template>
|
||||
<div class="card">
|
||||
<Message
|
||||
|
|
@ -78,10 +97,68 @@ export default {
|
|||
</div>
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
</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>`
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import LongContentDoc from '@/doc/dialog/LongContentDoc';
|
|||
import MaximizableDoc from '@/doc/dialog/MaximizableDoc';
|
||||
import PositionDoc from '@/doc/dialog/PositionDoc';
|
||||
import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
|
||||
import TemplateDoc from '@/doc/dialog/TemplateDoc';
|
||||
import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
|
||||
import PTComponent from '@/doc/dialog/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/dialog/theming/index.vue';
|
||||
|
|
@ -44,6 +45,11 @@ export default {
|
|||
label: 'Without Modal',
|
||||
component: WithoutModalDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'responsive',
|
||||
label: 'Responsive',
|
||||
|
|
|
|||
Loading…
Reference in New Issue