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

Update template demo

pull/4683/head
Cagatay Civici 2023-10-23 17:30:41 +03:00
parent 1961be7020
commit eab5018ab2
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
doc/fieldset/TemplateDoc.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Legend section can also be defined with custom content instead of primitive values.</p> <p>Legend section can be customized with custom content using templating.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center text-primary"> <div class="flex align-items-center gap-2 px-2">
<span class="pi pi-user mr-2"></span> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-lg">User Details</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <p class="m-0">
@ -27,9 +27,9 @@ export default {
basic: ` basic: `
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center text-primary"> <div class="flex align-items-center gap-2 px-2">
<span class="pi pi-user mr-2"></span> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-lg">User Details</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <p class="m-0">
@ -43,9 +43,9 @@ export default {
<div class="card"> <div class="card">
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center text-primary"> <div class="flex align-items-center gap-2 px-2">
<span class="pi pi-user mr-2"></span> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-lg">User Details</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <p class="m-0">
@ -64,9 +64,9 @@ export default {
<div class="card"> <div class="card">
<Fieldset> <Fieldset>
<template #legend> <template #legend>
<div class="flex align-items-center text-primary"> <div class="flex align-items-center gap-2 px-2">
<span class="pi pi-user mr-2"></span> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-lg">User Details</span> <span class="font-bold">Amy Elsner</span>
</div> </div>
</template> </template>
<p class="m-0"> <p class="m-0">

5
doc/fieldset/ToggleableDoc.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled.</p>
Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled. A toggleable fieldset can either be used as a Controlled or Uncontrolled component. In controlled mode a binding to <i>collapsed</i>property
along with <i>toggle</i> event are needed to manage the content state.
</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Fieldset legend="Header" :toggleable="true"> <Fieldset legend="Header" :toggleable="true">