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

12
doc/selectbutton/InvalidDoc.vue
View File

@ -12,8 +12,8 @@
export default {
data() {
return {
value: 'Off',
options: ['Off', 'On'],
value: 'One-Way',
options: ['One-Way', 'Return'],
code: {
basic: `
<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
@ -29,8 +29,8 @@ export default {
export default {
data() {
return {
value: 'off',
options: ['Off', 'On']
value: 'One-Way',
options: ['One-Way', 'Return'],
}
}
};
@ -46,8 +46,8 @@ export default {
<script setup>
import { ref } from 'vue';
const value = ref('off');
const options = ref(['Off', 'On']);
const value = ref('One-Way');
const options = ref(['One-Way', 'Return']);
<\/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>
</DocSectionText>
<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>
<DocSectionCode :code="code" />
</template>
@ -15,12 +15,12 @@ export default {
checked: false,
code: {
basic: `
<ToggleButton v-model="checked" />
<ToggleButton v-model="checked" onLabel="On" offLabel="Off" />
`,
options: `
<template>
<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>
</template>
@ -37,7 +37,7 @@ export default {
composition: `
<template>
<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>
</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>
</DocSectionText>
<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>
<DocSectionCode :code="code" />
</template>
@ -15,14 +15,14 @@ export default {
checked: false,
code: {
basic: `
<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
<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" />
`,
options: `
<template>
<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" />
<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>
</template>
@ -39,8 +39,8 @@ export default {
composition: `
<template>
<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" />
<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>
</template>