vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Migrated demos

Browse source
This commit is contained in:
Cagatay Civici 2024-05-20 15:14:38 +03:00
parent 1f86b4906f
commit 48f92d3966
454 changed files with 3920 additions and 3920 deletions
Download patch file Download diff file Expand all files Collapse all files

12
doc/togglebutton/BasicDoc.vue
View file

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
</div>
<DocSectionCode :code="code" />
</template>
@ -19,8 +19,8 @@ export default {
`,
options: `
<template>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
</div>
</template>
@ -36,8 +36,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
</div>
</template>

14
doc/togglebutton/CustomizedDoc.vue
View file

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
</div>
<DocSectionCode :code="code" />
</template>
@ -16,13 +16,13 @@ export default {
code: {
basic: `
<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
</div>
</template>
@ -38,9 +38,9 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
</div>
</template>

14
doc/togglebutton/DisabledDoc.vue
View file

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
</div>
<DocSectionCode :code="code" />
</template>
@ -16,13 +16,13 @@ export default {
code: {
basic: `
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
class="w-full sm:w-10rem" aria-label="Confirmation" />
class="w-full sm:w-40" aria-label="Confirmation" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
class="w-full sm:w-10rem" aria-label="Confirmation" />
class="w-full sm:w-40" aria-label="Confirmation" />
</div>
</template>
@ -38,9 +38,9 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<div class="card flex justify-center">
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
class="w-full sm:w-10rem" aria-label="Confirmation" />
class="w-full sm:w-40" aria-label="Confirmation" />
</div>
</template>

14
doc/togglebutton/InvalidDoc.vue
View file

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
</div>
<DocSectionCode :code="code" />
</template>
@ -15,12 +15,12 @@ export default {
checked: false,
code: {
basic: `
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
</div>
</template>
@ -36,8 +36,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
<div class="card flex justify-center">
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-40" aria-label="Confirmation" />
</div>
</template>