mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +00:00
Client only tags added to AppDocs for ssr
This commit is contained in:
Bahadır Sofuoğlu
parent
b8e4ec13b3
commit
33b9b5e3a5
139 changed files with 23111 additions and 22916 deletions
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
|
|
@ -405,8 +406,8 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value of
|
||||
the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
|
||||
Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
|
||||
value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
|
||||
</p>
|
||||
<p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
|
||||
|
||||
|
|
@ -472,7 +473,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import AutoComplete from 'primevue/autocomplete';
|
||||
|
|
@ -45,8 +46,8 @@ export default {
|
|||
|
||||
<h5>Dropdown</h5>
|
||||
<p>
|
||||
Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to send
|
||||
a query with an empty string whereas "current" setting sends a query with the current value of the input.
|
||||
Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to
|
||||
send a query with an empty string whereas "current" setting sends a query with the current value of the input.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" />
|
||||
|
|
@ -62,8 +63,8 @@ export default {
|
|||
|
||||
<h5>Objects</h5>
|
||||
<p>
|
||||
AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
|
||||
Country object that has name and code fields such as {name:"United States",code:"USA"}.
|
||||
AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with
|
||||
a Country object that has name and code fields such as {name:"United States",code:"USA"}.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<AutoComplete optionLabel="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
|
||||
|
|
@ -617,13 +618,13 @@ export default {
|
|||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
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. The input element has <i>combobox</i> role in addition to
|
||||
<i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
|
||||
reader which option to read during keyboard navigation within the popup list.
|
||||
<i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct
|
||||
screen reader which option to read during keyboard navigation within the popup list.
|
||||
</p>
|
||||
<p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
|
||||
<p>
|
||||
The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
|
||||
element.
|
||||
The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the
|
||||
input element.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -779,7 +780,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Avatar from 'primevue/avatar';
|
||||
|
|
@ -221,7 +222,8 @@ import AvatarGroup from 'primevue/avatargroup';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Badge can either be used as a standalone component or as a directive.</p>
|
||||
|
||||
|
|
@ -200,7 +201,8 @@ app.directive('badge', BadgeDirective);
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import BlockUI from 'primevue/blockui';
|
||||
|
|
@ -15,8 +16,8 @@ import BlockUI from 'primevue/blockui';
|
|||
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is
|
||||
set to false.
|
||||
BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable
|
||||
is set to false.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<BlockUI :blocked="blockedPanel">
|
||||
|
|
@ -146,7 +147,8 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
|
||||
BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live
|
||||
regions.
|
||||
</p>
|
||||
|
||||
<h5>Keyboard Support</h5>
|
||||
|
|
@ -154,7 +156,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Breadcrumb from 'primevue/breadcrumb';
|
||||
|
|
@ -187,7 +188,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Button from 'primevue/button';
|
||||
|
|
@ -115,8 +116,8 @@ import Button from 'primevue/button';
|
|||
|
||||
<h5>Sizes</h5>
|
||||
<p>
|
||||
2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
|
||||
scaling see the <router-link to="/theming">theming</router-link> page.
|
||||
2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for
|
||||
global scaling see the <router-link to="/theming">theming</router-link> page.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
|
||||
|
|
@ -293,7 +294,8 @@ import Button from 'primevue/button';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Calendar from 'primevue/calendar';
|
||||
|
|
@ -41,8 +42,8 @@ export default {
|
|||
|
||||
<h5>Selection Mode</h5>
|
||||
<p>
|
||||
By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of selectable
|
||||
dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
|
||||
By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of
|
||||
selectable dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -51,7 +52,9 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>DateFormat</h5>
|
||||
<p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p>
|
||||
<p>
|
||||
Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
<Calendar v-model="value" dateFormat="dd.mm.yy" />
|
||||
|
|
@ -711,8 +714,8 @@ export default {
|
|||
</p>
|
||||
<p>
|
||||
The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
|
||||
<i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended
|
||||
to the label to be able to notify users about the current value.
|
||||
<i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and
|
||||
appended to the label to be able to notify users about the current value.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -899,7 +902,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Card from 'primevue/card';
|
||||
|
|
@ -108,8 +109,8 @@ import Card from 'primevue/card';
|
|||
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
|
||||
to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
|
||||
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
|
||||
require to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -124,7 +125,8 @@ import Card from 'primevue/card';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Carousel from 'primevue/carousel';
|
||||
|
|
@ -117,7 +118,9 @@ data() {
|
|||
</code></pre>
|
||||
|
||||
<h5>AutoPlay and Circular</h5>
|
||||
<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
|
||||
<p>
|
||||
When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000">
|
||||
<template #header>
|
||||
|
|
@ -326,13 +329,13 @@ data() {
|
|||
</p>
|
||||
|
||||
<p>
|
||||
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of
|
||||
the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
|
||||
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the
|
||||
<i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by default
|
||||
respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
|
||||
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by
|
||||
default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
|
||||
</p>
|
||||
|
||||
<p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.</p>
|
||||
|
|
@ -427,7 +430,8 @@ data() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import CascadeSelect from 'primevue/cascadeselect';
|
||||
|
|
@ -488,12 +489,13 @@ data() {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
|
||||
The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
|
||||
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
|
||||
<i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
|
||||
</p>
|
||||
<p>
|
||||
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
|
||||
<i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
|
||||
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
|
||||
<i>aria-selected</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and
|
||||
added to each treeitem.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -610,7 +612,8 @@ data() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
|
||||
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Checkbox from 'primevue/checkbox';
|
||||
|
|
@ -256,7 +257,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Chip from 'primevue/chip';
|
||||
|
|
@ -171,7 +172,8 @@ import Chip from 'primevue/chip';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Chips from 'primevue/chips';
|
||||
|
|
@ -211,8 +212,8 @@ import Chips from 'primevue/chips';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
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. Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to
|
||||
horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
|
||||
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. Chip list uses <i>listbox</i> role with
|
||||
<i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -284,7 +285,8 @@ import Chips from 'primevue/chips';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import ColorPicker from 'primevue/colorpicker';
|
||||
|
|
@ -206,8 +207,8 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
|
||||
In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
|
||||
Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen
|
||||
readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
|
||||
</p>
|
||||
|
||||
<h6>Closed State Keyboard Support of Popup ColorPicker</h6>
|
||||
|
|
@ -301,7 +302,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
|
||||
<h5>ConfirmationService</h5>
|
||||
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
||||
<pre v-code.script><code>
|
||||
|
|
@ -26,8 +27,8 @@ import ConfirmDialog from 'primevue/confirmdialog';
|
|||
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared by
|
||||
any component within the application.
|
||||
ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared
|
||||
by any component within the application.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
|
|
@ -357,8 +358,8 @@ export default {
|
|||
</p>
|
||||
|
||||
<p>
|
||||
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
|
||||
trigger and the dialog is defined.
|
||||
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between
|
||||
the trigger and the dialog is defined.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -449,7 +450,8 @@ setup() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
|
||||
<h5>ConfirmationService</h5>
|
||||
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
||||
<pre v-code.script><code>
|
||||
|
|
@ -338,8 +339,8 @@ export default {
|
|||
<i>aria-modal</i> is added since focus is kept within the popup.
|
||||
</p>
|
||||
<p>
|
||||
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
|
||||
trigger and the dialog is defined.
|
||||
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between
|
||||
the trigger and the dialog is defined.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -431,7 +432,8 @@ setup() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import ContextMenu from 'primevue/contextmenu';
|
||||
|
|
@ -437,8 +438,8 @@ export default {
|
|||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
|
||||
<i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
|
||||
the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
|
||||
<i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined
|
||||
as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
|
||||
</p>
|
||||
|
||||
<h6>Keyboard Support</h6>
|
||||
|
|
@ -521,7 +522,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" /> </ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<ContextMenu ref="cm" :model="menuModel" />
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@
|
|||
</Dialog>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import DataTable from 'primevue/datatable';
|
||||
|
|
@ -503,15 +504,15 @@ export default {
|
|||
|
||||
<h5>Auto Layout</h5>
|
||||
<p>
|
||||
Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not
|
||||
support auto layout due to technical limitations.
|
||||
Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do
|
||||
not support auto layout due to technical limitations.
|
||||
</p>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p>
|
||||
Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props. On the other hand,
|
||||
<i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and
|
||||
footer of the table.
|
||||
<i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header
|
||||
and footer of the table.
|
||||
</p>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
|
|
@ -620,8 +621,8 @@ export default {
|
|||
|
||||
<h5>Pagination</h5>
|
||||
<p>
|
||||
Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization
|
||||
options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
|
||||
Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available
|
||||
customization options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
|
||||
</p>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
|
|
@ -652,8 +653,8 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<p>
|
||||
Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page.
|
||||
This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
|
||||
Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first
|
||||
page. This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex">
|
||||
|
|
@ -690,8 +691,8 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<p>
|
||||
In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model directive to
|
||||
get updated when the user applies sort a column.
|
||||
In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model
|
||||
directive to get updated when the user applies sort a column.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" sortField="year" :sortOrder="1">
|
||||
|
|
@ -735,10 +736,10 @@ data() {
|
|||
|
||||
<h5>Filtering</h5>
|
||||
<p>
|
||||
DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements are
|
||||
displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the filtering are
|
||||
placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with the event of your
|
||||
choice like @input, @change, @click.
|
||||
DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements
|
||||
are displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the
|
||||
filtering are placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with
|
||||
the event of your choice like @input, @change, @click.
|
||||
</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
|
|
@ -916,8 +917,8 @@ matchModes: [
|
|||
|
||||
<h5>Selection</h5>
|
||||
<p>
|
||||
DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using radio
|
||||
buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
|
||||
DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using
|
||||
radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
|
||||
</p>
|
||||
|
||||
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
|
||||
|
|
@ -935,8 +936,8 @@ matchModes: [
|
|||
</code></pre>
|
||||
|
||||
<p>
|
||||
In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch
|
||||
enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
|
||||
In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On
|
||||
touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin">
|
||||
|
|
@ -949,8 +950,8 @@ matchModes: [
|
|||
</code></pre>
|
||||
|
||||
<p>
|
||||
If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to
|
||||
toggle selection of all rows.
|
||||
If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox
|
||||
to toggle selection of all rows.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" v-model:selection="selectedCars" dataKey="vin">
|
||||
|
|
@ -1098,21 +1099,21 @@ matchModes: [
|
|||
|
||||
<h5>Lazy Loading</h5>
|
||||
<p>
|
||||
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number of
|
||||
rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
|
||||
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number
|
||||
of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and filters.
|
||||
Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
|
||||
Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and
|
||||
filters. Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
|
||||
</p>
|
||||
|
||||
<p>Visit the <router-link to="/datatable/lazy">lazy loading</router-link> demo for an example with a remote datasource.</p>
|
||||
|
||||
<h5>Row Expansion</h5>
|
||||
<p>
|
||||
Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that
|
||||
are invoked when a row is expanded or toggled.
|
||||
Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks
|
||||
that are invoked when a row is expanded or toggled.
|
||||
</p>
|
||||
|
||||
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table significantly.</p>
|
||||
|
|
@ -1189,9 +1190,9 @@ export default {
|
|||
<p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.</p>
|
||||
|
||||
<p>
|
||||
Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the editing
|
||||
is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional logic such as
|
||||
implementing validations.
|
||||
Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the
|
||||
editing is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional
|
||||
logic such as implementing validations.
|
||||
</p>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
|
|
@ -1377,8 +1378,8 @@ export default {
|
|||
|
||||
<h5>Column Reorder</h5>
|
||||
<p>
|
||||
Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys
|
||||
that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
|
||||
Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using
|
||||
keys that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" :reorderableColumns="true">
|
||||
|
|
@ -1392,8 +1393,8 @@ export default {
|
|||
|
||||
<h5>Row Reorder</h5>
|
||||
<p>
|
||||
Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can be
|
||||
customized using <i>rowReorderIcon</i> of the column component.
|
||||
Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can
|
||||
be customized using <i>rowReorderIcon</i> of the column component.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" @row-reorder="onRowReorder">
|
||||
|
|
@ -1581,9 +1582,9 @@ export default {
|
|||
|
||||
<h5>TableState</h5>
|
||||
<p>
|
||||
Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is easy as
|
||||
defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are supported by
|
||||
TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
|
||||
Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is
|
||||
easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are
|
||||
supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
|
||||
|
|
@ -1742,8 +1743,8 @@ export default {
|
|||
|
||||
<h5>Loading</h5>
|
||||
<p>
|
||||
A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until the
|
||||
data is loaded.
|
||||
A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until
|
||||
the data is loaded.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" :loading="loading">
|
||||
|
|
@ -1787,14 +1788,14 @@ export default {
|
|||
|
||||
<h5>Responsive</h5>
|
||||
<p>
|
||||
DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables use
|
||||
the scroll layout approach internally and do not require additional configuration.
|
||||
DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables
|
||||
use the scroll layout approach internally and do not require additional configuration.
|
||||
</p>
|
||||
|
||||
<h6>Scroll Layout</h6>
|
||||
<p>
|
||||
Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are not
|
||||
supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
|
||||
Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are
|
||||
not supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
|
||||
</p>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
|
|
@ -1815,8 +1816,8 @@ export default {
|
|||
|
||||
<h5>Row and Cell Styling</h5>
|
||||
<p>
|
||||
Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style class
|
||||
as a string.
|
||||
Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style
|
||||
class as a string.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataTable :value="cars" :rowClass="rowClass">
|
||||
|
|
@ -2761,9 +2762,9 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table
|
||||
for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers
|
||||
utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
|
||||
DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the
|
||||
table for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable
|
||||
headers utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -2772,20 +2773,21 @@ export default {
|
|||
</p>
|
||||
|
||||
<p>
|
||||
The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of
|
||||
the <router-link to="/locale">locale</router-link> API.
|
||||
The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties
|
||||
of the <router-link to="/locale">locale</router-link> API.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between
|
||||
the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
|
||||
<i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and <i>aria.apply</i> properties.
|
||||
<i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
|
||||
The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation
|
||||
between the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
|
||||
<i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and
|
||||
<i>aria.apply</i> properties. <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria
|
||||
labels as well.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for
|
||||
the <i>aria-label</i>.
|
||||
Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used
|
||||
for the <i>aria-label</i>.
|
||||
</p>
|
||||
|
||||
<p>Paginator is a standalone component used inside the DataTable, refer to the <router-link to="/paginator">paginator</router-link> for more information about the accessibility features.</p>
|
||||
|
|
@ -2933,7 +2935,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" /> </ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
|
||||
<ClientOnly><AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
|
||||
<pre v-code.script><code>
|
||||
|
|
@ -89,8 +90,8 @@ export default {
|
|||
|
||||
<h5>DataViewLayoutOptions</h5>
|
||||
<p>
|
||||
When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView. Location of
|
||||
the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
|
||||
When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.
|
||||
Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
|
||||
</p>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
|
|
@ -204,8 +205,8 @@ export default {
|
|||
|
||||
<h5>Lazy Loading</h5>
|
||||
<p>
|
||||
Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical number
|
||||
of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
|
||||
Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical
|
||||
number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)">
|
||||
|
|
@ -471,8 +472,8 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
|
||||
derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
|
||||
The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons
|
||||
are derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
|
||||
</p>
|
||||
|
||||
<p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
|
||||
|
|
@ -505,7 +506,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeFlex</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import DeferredContent from 'primevue/deferredcontent';
|
||||
|
|
@ -86,7 +87,8 @@ import DeferredContent from 'primevue/deferredcontent';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Dialog from 'primevue/dialog';
|
||||
|
|
@ -382,8 +383,8 @@ export default {
|
|||
</p>
|
||||
<p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
|
||||
<p>
|
||||
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
|
||||
and override the default <i>aria-label</i>.
|
||||
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the
|
||||
element and override the default <i>aria-label</i>.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -453,7 +454,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Divider from 'primevue/divider';
|
||||
|
|
@ -178,7 +179,8 @@ import Divider from 'primevue/divider';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
|
||||
<ClientOnly
|
||||
><AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Dock from 'primevue/dock';
|
||||
|
|
@ -288,7 +289,8 @@ import Dock from 'primevue/dock';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Dropdown from 'primevue/dropdown';
|
||||
|
|
@ -86,8 +87,8 @@ export default {
|
|||
|
||||
<h5>Filtering</h5>
|
||||
<p>
|
||||
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
|
||||
fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
|
||||
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
|
||||
the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -97,8 +98,8 @@ export default {
|
|||
|
||||
<h5>Templating</h5>
|
||||
<p>
|
||||
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>,
|
||||
<i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
|
||||
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>,
|
||||
<i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
|
||||
|
|
@ -632,13 +633,13 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
|
||||
editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
|
||||
option to read during keyboard navigation within the popup list.
|
||||
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If
|
||||
the editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader
|
||||
which option to read during keyboard navigation within the popup list.
|
||||
</p>
|
||||
<p>
|
||||
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i> of
|
||||
the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
|
||||
The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the
|
||||
<i>aria-activedescendant</i> of the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
|
||||
</p>
|
||||
|
||||
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
|
||||
|
|
@ -814,7 +815,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
|
||||
<h5>DialogService</h5>
|
||||
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
||||
|
||||
|
|
@ -314,7 +315,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Editor from 'primevue/editor';
|
||||
|
|
@ -191,7 +192,8 @@ import Editor from 'primevue/editor';
|
|||
npm install quill --save
|
||||
|
||||
</code></pre>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Fieldset from 'primevue/fieldset';
|
||||
|
|
@ -182,8 +183,8 @@ import Fieldset from 'primevue/fieldset';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the
|
||||
id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
|
||||
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define
|
||||
the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
|
||||
<i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
|
||||
</p>
|
||||
<p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
|
||||
|
|
@ -220,7 +221,8 @@ import Fieldset from 'primevue/fieldset';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import FileUpload from 'primevue/fileupload';
|
||||
|
|
@ -504,7 +505,8 @@ myUploader(event) {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import {FilterService} from 'primevue/api';
|
||||
|
|
@ -232,7 +233,8 @@ FilterService.filters['isPrimeNumber'](568985673); //false
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
|
||||
<ClientOnly><AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
|
|
@ -58,7 +59,8 @@ directives: {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc
|
||||
<ClientOnly
|
||||
><AppDoc
|
||||
name="FullCalendarDemo"
|
||||
:sources="sources"
|
||||
:service="['EventService']"
|
||||
|
|
@ -9,7 +10,8 @@
|
|||
component="FullCalendar"
|
||||
>
|
||||
<p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Image from 'primevue/image';
|
||||
|
|
@ -217,7 +218,8 @@ import Image from 'primevue/image';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Inplace from 'primevue/inplace';
|
||||
|
|
@ -219,8 +220,8 @@ export default {
|
|||
overriding the default role.
|
||||
</p>
|
||||
<p>
|
||||
Closable inplace components displays a button with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize
|
||||
the element and override the default <i>aria-label</i>.
|
||||
Closable inplace components displays a button with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to
|
||||
customize the element and override the default <i>aria-label</i>.
|
||||
</p>
|
||||
|
||||
<h6>View Mode Keyboard Support</h6>
|
||||
|
|
@ -271,7 +272,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" />
|
||||
<ClientOnly><AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" /></ClientOnly>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import InputMask from 'primevue/inputmask';
|
||||
|
|
@ -156,7 +157,8 @@ import InputMask from 'primevue/inputmask';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import InputNumber from 'primevue/inputnumber';
|
||||
|
|
@ -54,7 +55,10 @@ Indian Locale
|
|||
</code></pre>
|
||||
|
||||
<h5>Currency</h5>
|
||||
<p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
|
||||
<p>
|
||||
Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or
|
||||
"code".
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
United States
|
||||
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" />
|
||||
|
|
@ -89,8 +93,8 @@ Temperature
|
|||
|
||||
<h5>Buttons</h5>
|
||||
<p>
|
||||
Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up
|
||||
and down arrow keys can be used to spin the values with keyboard.
|
||||
Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons,
|
||||
up and down arrow keys can be used to spin the values with keyboard.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
Stacked
|
||||
|
|
@ -219,8 +223,8 @@ Vertical
|
|||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>
|
||||
The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro, or
|
||||
"CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
|
||||
The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro,
|
||||
or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -228,8 +232,8 @@ Vertical
|
|||
<td>string</td>
|
||||
<td>symbol</td>
|
||||
<td>
|
||||
How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as "dollar";
|
||||
the default is "symbol".
|
||||
How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as
|
||||
"dollar"; the default is "symbol".
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -243,8 +247,8 @@ Vertical
|
|||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>
|
||||
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by
|
||||
the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
|
||||
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided
|
||||
by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -507,7 +511,8 @@ Vertical
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import InputSwitch from 'primevue/inputswitch';
|
||||
|
|
@ -203,7 +204,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import InputText from 'primevue/inputtext';
|
||||
|
|
@ -52,8 +53,8 @@ import InputText from 'primevue/inputtext';
|
|||
|
||||
<h5>Sizes</h5>
|
||||
<p>
|
||||
2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular field,
|
||||
for global scaling see the <router-link to="/theming">theming</router-link> page.
|
||||
2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular
|
||||
field, for global scaling see the <router-link to="/theming">theming</router-link> page.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
||||
|
|
@ -74,8 +75,8 @@ import InputText from 'primevue/inputtext';
|
|||
|
||||
<h5>Outlined vs Filled</h5>
|
||||
<p>
|
||||
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled
|
||||
style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
|
||||
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the
|
||||
filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -182,7 +183,8 @@ import InputText from 'primevue/inputtext';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" />
|
||||
<ClientOnly><AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" /></ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Knob from 'primevue/knob';
|
||||
|
|
@ -44,8 +45,8 @@ data() {
|
|||
|
||||
<h5>Styling</h5>
|
||||
<p>
|
||||
<i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the stroke
|
||||
of range and value sections.
|
||||
<i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the
|
||||
stroke of range and value sections.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||
|
|
@ -294,8 +295,11 @@ data() {
|
|||
<p>None.</p>
|
||||
|
||||
<h5>Knob Vue</h5>
|
||||
<p>PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.</p>
|
||||
</AppDoc>
|
||||
<p>
|
||||
PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.
|
||||
</p>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Listbox from 'primevue/listbox';
|
||||
|
|
@ -94,8 +95,8 @@ export default {
|
|||
|
||||
<h5>Filter</h5>
|
||||
<p>
|
||||
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
|
||||
fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
|
||||
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
|
||||
the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>
|
||||
|
|
@ -104,8 +105,8 @@ export default {
|
|||
|
||||
<h5>Templating</h5>
|
||||
<p>
|
||||
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>optiongroup</i>, <i>header</i>, <i>footer</i>,
|
||||
<i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
|
||||
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>optiongroup</i>, <i>header</i>,
|
||||
<i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
|
|
@ -603,7 +604,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import MegaMenu from 'primevue/megamenu';
|
||||
|
|
@ -150,7 +151,9 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
|
||||
<p>
|
||||
Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<MegaMenu :model="items">
|
||||
<template #start>
|
||||
|
|
@ -364,8 +367,8 @@ export default {
|
|||
<p>
|
||||
MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
|
||||
<i>presentation</i> role whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MegaMenu uses the
|
||||
<i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the
|
||||
relation between the item and the submenu.
|
||||
<i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define
|
||||
the relation between the item and the submenu.
|
||||
</p>
|
||||
|
||||
<h6>Keyboard Support</h6>
|
||||
|
|
@ -456,7 +459,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Menu from 'primevue/menu';
|
||||
|
|
@ -323,8 +324,8 @@ toggle(event) {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to the
|
||||
label of the item and <i>aria-disabled</i> defined if the item is disabled.
|
||||
Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to
|
||||
the label of the item and <i>aria-disabled</i> defined if the item is disabled.
|
||||
</p>
|
||||
|
||||
<p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
|
||||
|
|
@ -401,7 +402,8 @@ toggle(event) {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Menubar from 'primevue/menubar';
|
||||
|
|
@ -159,7 +160,10 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
|
||||
<p>
|
||||
Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a
|
||||
parameter.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<Menubar :model="items">
|
||||
<template #start>
|
||||
|
|
@ -318,14 +322,14 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to
|
||||
the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition,
|
||||
menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
|
||||
Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with
|
||||
<i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root
|
||||
menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe the
|
||||
button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the
|
||||
In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe
|
||||
the button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the
|
||||
<i>aria-label</i>.
|
||||
</p>
|
||||
|
||||
|
|
@ -413,7 +417,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Message from 'primevue/message';
|
||||
|
|
@ -278,8 +279,8 @@ import InlineMessage from 'primevue/inlinemessage';
|
|||
</p>
|
||||
|
||||
<p>
|
||||
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
|
||||
and override the default <i>aria-label</i>.
|
||||
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the
|
||||
element and override the default <i>aria-label</i>.
|
||||
</p>
|
||||
|
||||
<h6>Close Button Keyboard Support</h6>
|
||||
|
|
@ -310,7 +311,8 @@ import InlineMessage from 'primevue/inlinemessage';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import MultiSelect from 'primevue/multiselect';
|
||||
|
|
@ -95,8 +96,8 @@ export default {
|
|||
|
||||
<h5>Filtering</h5>
|
||||
<p>
|
||||
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
|
||||
fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
|
||||
Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
|
||||
the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -672,14 +673,14 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
|
||||
The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
|
||||
Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
|
||||
<i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
|
||||
</p>
|
||||
<p>The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.</p>
|
||||
|
||||
<p>
|
||||
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
|
||||
<router-link to="/locale">locale</router-link> API.
|
||||
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from
|
||||
the <router-link to="/locale">locale</router-link> API.
|
||||
</p>
|
||||
|
||||
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
|
||||
|
|
@ -921,7 +922,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import OrderList from 'primevue/orderlist';
|
||||
|
|
@ -36,8 +37,8 @@ import OrderList from 'primevue/orderlist';
|
|||
|
||||
<h5>Selection</h5>
|
||||
<p>
|
||||
In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your
|
||||
changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
|
||||
In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled,
|
||||
your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
|
||||
</p>
|
||||
|
||||
<p>Use the v-model directive to enable two-way binding.</p>
|
||||
|
|
@ -275,8 +276,8 @@ import OrderList from 'primevue/orderlist';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list item
|
||||
has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
|
||||
Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list
|
||||
item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
|
||||
</p>
|
||||
<p>
|
||||
Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
|
||||
|
|
@ -399,7 +400,8 @@ import OrderList from 'primevue/orderlist';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import OrganizationChart from 'primevue/organizationchart';
|
||||
|
|
@ -129,8 +130,8 @@ export default {
|
|||
|
||||
<h5>Collapsible Nodes</h5>
|
||||
<p>
|
||||
All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys that are collapsed, this property is two-way binding enabled so
|
||||
that user changes or programmatic changes are reflected to the UI.
|
||||
All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys that are collapsed, this property is two-way binding enabled
|
||||
so that user changes or programmatic changes are reflected to the UI.
|
||||
</p>
|
||||
<p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the key of the node and value is true.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
|
|
@ -485,8 +486,8 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
|
||||
reader support in the upcoming versions.
|
||||
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level
|
||||
of reader support in the upcoming versions.
|
||||
</p>
|
||||
|
||||
<h6>Keyboard Support</h6>
|
||||
|
|
@ -523,7 +524,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import OverlayPanel from 'primevue/overlaypanel';
|
||||
|
|
@ -271,7 +272,8 @@ toggle(event) {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Paginator from 'primevue/paginator';
|
||||
|
|
@ -49,8 +50,8 @@ import Paginator from 'primevue/paginator';
|
|||
|
||||
<h5>Template</h5>
|
||||
<p>
|
||||
Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
|
||||
can be placed inside a paginator in any order.
|
||||
Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements
|
||||
that can be placed inside a paginator in any order.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
|
|
@ -78,8 +79,8 @@ import Paginator from 'primevue/paginator';
|
|||
|
||||
<h5>Responsive</h5>
|
||||
<p>
|
||||
Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if <i>default</i> key is omitted then the default template would be used. Example below has
|
||||
4 settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
|
||||
Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if <i>default</i> key is omitted then the default template would be used. Example below
|
||||
has 4 settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<Paginator
|
||||
|
|
@ -291,8 +292,8 @@ onPage(event) {
|
|||
<p>Paginator is placed inside a <i>nav</i> element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.</p>
|
||||
|
||||
<p>
|
||||
First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
|
||||
<router-link to="/locale">locale</router-link> API respectively.
|
||||
First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of
|
||||
the <router-link to="/locale">locale</router-link> API respectively.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -308,8 +309,8 @@ onPage(event) {
|
|||
</p>
|
||||
|
||||
<p>
|
||||
Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
|
||||
the <i>aria.jumpToPageDropdownLabel</i> property of the <router-link to="/locale">locale</router-link> API.
|
||||
Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers
|
||||
to the <i>aria.jumpToPageDropdownLabel</i> property of the <router-link to="/locale">locale</router-link> API.
|
||||
</p>
|
||||
|
||||
<h6>Keyboard Support</h6>
|
||||
|
|
@ -349,7 +350,8 @@ onPage(event) {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Panel from 'primevue/panel';
|
||||
|
|
@ -211,8 +212,8 @@ import Panel from 'primevue/panel';
|
|||
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value
|
||||
of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
|
||||
Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the
|
||||
value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
|
||||
</p>
|
||||
<p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
|
||||
|
||||
|
|
@ -248,7 +249,8 @@ import Panel from 'primevue/panel';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import PanelMenu from 'primevue/panelmenu';
|
||||
|
|
@ -177,8 +178,8 @@ export default {
|
|||
|
||||
<h5>Programmatic Control</h5>
|
||||
<p>
|
||||
If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
|
||||
value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
|
||||
If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node
|
||||
and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
|
||||
</p>
|
||||
|
||||
<p>Example below expands and collapses all nodes with buttons.</p>
|
||||
|
|
@ -524,8 +525,8 @@ export default {
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for
|
||||
the visibility state.
|
||||
Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with
|
||||
<i>aria-expanded</i> for the visibility state.
|
||||
</p>
|
||||
<p>The content of an accordion panel uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
|
||||
|
||||
|
|
@ -660,7 +661,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Password from 'primevue/password';
|
||||
|
|
@ -295,8 +296,8 @@ import Password from 'primevue/password';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the password
|
||||
using a section that has <i>aria-live</i> while typing.
|
||||
Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the
|
||||
password using a section that has <i>aria-live</i> while typing.
|
||||
</p>
|
||||
|
||||
<pre v-code><code>
|
||||
|
|
@ -334,7 +335,8 @@ import Password from 'primevue/password';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="picklist/PickListDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="picklist/PickListDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import PickList from 'primevue/picklist';
|
||||
|
|
@ -32,8 +33,8 @@ import PickList from 'primevue/picklist';
|
|||
|
||||
<h5>Templates</h5>
|
||||
<p>
|
||||
In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content at header sections. Similarly custom content can be placed before and after the button controls for each section can
|
||||
be templates. View the slots section for more information.
|
||||
In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content at header sections. Similarly custom content can be placed before and after the button controls for each section
|
||||
can be templates. View the slots section for more information.
|
||||
</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<PickList v-model="cars" dataKey="vin">
|
||||
|
|
@ -395,8 +396,8 @@ import PickList from 'primevue/picklist';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role with
|
||||
the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> as their attributes.
|
||||
Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role
|
||||
with the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> as their attributes.
|
||||
</p>
|
||||
<p>
|
||||
Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveToTarget</i>, <i>aria.moveAllToTarget</i>,
|
||||
|
|
@ -519,7 +520,8 @@ import PickList from 'primevue/picklist';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ProgressBarDemo" :sources="sources" github="progressbar/ProgressBarDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ProgressBarDemo" :sources="sources" github="progressbar/ProgressBarDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import ProgressBar from 'primevue/progressbar';
|
||||
|
|
@ -132,7 +133,8 @@ data() {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ProgressSpinnerDemo" :sources="sources" github="progressspinner/ProgressSpinnerDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ProgressSpinnerDemo" :sources="sources" github="progressspinner/ProgressSpinnerDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
|
|
@ -117,7 +118,8 @@ import ProgressSpinner from 'primevue/progressspinner';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="RadioButtonDemo" :sources="sources" github="radiobutton/RadioButtonDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="RadioButtonDemo" :sources="sources" github="radiobutton/RadioButtonDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
|
|
@ -232,7 +233,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="RatingDemo" :sources="sources" github="rating/RatingDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="RatingDemo" :sources="sources" github="rating/RatingDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Rating from 'primevue/rating';
|
||||
|
|
@ -257,7 +258,8 @@ import Rating from 'primevue/rating';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="RippleDemo" :sources="sources" github="ripple/RippleDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="RippleDemo" :sources="sources" github="ripple/RippleDemo.vue">
|
||||
<h5>Getting Started</h5>
|
||||
<h5>Ripple</h5>
|
||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
|
||||
|
|
@ -86,7 +87,8 @@ directives: {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ScrollPanelDemo" :sources="sources" github="scrollpanel/ScrollPanelDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ScrollPanelDemo" :sources="sources" github="scrollpanel/ScrollPanelDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import ScrollPanel from 'primevue/scrollpanel';
|
||||
|
|
@ -121,7 +122,10 @@ import ScrollPanel from 'primevue/scrollpanel';
|
|||
|
||||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of scrolling.</p>
|
||||
<p>
|
||||
Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of
|
||||
scrolling.
|
||||
</p>
|
||||
|
||||
<h6>Header Keyboard Support</h6>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
@ -155,7 +159,8 @@ import ScrollPanel from 'primevue/scrollpanel';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="ScrollTopDemo" :sources="sources" github="scrolltop/ScrollTopDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="ScrollTopDemo" :sources="sources" github="scrolltop/ScrollTopDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import ScrollTop from 'primevue/scrolltop';
|
||||
|
|
@ -104,8 +105,8 @@ import ScrollTop from 'primevue/scrolltop';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use your own aria roles and attributes as any valid
|
||||
attribute is passed to the button element implicitly.
|
||||
ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use your own aria roles and attributes as any
|
||||
valid attribute is passed to the button element implicitly.
|
||||
</p>
|
||||
|
||||
<h6>Keyboard Support</h6>
|
||||
|
|
@ -136,7 +137,8 @@ import ScrollTop from 'primevue/scrolltop';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="SelectButtonDemo" :sources="sources" github="selectbutton/SelectButtonDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="SelectButtonDemo" :sources="sources" github="selectbutton/SelectButtonDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import SelectButton from 'primevue/selectbutton';
|
||||
|
|
@ -232,7 +233,8 @@ export default {
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="SidebarDemo" :sources="sources" github="sidebar/SidebarDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="SidebarDemo" :sources="sources" github="sidebar/SidebarDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Sidebar from 'primevue/sidebar';
|
||||
|
|
@ -307,7 +308,8 @@ import Sidebar from 'primevue/sidebar';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<AppDoc name="SkeletonDemo" :sources="sources" github="skeleton/SkeletonDemo.vue">
|
||||
<ClientOnly
|
||||
><AppDoc name="SkeletonDemo" :sources="sources" github="skeleton/SkeletonDemo.vue">
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Skeleton from 'primevue/skeleton';
|
||||
|
|
@ -132,8 +133,8 @@ import Skeleton from 'primevue/skeleton';
|
|||
<h5>Accessibility</h5>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>
|
||||
Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you
|
||||
may use <i>aria-busy</i> on the container element as well to indicate the loading process.
|
||||
Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container,
|
||||
you may use <i>aria-busy</i> on the container element as well to indicate the loading process.
|
||||
</p>
|
||||
|
||||
<h6>Keyboard Support</h6>
|
||||
|
|
@ -141,7 +142,8 @@ import Skeleton from 'primevue/skeleton';
|
|||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
</AppDoc></ClientOnly
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue