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

Update toggle demos

pull/5161/head
Cagatay Civici 2024-01-24 10:15:33 +03:00
parent c9901c3c0c
commit b2b65980fa
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/selectbutton/BasicDoc.vue
View File

@ -15,8 +15,8 @@
export default { export default {
data() { data() {
return { return {
value: 'Off', value: 'One-Way',
options: ['Off', 'On'], options: ['One-Way', 'Return'],
code: { code: {
basic: ` basic: `
<SelectButton v-model="value" :options="options" aria-labelledby="basic" /> <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
@ -32,8 +32,8 @@ export default {
export default { export default {
data() { data() {
return { return {
value: 'Off', value: 'One-Way',
options: ['Off', 'On'] options: ['One-Way', 'Return']
} }
} }
}; };
@ -49,8 +49,8 @@ export default {
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const value = ref('Off'); const value = ref('One-Way');
const options = ref(['Off', 'On']); const options = ref(['One-Way', 'Return']);
<\/script> <\/script>
` `
} }

12
doc/selectbutton/InvalidDoc.vue
View File

@ -12,8 +12,8 @@
export default { export default {
data() { data() {
return { return {
value: 'Off', value: 'One-Way',
options: ['Off', 'On'], options: ['One-Way', 'Return'],
code: { code: {
basic: ` basic: `
<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" /> <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
@ -29,8 +29,8 @@ export default {
export default { export default {
data() { data() {
return { return {
value: 'off', value: 'One-Way',
options: ['Off', 'On'] options: ['One-Way', 'Return'],
} }
} }
}; };
@ -46,8 +46,8 @@ export default {
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const value = ref('off'); const value = ref('One-Way');
const options = ref(['Off', 'On']); const options = ref(['One-Way', 'Return']);
<\/script> <\/script>
` `
} }

8
doc/togglebutton/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p> <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" class="w-8rem" /> <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
checked: false, checked: false,
code: { code: {
basic: ` basic: `
<ToggleButton v-model="checked" /> <ToggleButton v-model="checked" onLabel="On" offLabel="Off" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" class="w-8rem" /> <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" class="w-8rem" /> <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
</div> </div>
</template> </template>

14
doc/togglebutton/CustomizedDoc.vue
View File

@ -3,7 +3,7 @@
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p> <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" aria-label="do you confirm" /> <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> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,14 +15,14 @@ export default {
checked: false, checked: false,
code: { code: {
basic: ` basic: `
<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject" <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" /> offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" /> offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
</div> </div>
</template> </template>
@ -39,8 +39,8 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock"
onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" /> offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
</div> </div>
</template> </template>