vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity
primevue-mirror/doc/overlaypanel/BasicDoc.vue

299 lines
14 KiB
Vue
Raw Normal View History

Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
<template>
<DocSectionText v-bind="$attrs">
Updated overlay panel demos
2023-11-02 06:54:55 +00:00
<p>OverlayPanel is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
</DocSectionText>
<div class="card flex justify-content-center">
Add new overlay panel demo
2024-01-24 10:00:53 +00:00
<Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
<OverlayPanel ref="op">
Add new overlay panel demo
2024-01-24 10:00:53 +00:00
<div class="flex flex-column gap-3 w-25rem">
<div>
<span class="font-medium text-900 block mb-2">Share this document</span>
<InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
<InputGroupAddon>
<i class="pi pi-copy"></i>
</InputGroupAddon>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup>
<Chips disabled></Chips>
<Button label="Invite" icon="pi pi-users"></Button>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
<div>
<span class="font-medium">Amy Elsner</span>
<div class="text-sm text-color-secondary">amy@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
<div>
<span class="font-medium">Bernardo Dominic</span>
<div class="text-sm text-color-secondary">bernardo@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Editor</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
<div>
<span class="font-medium">Ioni Bowcher Elsner</span>
<div class="text-sm text-color-secondary">ioni@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Viewer</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
</OverlayPanel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
Code representation style fixes
2023-09-22 12:54:14 +00:00
basic: `
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
<OverlayPanel ref="op">
Add new overlay panel demo
2024-01-24 10:00:53 +00:00
<div class="flex flex-column gap-3 w-25rem">
<div>
<span class="font-medium text-900 block mb-2">Share this document</span>
<InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
<InputGroupAddon>
<i class="pi pi-copy"></i>
</InputGroupAddon>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup>
<Chips disabled></Chips>
<Button label="Invite" icon="pi pi-users"></Button>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
<div>
<span class="font-medium">Amy Elsner</span>
<div class="text-sm text-color-secondary">amy@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
<div>
<span class="font-medium">Bernardo Dominic</span>
<div class="text-sm text-color-secondary">bernardo@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Editor</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
<div>
<span class="font-medium">Ioni Bowcher Elsner</span>
<div class="text-sm text-color-secondary">ioni@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Viewer</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
New code highlight spacing
2023-10-15 09:38:39 +00:00
</OverlayPanel>
`,
Code representation style fixes
2023-09-22 12:54:14 +00:00
options: `
<template>
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
<div class="card flex justify-content-center">
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op">
Add new overlay panel demo
2024-01-24 10:00:53 +00:00
<div class="flex flex-column gap-3 w-25rem">
<div>
<span class="font-medium text-900 block mb-2">Share this document</span>
<InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
<InputGroupAddon>
<i class="pi pi-copy"></i>
</InputGroupAddon>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup>
<Chips disabled></Chips>
<Button label="Invite" icon="pi pi-users"></Button>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
<div>
<span class="font-medium">Amy Elsner</span>
<div class="text-sm text-color-secondary">amy@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
<div>
<span class="font-medium">Bernardo Dominic</span>
<div class="text-sm text-color-secondary">bernardo@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Editor</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
<div>
<span class="font-medium">Ioni Bowcher Elsner</span>
<div class="text-sm text-color-secondary">ioni@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Viewer</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
</OverlayPanel>
</div>
</template>
<script>
export default {
methods: {
toggle(event) {
this.$refs.op.toggle(event);
}
}
};
New code highlight spacing
2023-10-15 09:38:39 +00:00
<\/script>
`,
Code representation style fixes
2023-09-22 12:54:14 +00:00
composition: `
<template>
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
<div class="card flex justify-content-center">
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op">
Add new overlay panel demo
2024-01-24 10:00:53 +00:00
<div class="flex flex-column gap-3 w-25rem">
<div>
<span class="font-medium text-900 block mb-2">Share this document</span>
<InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem"></InputText>
<InputGroupAddon>
<i class="pi pi-copy"></i>
</InputGroupAddon>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Invite Member</span>
<InputGroup>
<Chips disabled></Chips>
<Button label="Invite" icon="pi pi-users"></Button>
</InputGroup>
</div>
<div>
<span class="font-medium text-900 block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
<div>
<span class="font-medium">Amy Elsner</span>
<div class="text-sm text-color-secondary">amy@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
<div>
<span class="font-medium">Bernardo Dominic</span>
<div class="text-sm text-color-secondary">bernardo@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Editor</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
<li class="flex align-items-center gap-2">
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
<div>
<span class="font-medium">Ioni Bowcher Elsner</span>
<div class="text-sm text-color-secondary">ioni@email.com</div>
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Viewer</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
</OverlayPanel>
</div>
</template>
<script setup>
import { ref } from "vue";
const op = ref();
Updated overlay panel demos
2023-11-02 06:54:55 +00:00
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
const toggle = (event) => {
op.value.toggle(event);
}
New code highlight spacing
2023-10-15 09:38:39 +00:00
<\/script>
`
Merged new Docs and Demos
2023-02-28 08:29:30 +00:00
}
};
},
methods: {
toggle(event) {
this.$refs.op.toggle(event);
}
}
};
</script>