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

Use a dynamic list

pull/5161/head
Cagatay Civici 2024-01-24 13:29:08 +03:00
parent 079589adab
commit c6858625bc
1 changed files with 39 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
doc/overlaypanel/BasicDoc.vue
View File

@ -26,36 +26,14 @@
<div> <div>
<span class="font-medium text-900 block mb-2">Team Members</span> <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"> <ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2"> <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/amyelsner.png" style="width: 32px" /> <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
<div> <div>
<span class="font-medium">Amy Elsner</span> <span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">amy@email.com</div> <div class="text-sm text-color-secondary">{{ member.email }}</div>
</div> </div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm"> <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span> <span>{{ member.role }}</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> <i class="pi pi-angle-down"></i>
</div> </div>
</li> </li>
@ -71,6 +49,11 @@
export default { export default {
data() { data() {
return { 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' }
],
code: { code: {
basic: ` basic: `
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" /> <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
@ -96,36 +79,14 @@ export default {
<div> <div>
<span class="font-medium text-900 block mb-2">Team Members</span> <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"> <ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2"> <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/amyelsner.png" style="width: 32px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
<div> <div>
<span class="font-medium">Amy Elsner</span> <span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">amy@email.com</div> <div class="text-sm text-color-secondary">{{ member.email }}</div>
</div> </div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm"> <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span> <span>{{ member.role }}</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> <i class="pi pi-angle-down"></i>
</div> </div>
</li> </li>
@ -160,36 +121,14 @@ export default {
<div> <div>
<span class="font-medium text-900 block mb-2">Team Members</span> <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"> <ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2"> <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/amyelsner.png" style="width: 32px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
<div> <div>
<span class="font-medium">Amy Elsner</span> <span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">amy@email.com</div> <div class="text-sm text-color-secondary">{{ member.email }}</div>
</div> </div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm"> <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span> <span>{{ member.role }}</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> <i class="pi pi-angle-down"></i>
</div> </div>
</li> </li>
@ -202,6 +141,15 @@ export default {
<script> <script>
export default { export default {
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' }
]
}
},
methods: { methods: {
toggle(event) { toggle(event) {
this.$refs.op.toggle(event); this.$refs.op.toggle(event);
@ -236,36 +184,14 @@ export default {
<div> <div>
<span class="font-medium text-900 block mb-2">Team Members</span> <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"> <ul class="list-none p-0 m-0 flex flex-column gap-3">
<li class="flex align-items-center gap-2"> <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/amyelsner.png" style="width: 32px" /> <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
<div> <div>
<span class="font-medium">Amy Elsner</span> <span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-color-secondary">amy@email.com</div> <div class="text-sm text-color-secondary">{{ member.email }}</div>
</div> </div>
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm"> <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
<span>Owner</span> <span>{{ member.role }}</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> <i class="pi pi-angle-down"></i>
</div> </div>
</li> </li>
@ -280,6 +206,11 @@ export default {
import { ref } from "vue"; import { ref } from "vue";
const op = ref(); const op = ref();
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' }
]);
const toggle = (event) => { const toggle = (event) => {
op.value.toggle(event); op.value.toggle(event);