primevue-mirror/doc/overlaypanel/BasicDoc.vue

230 lines
9.9 KiB
Vue
Raw Normal View History

2023-02-28 08:29:30 +00:00
<template>
<DocSectionText v-bind="$attrs">
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>
2023-02-28 08:29:30 +00:00
</DocSectionText>
<div class="card flex justify-content-center">
2024-01-24 10:00:53 +00:00
<Button type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
2023-02-28 08:29:30 +00:00
2024-02-13 07:26:25 +00:00
<OverlayPanel ref="op">
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">
2024-01-24 10:29:08 +00:00
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
2024-01-24 10:00:53 +00:00
<div>
2024-01-24 10:29:08 +00:00
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">{{ member.email }}</div>
2024-01-24 10:00:53 +00:00
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
2024-01-24 10:29:08 +00:00
<span>{{ member.role }}</span>
2024-01-24 10:00:53 +00:00
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
2023-02-28 08:29:30 +00:00
</OverlayPanel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
2024-01-24 10:29:08 +00:00
members: [
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
],
2023-02-28 08:29:30 +00:00
code: {
2023-09-22 12:54:14 +00:00
basic: `
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
2023-02-28 08:29:30 +00:00
<OverlayPanel ref="op">
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">
2024-01-24 10:29:08 +00:00
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
2024-01-24 10:00:53 +00:00
<div>
2024-01-24 10:29:08 +00:00
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">{{ member.email }}</div>
2024-01-24 10:00:53 +00:00
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
2024-01-24 10:29:08 +00:00
<span>{{ member.role }}</span>
2024-01-24 10:00:53 +00:00
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
2023-10-15 09:38:39 +00:00
</OverlayPanel>
`,
2023-09-22 12:54:14 +00:00
options: `
<template>
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">
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">
2024-01-24 10:29:08 +00:00
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
2024-01-24 10:00:53 +00:00
<div>
2024-01-24 10:29:08 +00:00
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">{{ member.email }}</div>
2024-01-24 10:00:53 +00:00
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
2024-01-24 10:29:08 +00:00
<span>{{ member.role }}</span>
2024-01-24 10:00:53 +00:00
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
2023-02-28 08:29:30 +00:00
</OverlayPanel>
</div>
</template>
<script>
export default {
2024-01-24 10:29:08 +00:00
data() {
return {
members: [
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
]
}
},
2023-02-28 08:29:30 +00:00
methods: {
toggle(event) {
this.$refs.op.toggle(event);
}
}
};
2023-10-15 09:38:39 +00:00
<\/script>
`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
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">
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">
2024-01-24 10:29:08 +00:00
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
2024-01-24 10:00:53 +00:00
<div>
2024-01-24 10:29:08 +00:00
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">{{ member.email }}</div>
2024-01-24 10:00:53 +00:00
</div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
2024-01-24 10:29:08 +00:00
<span>{{ member.role }}</span>
2024-01-24 10:00:53 +00:00
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
2023-02-28 08:29:30 +00:00
</OverlayPanel>
</div>
</template>
<script setup>
import { ref } from "vue";
const op = ref();
2024-01-24 10:29:08 +00:00
const members = ref([
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
]);
2023-11-02 06:54:55 +00:00
2023-02-28 08:29:30 +00:00
const toggle = (event) => {
op.value.toggle(event);
}
2023-10-15 09:38:39 +00:00
<\/script>
`
2023-02-28 08:29:30 +00:00
}
};
},
methods: {
toggle(event) {
this.$refs.op.toggle(event);
}
}
};
</script>