mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Merged new Docs and Demos
This commit is contained in:
Cagatay Civici
parent
296cc217fb
commit
dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
51
doc/togglebutton/AccessibilityDoc.vue
Normal file
51
doc/togglebutton/AccessibilityDoc.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props,
|
||||
it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
|
||||
that does not change related to state.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i>tab</i></td>
|
||||
<td>Moves focus to the button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>space</i></td>
|
||||
<td>Toggles the checked state.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<span id="rememberme">Remember Me</span>
|
||||
<ToggleButton aria-labelledby="rememberme" />
|
||||
|
||||
<ToggleButton aria-label="Remember Me" />`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
51
doc/togglebutton/BasicDoc.vue
Normal file
51
doc/togglebutton/BasicDoc.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<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-8rem" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<ToggleButton v-model="checked" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ToggleButton v-model="checked" class="w-8rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ToggleButton v-model="checked" class="w-8rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
54
doc/togglebutton/CustomizedDoc.vue
Normal file
54
doc/togglebutton/CustomizedDoc.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<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="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" aria-label="do you confirm" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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" />`,
|
||||
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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
54
doc/togglebutton/DisabledDoc.vue
Normal file
54
doc/togglebutton/DisabledDoc.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
|
||||
class="w-full sm:w-10rem" aria-label="Confirmation" />`,
|
||||
options: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
16
doc/togglebutton/ImportDoc.vue
Normal file
16
doc/togglebutton/ImportDoc.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `import ToggleButton from 'primevue/togglebutton';`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
51
doc/togglebutton/InvalidDoc.vue
Normal file
51
doc/togglebutton/InvalidDoc.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
code: {
|
||||
basic: `
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
doc/togglebutton/StyleDoc.vue
Normal file
29
doc/togglebutton/StyleDoc.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<DocSectionText id="style" label="Style" v-bind="$attrs">
|
||||
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
|
||||
</DocSectionText>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-togglebutton</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-icon</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-text</td>
|
||||
<td>Label element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue