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>
<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>
<div class="card">
<Fieldset>
<template #legend>
<div class="flex align-items-center text-primary">
<span class="pi pi-user mr-2"></span>
<span class="font-bold text-lg">User Details</span>
<div class="flex align-items-center gap-2 px-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<p class="m-0">
@ -27,9 +27,9 @@ export default {
basic: `
<Fieldset>
<template #legend>
<div class="flex align-items-center text-primary">
<span class="pi pi-user mr-2"></span>
<span class="font-bold text-lg">User Details</span>
<div class="flex align-items-center gap-2 px-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<p class="m-0">
@ -43,9 +43,9 @@ export default {
<div class="card">
<Fieldset>
<template #legend>
<div class="flex align-items-center text-primary">
<span class="pi pi-user mr-2"></span>
<span class="font-bold text-lg">User Details</span>
<div class="flex align-items-center gap-2 px-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<p class="m-0">
@ -64,9 +64,9 @@ export default {
<div class="card">
<Fieldset>
<template #legend>
<div class="flex align-items-center text-primary">
<span class="pi pi-user mr-2"></span>
<span class="font-bold text-lg">User Details</span>
<div class="flex align-items-center gap-2 px-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<p class="m-0">

5
doc/fieldset/ToggleableDoc.vue
View File

@ -1,9 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<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>
<p>Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled.</p>
</DocSectionText>
<div class="card">
<Fieldset legend="Header" :toggleable="true">