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

Update icons demo

pull/5806/head
Cagatay Civici 2024-05-26 00:07:38 +03:00
parent ec8e4520e5
commit aef883944a
1 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
doc/button/IconsDoc.vue
View File

@ -2,12 +2,16 @@
<DocSectionText v-bind="$attrs">
<p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
</DocSectionText>
<div class="card flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-check" class="self-center" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" class="self-center" />
<Button label="Submit" icon="pi pi-check" iconPos="right" class="self-center" />
<Button label="Submit" icon="pi pi-check" iconPos="top" />
<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
<div class="card flex items-center gap-4 justify-center">
<div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" text />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
</div>
</div>
<DocSectionCode :code="code" />
</template>
@ -18,20 +22,24 @@ export default {
return {
code: {
basic: `
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<Button label="Submit" icon="pi pi-check" iconPos="top" />
<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
<Button label="Search" icon="pi pi-search" iconPos="top" text />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
`,
options: `
<template>
<div class="card flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<Button label="Submit" icon="pi pi-check" iconPos="top" />
<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
<div class="card flex items-center gap-4 justify-center">
<div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" text />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
</div>
</div>
</template>
@ -40,12 +48,16 @@ export default {
`,
composition: `
<template>
<div class="card flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-check" aria-label="Submit" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<Button label="Submit" icon="pi pi-check" iconPos="top" />
<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
<div class="card flex items-center gap-4 justify-center">
<div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" text />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
</div>
</div>
</template>