mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +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
52
doc/checkbox/AccessibilityDoc.vue
Normal file
52
doc/checkbox/AccessibilityDoc.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using
|
||||
<i>aria-labelledby</i>, <i>aria-label</i> props.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<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 checkbox.</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: `
|
||||
<label for="chkbox1">Remember Me</label>
|
||||
<Checkbox inputId="chkbox1" />
|
||||
|
||||
<span id="chkbox2">Remember Me</span>
|
||||
<Checkbox aria-labelledby="chkbox2" />
|
||||
|
||||
<Checkbox aria-label="Remember Me" />`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
51
doc/checkbox/BasicDoc.vue
Normal file
51
doc/checkbox/BasicDoc.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Binary checkbox is used as a controlled input with <i>v-model</i> and <i>binary</i> properties.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Checkbox v-model="checked" :binary="true" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
51
doc/checkbox/DisabledDoc.vue
Normal file
51
doc/checkbox/DisabledDoc.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<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">
|
||||
<Checkbox v-model="checked" disabled />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Checkbox v-model="checked" disabled />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
87
doc/checkbox/DynamicDoc.vue
Normal file
87
doc/checkbox/DynamicDoc.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Checkboxes can be generated using a list of values.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="flex flex-column gap-3">
|
||||
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key" class="ml-2">{{ category.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCategories: ['Marketing'],
|
||||
categories: [
|
||||
{ name: 'Accounting', key: 'A' },
|
||||
{ name: 'Marketing', key: 'M' },
|
||||
{ name: 'Production', key: 'P' },
|
||||
{ name: 'Research', key: 'R' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="flex flex-column gap-3">
|
||||
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCategories: ['Marketing'],
|
||||
categories: [
|
||||
{ name: "Accounting", key: "A" },
|
||||
{ name: "Marketing", key: "M" },
|
||||
{ name: "Production", key: "P" },
|
||||
{ name: "Research", key: "R" }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="flex flex-column gap-3">
|
||||
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
|
||||
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
|
||||
<label :for="category.key">{{ category.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const categories = ref([
|
||||
{name: "Accounting", key: "A"},
|
||||
{name: "Marketing", key: "M"},
|
||||
{name: "Production", key: "P"},
|
||||
{name: "Research", key: "R"}
|
||||
]);
|
||||
const selectedCategories = ref(['Marketing']);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
113
doc/checkbox/GroupDoc.vue
Normal file
113
doc/checkbox/GroupDoc.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Multiple checkboxes can be grouped together.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-content-center gap-3">
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pizza: null,
|
||||
code: {
|
||||
basic: `
|
||||
<div class="card flex flex-wrap justify-content-center gap-3">
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
</div>
|
||||
</div>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-content-center gap-3">
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pizza: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-content-center gap-3">
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="ml-2"> Cheese </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="ml-2"> Mushroom </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="ml-2"> Pepper </label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="ml-2"> Onion </label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
const pizza = ref();
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
17
doc/checkbox/ImportDoc.vue
Normal file
17
doc/checkbox/ImportDoc.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import Checkbox from 'primevue/checkbox';`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
51
doc/checkbox/InvalidDoc.vue
Normal file
51
doc/checkbox/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">
|
||||
<Checkbox v-model="checked" class="p-invalid" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Checkbox v-model="checked" class="p-invalid" />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" class="p-invalid" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox v-model="checked" class="p-invalid" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
doc/checkbox/StyleDoc.vue
Normal file
30
doc/checkbox/StyleDoc.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<DocSectionText id="style" label="Style" v-bind="$attrs">
|
||||
<p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> 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-checkbox</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-checkbox-box</td>
|
||||
<td>Container of icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-checkbox-icon</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue