diff --git a/.eslintrc.json b/.eslintrc.json index 9094de5300..bb477ec668 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,9 +1,18 @@ { - "extends": "next/core-web-vitals", + "plugins": ["@typescript-eslint"], + "extends": [ + "next/core-web-vitals", + "plugin:@typescript-eslint/recommended", + "prettier" + ], "rules": { "@next/next/no-img-element": "off", "react/display-name": "off", "react/no-unescaped-entities": "off", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-empty-interface": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", "no-console": 2 } } diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000000..94f480de94 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..8f2f3cdf94 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,7 @@ +# Ignore artifacts: +build +coverage +api-generator +out +public +styles \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000000..0edb04230b --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,9 @@ +{ + "useTabs": false, + "tabWidth": 4, + "trailingComma": "none", + "semi": true, + "singleQuote": true, + "jsxSingleQuote": false, + "printWidth": 250 +} diff --git a/components/doc/accordion/index.js b/components/doc/accordion/index.js index c7d9569e91..a6287b037c 100644 --- a/components/doc/accordion/index.js +++ b/components/doc/accordion/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const AccordionDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -139,7 +138,7 @@ export class AccordionDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -261,7 +260,7 @@ export const AccordionDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -382,8 +381,8 @@ export const AccordionDemo = () => { ) } ` - }, - 'browser': { + }, + browser: { tabName: 'Browser Source', imports: ` @@ -508,8 +507,8 @@ const AccordionDemo = () => { ) } ` - } - }; + } + }; const extFiles = { 'demo/AccordionDemo.css': { @@ -528,35 +527,37 @@ const AccordionDemo = () => { } ` } - } + }; return (
Accordion element consists of one or more AccordionTab elements and can either be used as a Controlled or Uncontrolled component.
+Accordion element consists of one or more AccordionTab elements and can either be used as a Controlled or Uncontrolled component.
-In controlled mode, activeIndex and onTabChange properties need to be defined to control the state.
++ In controlled mode, activeIndex and onTabChange properties need to be defined to control the state. +
-In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically - need to update the active tab, prefer to use the component as controlled.
++ In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further + updates. If you programmatically need to update the active tab, prefer to use the component as controlled. +
-By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.
-+ By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time. +
+Name | -Type | -Default | -Description | -
---|---|---|---|
header | -string | -null | -Orientation of tab headers. | -
disabled | -boolean | -false | -Whether the tab is disabled. | -
style | -object | -null | -Inline style of the tab header and content. | -
className | -string | -null | -Style class of the tab header and content. | -
headerStyle | -object | -null | -Inline style of the tab header. | -
headerClassName | -string | -null | -Style class of the tab header. | -
headerTemplate | -any | -null | -Template of the tab header. | -
contentStyle | -object | -null | -Inline style of the tab content. | -
contentClassName | -string | -null | -Style class of the tab content. | -
Name | +Type | +Default | +Description | +
---|---|---|---|
header | +string | +null | +Orientation of tab headers. | +
disabled | +boolean | +false | +Whether the tab is disabled. | +
style | +object | +null | +Inline style of the tab header and content. | +
className | +string | +null | +Style class of the tab header and content. | +
headerStyle | +object | +null | +Inline style of the tab header. | +
headerClassName | +string | +null | +Style class of the tab header. | +
headerTemplate | +any | +null | +Template of the tab header. | +
contentStyle | +object | +null | +Inline style of the tab content. | +
contentClassName | +string | +null | +Style class of the tab content. | +
Name | -Type | -Default | -Description | -
---|---|---|---|
id | -string | -null | -Unique identifier of the element. | -
activeIndex | -any | -null | -Active index or indexes of the element. Use an array of numbers for multiple indexes. the "multiple" prop must be set to true in order to specify multiple indexes. | -
className | -string | -null | -Style class of the element. | -
style | -object | -null | -Inline style of the element. | -
multiple | -boolean | -false | -When enabled, multiple tabs can be activated at the same time. | -
expandIcon | -string | -pi pi-chevron-right | -Icon of a collapsed tab. | -
collapseIcon | -string | -pi pi-chevron-down | -Icon of an expanded tab. | -
transitionOptions | -object | -null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | -
Name | +Type | +Default | +Description | +
---|---|---|---|
id | +string | +null | +Unique identifier of the element. | +
activeIndex | +any | +null | +Active index or indexes of the element. Use an array of numbers for multiple indexes. the "multiple" prop must be set to true in order to specify multiple indexes. | +
className | +string | +null | +Style class of the element. | +
style | +object | +null | +Inline style of the element. | +
multiple | +boolean | +false | +When enabled, multiple tabs can be activated at the same time. | +
expandIcon | +string | +pi pi-chevron-right | +Icon of a collapsed tab. | +
collapseIcon | +string | +pi pi-chevron-down | +Icon of an expanded tab. | +
transitionOptions | +object | +null | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + | +
Name | -Parameters | -Description | -
---|---|---|
onTabOpen | -event.originalEvent: browser event - event.index: Index or indexes of the tab (number or array of numbers). - |
- Callback to invoke when a tab gets expanded. | -
onTabClose | -event.originalEvent: browser event - event.index: Index of the tab - |
- Callback to invoke when an active tab is collapsed by clicking on the header. | -
onTabChange | -event.originalEvent: browser event - event.index: Index of the tab - |
- Callback to invoke when state of the accordion changes. | -
Name | +Parameters | +Description | +
---|---|---|
onTabOpen | +
+ event.originalEvent: browser event + event.index: Index or indexes of the tab (number or array of numbers). + |
+ Callback to invoke when a tab gets expanded. | +
onTabClose | +
+ event.originalEvent: browser event + event.index: Index of the tab + |
+ Callback to invoke when an active tab is collapsed by clicking on the header. | +
onTabChange | +
+ event.originalEvent: browser event + event.index: Index of the tab + |
+ Callback to invoke when state of the accordion changes. | +
Following is the list of structural style classes, for theming classes visit theming page.
-Name | -Element | -
---|---|
p-accordion | -Container element. | -
p-accordion-header | -Header of a tab. | -
p-accordion-content | -Container of a tab. | -
+ Following is the list of structural style classes, for theming classes visit theming page. +
+Name | +Element | +
---|---|
p-accordion | +Container element. | +
p-accordion-header | +Header of a tab. | +
p-accordion-content | +Container of a tab. | +
Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element - defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby via the headerProps property.
-The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
++ Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults + to the value of the header property and can be customized by defining an aria-label or aria-labelledby via the headerProps property. +
++ The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. +
AutoComplete is used as a controlled component with value and onChange properties. In addition, the component - requires a list of suggestions and a completeMethod to query the results.
++ AutoComplete is used as a controlled component with value and onChange properties. In addition, the component requires a list of suggestions and a completeMethod to query the results. +
-Enabling dropdown 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 dropdown 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. +
-Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.
-+ Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array. +
+AutoComplete can also work with objects using the field 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 field 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"}. +
-Options groups are specified with the optionGroupLabel and optionGroupChildren properties.
-+ Options groups are specified with the optionGroupLabel and optionGroupChildren properties. +
+ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared - to make sure the value passed to the model is always one of the suggestions. Simply enable forceSelection to enforce that input is always from the suggestion list.
-+ ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply + enable forceSelection to enforce that input is always from the suggestion list. +
+Custom content can be displayed using itemTemplate property that references a function or JSXElement or string which gets - the suggestion option and returns an element. Similarly selectedItemTemplate property is available - to customize the chips in multiple mode using the same approach.
++ Custom content can be displayed using itemTemplate property that references a function or JSXElement or string which gets the suggestion option and returns an element. Similarly selectedItemTemplate property is + available to customize the chips in multiple mode using the same approach. +
-Standard HTMLSpanElement properties are passed to the wrapping div element.
In addition the component uses these properties:
+ Standard HTMLSpanElement properties are passed to the wrapping div element.
+
+ In addition the component uses these properties:
+
forceSelection | boolean | false | -When present, autocomplete clears the manual input if it does not match of the suggestions to force only - accepting values from the suggestions. | +When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions. | |
autoHighlight | @@ -934,7 +944,9 @@ itemTemplate(item) {appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + |
tabIndex | @@ -982,7 +994,13 @@ itemTemplate(item) {transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
dropdownIcon | @@ -1000,7 +1018,9 @@ itemTemplate(item) {virtualScrollerOptions | object | null | -Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. | ++ Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. + |
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role - in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used - to instruct screen reader which option to read during keyboard navigation within the popup list.
-In multiple mode, chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.
-The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.
-+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition + to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to + instruct screen reader which option to read during keyboard navigation within the popup list. +
++ In multiple mode, chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip. +
++ The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant{' '} + of the input element. +
+Key | -Function | -
---|---|
tab | -Moves focus to the input element when popup is not visible. - If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | -
up arrow | -Highlights the previous item if popup is visible. | -
down arrow | -Highlights the next item if popup is visible. | -
enter | -Selects the highlighted item and closes the popup if popup is visible. | -
home | -Highlights the first item if popup is visible. | -
end | -Highlights the last item if popup is visible. | -
escape | -Hides the popup. | -
Key | -Function | -
---|---|
backspace | -Deletes the previous chip if the input field is empty. | -
left arrow | -Moves focus to the previous chip if available and input field is empty. | -
Key | -Function | -
---|---|
left arrow | -Moves focus to the previous chip if available. | -
right arrow | -Moves focus to the next chip, if there is none then input field receives the focus. | -
backspace | -Deletes the chips and adds focus to the input field. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | +
+ up arrow + | +Highlights the previous item if popup is visible. | +
+ down arrow + | +Highlights the next item if popup is visible. | +
+ enter + | +Selects the highlighted item and closes the popup if popup is visible. | +
+ home + | +Highlights the first item if popup is visible. | +
+ end + | +Highlights the last item if popup is visible. | +
+ escape + | +Hides the popup. | +
Key | +Function | +
---|---|
+ backspace + | +Deletes the previous chip if the input field is empty. | +
+ left arrow + | +Moves focus to the previous chip if available and input field is empty. | +
Key | +Function | +
---|---|
+ left arrow + | +Moves focus to the previous chip if available. | +
+ right arrow + | +Moves focus to the next chip, if there is none then input field receives the focus. | +
+ backspace + | +Deletes the chips and adds focus to the input field. | +
None.
- { - useLiveEditorTabs({ name: 'AutoCompleteDemo', sources: sources, service: 'CountryService', data: 'countries' }) - } + {useLiveEditorTabs({ name: 'AutoCompleteDemo', sources: sources, service: 'CountryService', data: 'countries' })} - ) -}) + ); +}); export default AutoCompleteDoc; diff --git a/components/doc/avatar/index.js b/components/doc/avatar/index.js index 7828beabeb..c008da3833 100644 --- a/components/doc/avatar/index.js +++ b/components/doc/avatar/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const AvatarDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -116,7 +115,7 @@ export class AvatarDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -222,7 +221,7 @@ export const AvatarDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -328,7 +327,7 @@ export const AvatarDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -439,49 +438,53 @@ const AvatarDemo = () => { } ` } - } + }; return (Avatar has three built-in display modes; "label", "icon" and "image".
-size property defines the size of the Avatar with "large" and "xlarge" as possible values.
-+ size property defines the size of the Avatar with "large" and "xlarge" as possible values. +
+A set of Avatars can be displayed together using the AvatarGroup component.
-+ A set of Avatars can be displayed together using the AvatarGroup component. +
+Avatar comes in two different styles specified with the shape property, "square" is the default and "circle" is the alternative.
-+ Avatar comes in two different styles specified with the shape property, "square" is the default and "circle" is the alternative. +
+A badge can be added to an Avatar with the Badge component.
-+ A badge can be added to an Avatar with the Badge component. +
+Content can easily be customized with the default slot instead of using the built-in modes.
-Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -604,7 +611,9 @@ import { AvatarGroup } from 'primereact/avatargroup';Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Name | -Element | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Element | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
tab | -Moves focus to the button. | -
enter | -Activates the button. | -
space | -Activates the button. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the button. | +
+ enter + | +Activates the button. | +
+ space + | +Activates the button. | +
None.
- { - useLiveEditorTabs({ name: 'ButtonDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'ButtonDemo', sources: sources, extFiles: extFiles })} - ) -}) + ); +}); export default ButtonDoc; diff --git a/components/doc/calendar/index.js b/components/doc/calendar/index.js index b368ebd6ed..ec24cdb91c 100644 --- a/components/doc/calendar/index.js +++ b/components/doc/calendar/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const CalendarDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -161,7 +160,7 @@ export class CalendarDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -300,7 +299,7 @@ const CalendarDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -439,7 +438,7 @@ const CalendarDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -581,7 +580,7 @@ const CalendarDemo = () => { } ` } - } + }; return (Calendar is used a controlled input component with value and onChange properties.
++ Calendar is used a controlled input component with value and onChange properties. +
Calendar is displayed in a popup by default whereas inline property needs to be enabled for inline mode.
++ Calendar is displayed in a popup by default whereas inline property needs to be enabled for inline mode. +
viewDate defines the date whose month and year are used to display the calendar. By default calendar uses value to render the view and falls back to today's date when value is not defined. In case you'd like - to display a different month/year use viewDate. The usage of this property can either be controlled or uncontrolled. In controlled mode, onViewDateChange is required to manage the viewDate whereas in - uncontrolled mode, viewDate is used only once in initial rendering and ignored in updates. If you'd like to change the displayed month/year programmatically, use the onViewDateChange in controlled mode.
++ viewDate defines the date whose month and year are used to display the calendar. By default calendar uses value to render the view and falls back to today's date when value is not defined. In case you'd like to display + a different month/year use viewDate. The usage of this property can either be controlled or uncontrolled. In controlled mode, onViewDateChange is required to manage the viewDate whereas in uncontrolled mode, + viewDate is used only once in initial rendering and ignored in updates. If you'd like to change the displayed month/year programmatically, use the onViewDateChange in controlled mode. +
Calendar offers "single" (default), "multiple" and "range" selection types controlled via the selectionMode property. In single, mode the bound value should be an array whereas in multiple - case an array is required. 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. Note: Time picker is supported in range mode but not in multiple mode.
++ Calendar offers "single" (default), "multiple" and "range" selection types controlled via the selectionMode property. In single, mode the bound value should be an array whereas in multiple case an array is required. + 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. Note: Time picker is supported in range + mode but not in multiple mode. +
Default date format is "mm/dd/yy" which can be customized using the dateFormat property.
++ Default date format is "mm/dd/yy" which can be customized using the dateFormat property. +
Translations for the calendar are defined with the Locale API.
++ Translations for the calendar are defined with the Locale API. +
TimePicker is enabled with showTime property and hourFormat is used to select the 24 (default) or 12 hour mode. Optionally enabling timeOnly - displays a calendare with time controls only.
++ TimePicker is enabled with showTime property and hourFormat is used to select the 24 (default) or 12 hour mode. Optionally enabling timeOnly + displays a calendare with time controls only. +
To disable entering dates manually, set readOnlyInput to true and to restrict selectable date ranges use minDate and maxDate options.
++ To disable entering dates manually, set readOnlyInput to true and to restrict selectable date ranges use minDate and maxDate options. +
Specific dates or days can be disabled as well, in this case set readOnlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options. disabledDates - property should be an array of dates and disabledDays should be an array of disabled weekdays.
++ Specific dates or days can be disabled as well, in this case set readOnlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options. disabledDates + property should be an array of dates and disabledDays should be an array of disabled weekdays. +
Button bar displays today and clear buttons and activated using the showButtonBar property.
++ Button bar displays today and clear buttons and activated using the showButtonBar property. +
Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.
++ Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1. +
Date cell contents can be templated using the dateTemplate property that returns the content of a cell. This is a handy feature to highlight specific dates. Note that the - variable passed to the template is not a date instance but a metadata object to represent a Date with "day", "month", "year", "otherMonth", "today" and "selectable" properties to represent the date. Example below changes the styling of dates between 10 and 15.
++ Date cell contents can be templated using the dateTemplate property that returns the content of a cell. This is a handy feature to highlight specific dates. Note that the variable passed to the template is not a date + instance but a metadata object to represent a Date with "day", "month", "year", "otherMonth", "today" and "selectable" properties to represent the date. Example below changes the styling of dates between 10 and 15. +
The headerTemplate and footerTemplate properties are available to place custom content at these sections.
++ The headerTemplate and footerTemplate properties are available to place custom content at these sections. +
Navigators are used to quickly change the displayed month and year using dropdowns. Enabling monthNavigator displays a dropdown with months whereas yearNavigator along with yearRange displays - available years. Format of the yearRange is "startYear:endYear".
++ Navigators are used to quickly change the displayed month and year using dropdowns. Enabling monthNavigator displays a dropdown with months whereas yearNavigator along with yearRange displays available + years. Format of the yearRange is "startYear:endYear". +
The monthNavigatorTemplate and yearNavigatorTemplate properties are available to place custom content at the navigator sections.
++ The monthNavigatorTemplate and yearNavigatorTemplate properties are available to place custom content at the navigator sections. +
Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.
++ Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker. +
object | null | Inline style of the input element. | -|||
inputClassName | @@ -1067,16 +1096,20 @@ const monthNavigatorTemplate = (options) => {Style class of the datetimepicker panel. | ||||
monthNavigator | +monthNavigator | boolean | false | -Whether the month should be rendered as a dropdown instead of text. Deprecated: Navigator is always on |
+
+ Whether the month should be rendered as a dropdown instead of text. Deprecated: Navigator is always on + |
yearNavigator | +yearNavigator | boolean | false | -Whether the year should be rendered as a dropdown instead of text. Deprecated: Navigator is always on. |
+
+ Whether the year should be rendered as a dropdown instead of text. Deprecated: Navigator is always on. + |
disabledDates | @@ -1160,7 +1193,9 @@ const monthNavigatorTemplate = (options) => {appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + |
tooltip | @@ -1202,7 +1237,13 @@ const monthNavigatorTemplate = (options) => {transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
space | -Opens popup and moves focus to the selected date, if there is none focuses on today. | -
enter | -Opens popup and moves focus to the selected date, if there is none focuses on today. | -
Key | +Function | +
---|---|
+ space + | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
+ enter + | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
Key | -Function | -
---|---|
escape | -Closes the popup and moves focus to the input element. | -
tab | -Moves focus to the next focusable element within the popup. | -
shift + tab | -Moves focus to the next focusable element within the popup. | -
Key | +Function | +
---|---|
+ escape + | +Closes the popup and moves focus to the input element. | +
+ tab + | +Moves focus to the next focusable element within the popup. | +
+ shift + tab + | +Moves focus to the next focusable element within the popup. | +
Key | -Function | -
---|---|
enter | -Triggers the button action. | -
space | -Triggers the button action. | -
Key | +Function | +
---|---|
+ enter + | +Triggers the button action. | +
+ space + | +Triggers the button action. | +
Key | -Function | -
---|---|
enter | -Selects the date, closes the popup and moves focus to the input element. | -
space | -Selects the date, closes the popup and moves focus to the input element. | -
up arrow | -Moves focus to the same day of the previous week. | -
down arrow | -Moves focus to the same day of the next week. | -
right arrow | -Moves focus to the next day. | -
left arrow | -Moves focus to the previous day. | -
home | -Moves focus to the first day of the current week. | -
end | -Moves focus to the last day of the current week. | -
page up | -Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. | -
shift + page up | -Changes the date to previous year in date picker mode. Has no effect in month or year picker | -
page down | -Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker. | -
shift + page down | -Changes the date to next year in date picker mode. Has no effect in month or year picker | -
Key | +Function | +
---|---|
+ enter + | +Selects the date, closes the popup and moves focus to the input element. | +
+ space + | +Selects the date, closes the popup and moves focus to the input element. | +
+ up arrow + | +Moves focus to the same day of the previous week. | +
+ down arrow + | +Moves focus to the same day of the next week. | +
+ right arrow + | +Moves focus to the next day. | +
+ left arrow + | +Moves focus to the previous day. | +
+ home + | +Moves focus to the first day of the current week. | +
+ end + | +Moves focus to the last day of the current week. | +
+ page up + | +Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. | +
+ shift + page up + | +Changes the date to previous year in date picker mode. Has no effect in month or year picker | +
+ page down + | +Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker. | +
+ shift + page down + | +Changes the date to next year in date picker mode. Has no effect in month or year picker | +
Key | +Function | +
---|---|
+ enter + | +Triggers the button action. | +
+ space + | +Triggers the button action. | +
Key | -Function | -
---|---|
enter | -Triggers the button action. | -
space | -Triggers the button action. | -
None.
- - { - useLiveEditorTabs({ name: 'CalendarDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'CalendarDemo', sources: sources })} ); -}) +}); export default CalendarDoc; diff --git a/components/doc/captcha/index.js b/components/doc/captcha/index.js index 48cd7b4dbe..80e2b45b7b 100644 --- a/components/doc/captcha/index.js +++ b/components/doc/captcha/index.js @@ -4,10 +4,9 @@ import { useLiveEditorTabs } from '../common/liveeditor'; import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; -const CaptchaDoc = memo(() => { - +const CaptchaDoc = memo(() => { const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -39,7 +38,7 @@ export class CaptchaDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useRef } from 'react'; @@ -65,7 +64,7 @@ const CaptchaDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useRef } from 'react'; @@ -91,7 +90,7 @@ const CaptchaDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -121,52 +120,53 @@ const CaptchaDemo = () => { } ` } - } + }; return (Captcha is used with a siteKey and a callback to verify the response.
-In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. Read more at - official documentation.
-+ In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. Read more at official documentation. +
+In addition, include the captcha widget resource to your page.
-Refer to the Recaptcha Accessibility documentation for more information.
++ Refer to the{' '} + + Recaptcha Accessibility + {' '} + documentation for more information. +
Google Recaptcha V2
- { - useLiveEditorTabs({ name: 'CaptchaDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'CaptchaDemo', sources: sources })}Card is used as a container.
-Title text of the card is provided using the title property whereas subTitle property is available for additional information about the card. Both of these properties accept JSX as well.
-+ Title text of the card is provided using the title property whereas subTitle property is available for additional information about the card. Both of these properties accept JSX as well. +
+Header and Footer sections are defined using the properties of the same name.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
tab | ++ tab + | Moves focus through interactive elements in the carousel. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Activates navigation. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Activates navigation. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tab | ++ tab + | Moves focus through the active slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Activates the focused slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Activates the focused slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
right arrow | ++ right arrow + | Moves focus to the next slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
left arrow | ++ left arrow + | Moves focus to the previous slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
home | ++ home + | Moves focus to the first slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
end | ++ end + | Moves focus to the last slide link. | appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemTemplate | @@ -727,7 +731,13 @@ const countryOptionTemplate = (option) => {transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dropdownIcon | @@ -752,8 +762,10 @@ const countryOptionTemplate = (option) => {|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onChange | -event.originalEvent: Original event - event.value: Value of the checkbox |
+
+ event.originalEvent: Original event + event.value: Value of the checkbox{' '} + |
Callback to invoke on value change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
tab | -Moves focus to the cascadeselect element. | -
space | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
down arrow | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
Key | -Function | -
---|---|
tab | -Hides the popup and moves focus to the next tabbable element. | -
shift + tab | -Hides the popup and moves focus to the previous tabbable element. | -
enter | -Selects the focused option and closes the popup. | -
space | -Selects the focused option and closes the popup. | -
escape | -Closes the popup, moves focus to the cascadeselect element. | -
down arrow | -Moves focus to the next option. | -
up arrow | -Moves focus to the previous option. | -
right arrow | -If option is closed, opens the option otherwise moves focus to the first child option. | -
left arrow | -If option is open, closes the option otherwise moves focus to the parent option. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the cascadeselect element. | +
+ space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
+ down arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
Key | +Function | +
---|---|
+ tab + | +Hides the popup and moves focus to the next tabbable element. | +
+ shift + tab + | +Hides the popup and moves focus to the previous tabbable element. | +
+ enter + | +Selects the focused option and closes the popup. | +
+ space + | +Selects the focused option and closes the popup. | +
+ escape + | +Closes the popup, moves focus to the cascadeselect element. | +
+ down arrow + | +Moves focus to the next option. | +
+ up arrow + | +Moves focus to the previous option. | +
+ right arrow + | +If option is closed, opens the option otherwise moves focus to the first child option. | +
+ left arrow + | +If option is open, closes the option otherwise moves focus to the parent option. | +
None.
- { - useLiveEditorTabs({ name: 'CascadeSelectDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'CascadeSelectDemo', sources: sources })} - ) -}) + ); +}); export default CascadeSelectDoc; diff --git a/components/doc/chart/index.js b/components/doc/chart/index.js index 31557d3db7..3b0c84ee8e 100644 --- a/components/doc/chart/index.js +++ b/components/doc/chart/index.js @@ -3,48 +3,53 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const ChartDoc = () => { - return (Chart component is a wrapper around on Chart.js 3.3.2+ so chart.js needs to be included in your project. - For a complete documentation and samples please refer to the chart.js website.
++ Chart component is a wrapper around on Chart.js 3.3.2+ so chart.js needs to be included in your project. For a complete documentation and samples please refer to the{' '} + chart.js website. +
-Chart type is defined using the type property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".
++ Chart type is defined using the type property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea". +
Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart.
++ Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart. +
-While a series can be customized per dataset, general chart options are defined with options property. - Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.
++ While a series can be customized per dataset, general chart options are defined with options property. Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js + documentation. +
-Chart components internally use canvas element, refer to the Chart.js accessibility guide for more information. The canvas element can be customized - with canvasProps property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to - provide fallback content like a table.
-+ Chart components internally use canvas element, refer to the Chart.js accessibility guide for more information. The canvas element can be customized with canvasProps property to define aria roles and + properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table. +
+Checkbox is used as a controlled input with checked and onChange properties.
-+ Checkbox is used as a controlled input with checked and onChange properties. +
+Multiple checkboxes can be grouped using a list of values.
-Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -564,9 +565,11 @@ const onCityChange = (e) => {Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the checkbox. | -
space | -Toggles the checked state. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the checkbox. | +
+ space + | +Toggles the checked state. | +
None.
- { - useLiveEditorTabs({ name: 'CheckboxDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'CheckboxDemo', sources: sources })} - ) -}) + ); +}); export default CheckboxDoc; diff --git a/components/doc/chip/index.js b/components/doc/chip/index.js index 1e4571b4af..95042be9b3 100644 --- a/components/doc/chip/index.js +++ b/components/doc/chip/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const ChipDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -59,7 +58,7 @@ export class ChipDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -107,7 +106,7 @@ const ChipDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -155,7 +154,7 @@ const ChipDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -207,7 +206,7 @@ const ChipDemo = () => { } ` } - } + }; const extFiles = { 'demo/ChipDemo.css': { content: ` @@ -217,56 +216,60 @@ const ChipDemo = () => { } ` } - } + }; return (Chip can display labels, icons and images.
-Setting removable property displays an icon to close the chip, the optional onRemove - event is available to get notified when a chip is hidden.
-+ Setting removable property displays an icon to close the chip, the optional onRemove + event is available to get notified when a chip is hidden. +
+Content can easily be customized with the template property instead of using the built-in modes.
++ Content can easily be customized with the template property instead of using the built-in modes. +
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
backspace | -Hides removable. | -
+ Chip uses the label property as the default aria-label, since any attribute is passed to the root element aria-labelledby or aria-label can be used to override the default behavior. Removable + chips have a tabIndex and focusable with the tab key. +
+ +Key | +Function | +
---|---|
+ backspace + | +Hides removable. | +
None.
- { - useLiveEditorTabs({ name: 'ChipDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'ChipDemo', sources: sources, extFiles: extFiles })} - ) -}) + ); +}); export default ChipDoc; diff --git a/components/doc/chips/index.js b/components/doc/chips/index.js index 893fe9aeae..5bbee6bcc7 100644 --- a/components/doc/chips/index.js +++ b/components/doc/chips/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; export const ChipsDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -53,7 +52,7 @@ export class ChipsDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -90,7 +89,7 @@ const ChipsDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -127,7 +126,7 @@ const ChipsDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -167,45 +166,49 @@ const ChipsDemo = () => { } ` } - } + }; return (Chips requires an array as its value and onChange callback to update the model.
++ Chips requires an array as its value and onChange callback to update the model. +
-A chip is customized using itemTemplate function where value is passed to return JSX.
-+ A chip is customized using itemTemplate function where value is passed to return JSX. +
+Chips has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
++ Chips has built-in key filtering support to block certain keys, refer to keyfilter page for more information. +
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the input element | -
enter | -Adds a new chips using the input field value. | -
backspace | -Deletes the previous chip if the input field is empty. | -
left arrow | -Moves focus to the previous chip if available and input field is empty. | -
Key | -Function | -
---|---|
left arrow | -Moves focus to the previous chip if available. | -
right arrow | -Moves focus to the next chip, if there is none then input field receives the focus. | -
backspace | -Deletes the chips and adds focus to the input field. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input element | +
+ enter + | +Adds a new chips using the input field value. | +
+ backspace + | +Deletes the previous chip if the input field is empty. | +
+ left arrow + | +Moves focus to the previous chip if available and input field is empty. | +
Key | +Function | +
---|---|
+ left arrow + | +Moves focus to the previous chip if available. | +
+ right arrow + | +Moves focus to the next chip, if there is none then input field receives the focus. | +
+ backspace + | +Deletes the chips and adds focus to the input field. | +
None.
- { - useLiveEditorTabs({ name: 'ChipsDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'ChipsDemo', sources: sources })} ); -}) +}); export default ChipsDoc; diff --git a/components/doc/colorpicker/index.js b/components/doc/colorpicker/index.js index 331cd6a1ba..a957713373 100644 --- a/components/doc/colorpicker/index.js +++ b/components/doc/colorpicker/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const ColorPickerDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -39,7 +38,7 @@ export class ColorPickerDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -63,7 +62,7 @@ const ColorPickerDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -87,7 +86,7 @@ const ColorPickerDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -113,11 +112,11 @@ const ColorPickerDemo = () => { ) } ` - } } + }; - const extFiles = { - 'index.css': ` + const extFiles = { + 'index.css': ` .p-colorpicker-panel .p-colorpicker-hue { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAACWCAIAAAC3uvTNAAAA7ElEQVRYw+2YUQqDQAxEh9GWuqV6Be9/JT88RN0VRUuv0ElBwhKY3yF5m90kLKd+mF/975r6geNyjm9Fy0kgqTJ6nqoIdGKczjmPJU5tZxA8wWPL7YOHKhZAlcmTAVVcxSCrMbfgqY/H6JEOoASPe56tgSrqLR7U2zWojwWjJ3jq47HEiZoGTwJxP1RRXw8y9RZfCMhbhTHOVTxXnUFtPJ5rGjzu35y2KfKGQxWT2K4TQL1d2zz6KAH1kRU8wfOXx+37qY3Hct+aDaqot2u7R/wMuDS3qnj0z0HqK4X/+kRNHdfUwFP2Nisqe/sFuUZiVjC9HCUAAAAASUVORK5CYII=) } @@ -125,48 +124,50 @@ const ColorPickerDemo = () => { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHotAACAlQAA+NcAAIhSAABxRQAA6mYAADkHAAAh+QMnhVYAACf5SURBVHja7H3LjuRIkqQaJ+e0wB72T/s7+w/qOKduoLBd3ZVZmeEP0z0UjSUUiqqpuUf1AoMJIBDuTjrdwyhUERVVMzZ3/y8z+99m9jAz33/7/hs97vb7zzv7qff54n7HNncv7Vc9nnjuf/Ixsv2i7y/328eii/EMP9vd5fjvr3cc4/Fa793dvffe+/P57Pf73b99+9b/8pe/9C+99/9jZv9rB8Dsn3kWT9RsQCIgzE7Us3r8le+Ig/fqMRKAp8cAEPAY4/Gy93l2cY393P0J+/nYBtvH8+e+rfXe246cBr/+eDz68/m0+/3uHx8f9v37d/v69av9/PPP/tNPP9lf//pX+9J7f+ygenzCSfPZgLxz0l48oeEvXKVv7fPisU4/v28yM7O2/5q7t+A5P3Y8hvq772/u3nYQjdePfXbgbDuYxmv+fD7t+Xza4/Gwx+Ph9/vdbreb3W43//79u/3666/2z3/+0/72t7/5Tz/9ZN++fbMv8A+Vfmj/ZmZtf63hgLXWVo7z0ueOgQ0enwY9+MH9Kp99+Vw8wcG2bQc+7+cF8BgcC4957EevNwDRRgByAFYbQILIdIDI3e35fFrvvY2/j8ejPR6P7X6/++1284+Pj/bjxw/79u1b+/XXX9s//vGP9ve//91+/vnn9ng82pfe+8qJ5YH1FeAEJ28KEPpsg5NyArEA3+lEtdaOE8MXQvBZDBKbAYv3w+PhNnhsapu7W2tt671ba63vf1vvPQQWRaUjUu2/B9D2c34C0YhSO5B8j1B9/9uez2e73++2/247BfrXr1/tX//6l/3yyy/2yy+/+NevX+35fNoUWDAwKZCKESYEZyGCpSdeAEnRTRW4YSQKgJQBy+HxRkHUOZrtwEGAMICOY/wRhE60NsDTB7DGMZHuzMx778Zgcnd7PB4DWPZ8Pn0A6na79dvtZvf7fbvf7/bbb78dwPr111/t69ev/ttvv1nvfQqs8Y/5Im2VIluR3sag+uQ7toDi5PcQ39FEVLqALgNW8HgDJPWE0i5gIp00ANSZ0sxs0BkCyDBCjef7376/NgT51ns/IhYCCzXV/X63j48P//HjR//4+Gj3+719+/bNxu/379/9drv9DqwoUlQBpehnIk6jSOSr+ir4jnysCCDZ+46T1FrDk+2tNcOLESN6AKzTRwFQZsByEteK7hrS3R6ZBngaRizQUcfj5/PZdh01QDWe266p2uPxsPv93m632/i179+/t99++619fHwMrdV+/PjRbrebPR6PZmZaY1WFNdFkKwCqLYjriI48SCAqkU5RldJEXtBLBhGpR8AiACGNdd4v0EuH+GZggd7aRJTqCKRBhyN6YYQaVLhrqra/tokscEQs+/j4sG/fvg0hbz9+/LDb7eaPx8Pc/UKFHlz1L9GkONk+iXQZ9UnwKKApQNIxWyGVtxkV9t7bHsGOyBYAq+3jzGDCCHWIa6C+Jva9ZHs7tWEE25D6CEwDaObu2wDW8/n0XVPZ4/FAkLUBKgTWANK3b9/6x8fHtuuwASy/UOEMT8paSFJzn2WEETjpODK4Bd6PR1GVhT1mZgIUjhdYkt35hOKG3cD7oDVw8pYYdOOYw7AkXXWiwmEbDDpES2Hoqp3ybKfAE/09n8+2R6p2v9/brrdOVIiPPz4+2sfHhz0ej+3xePQRGTliTb2fLErR1e0FjeQB2CLqi7Ix3keefBF5HPZzYQd4JNCVfzRokSmTQDYcbtZU214iMQBiI5G+Daug//5zimSwDS2Ek0AHj2oYn0dk6r0fgn3XVna/3/1+v/fn87kNU3QI+X2bff/+vd/vd3s8HkekvGisiVGYgSoDVEsiT2iyigzsopeQgnbvx/Gqx+PTtgiATQBGelCUwTUGDBxzUxkd6qMByID6DEouaG6iN9VRoO9AQyBhJriBV3VQ4W6EbgJYdr/f++Px2G63G2aJvgNxZJI+wH0CFmc8k2wrjXJIQXBCj9d3s/L0VgDJBcScKJzMIG0BuNJ5FKkuEXCAqxClsowuMi3VYxbiJ62EYAIgDVrrHLH2KIXaagBpRCnctiGwBqD2yLXtUWgAaQAMjdIDgB8fHw4R96yxXgBV5rAfJ1fQravPGumyos8MaALUlwwPwYRCXgGNdZWyDlico/YR9oADAE7uusr20DkHf8r2E8flmAFMh+cbRqjn83lsez6f296NcESpkQkOnXS/3we42g6utkerfr/ffddhbQflQaPj89y9lahwxesKKC0T4XiVSwOTNJLyiDLt1DIdJQS82rYSlSLfaRNU2MAaQOd9i7K9AUb0o0a0IothwzLN8/kc20YmeGis/bUTre1Z4TYi1g4wu91uDr6X7zRruw5rkgoDEKlolUWKCCAVoEURxZSQJ8CYMk5VticikQEFSkc9K/4yeJSOQ0obQh6jFdoSqLcITJ0tBQTT0FXjdbQUIAvsz+ezuXvbW1+s9953CtzAbrDb7dZHlENb4na79cfjsaFFMT5jnI+S3VDcJwJPRG2evB+BEkU4BTKPaJIozIPOAUWBzlEIvxcBS+2LOglFuTM4oeRy2m8/YRdLAbRVH71S6LSzdwUdC0iPB609Hg9398NuGIVnduL3bUcHBEdPM+vTiFWNYBOgWGYh0L6H97MQiZTx6YHYNnDLEUwciYztAlWjE/ttlME5ZXlHJBrWA9b5JhGLHfROADuAhNFrWAoAtpHFdXcfAh47Ghr0YA09tqGRumutkwE7LA4z2xBYUQmkUqbxLCIJY1JRIeopT7SUKUCojI7KMxYArqExySZn1gfFAAs01sm7wmwPTE9JjQCyEaUYZNu+30AYgqcrd33fZxuFZtZYe4RyyBjb7XbroMl8aCoE6gDr+O5fVIE0A0zv3aGJ7wjp+2tH9rJbB6ayqQb+Az8fINn7jxToOCPzSG8RxTXhtl/cdwCnTwT7MR4ELG6oc5HtObnpp/4poJWTFTGi0XjfSO/JAPVdQw2v6jnApOyGYTOAI98AiIdbPxx4LFbvugw7Kw5cfBGV+ik1BtX6qB32orH4GIKO0ZJQ1MmRT1Irl0w4SkJDnZHmMWETXLwxtgYIdJjhdUGF3IhnAJgjGRj6CemPxLtDG8ygvw6txdtOhaOp73gO9oPt4NqGyN8j0jaAOOgSW5VHZOMCOFPhTF8p51s994QOmfqUPvJApB/utqBJRX0bTBy4RC/x/GRaMkgmlsJF3KOFEBidbG4iNSItbnDS0EbAks62U1pD8xTAZgAutBs6UJ7v+2yot0D0H/qLitqnwvnQsFVgqZpd9FxZES0CUKSjqLxigYnJ2VhEmS6EOReAT811rL8WgLXh8Vg3ofWwA+mSNQLINmExdDBFEWRSvA/AjegzBHvkY8H+p6gEYv6IbFjGuUQsprAqLSYgs4mQtwmNeUCfyvl2bo6j6KLc9YstwPvS+0xYAxcdFbjsjaLVoHjpvKPdgJoKAMcaC2fXODbwPZ9PN7OGzvjYd4js4aADiNpuJRwZ6PCp0LLgRIUK7meNNfOZEjBkJRaOVJdSSkSTIqM7rgZBca5qjMpZh6Jw5+iV1fJWtqFews8D7WSsozgqiVrhAEDn/SBadSjpDCAeVEjUeNo2DFLY5rhtHHOPdCNK+U6XGwD/bDfMIlY1WhE4PHHNI4A1dYxAU4XHUIYoHwMjmSpCZ6BT9Dd6pLDTYUxcIJpE6uukqzpMdjhto8cdvKpOvesH3cF+h/OOtIglHnDtj5LOHgEdmgZP+yEFAtuUqLAFnQtyP8iyuMB8WBJgR1yyxgGAkakFwLlENkFpRkLc4AQbgc0n+51oblAOfO4lewQKc4peWFh2ENzOzXy4DaIWuutO7cdD6xx0ho+HVTDEOLxnFKbZUjg04E6Bg2o9MIevdgObo4UIFWmrBuhN9QtrGQQI+EPsVXUVEVkHBd7UpeeKIo8JbYXFYRP2ggmLAT2ok8M+ohmA01QkwuiFpihEqUYRa2Mq3CMNUmFjWtyp7JQtDsCOrHAHU8dmweGZjYwSorSdSjpF6otqgCXARTQ5iUycBQ7dwVkh7yd9LAYaG6WTDHD6GgOL/KqTjUBA6kpjsa1AuoofH5kgPwbnHUE3PCoGXaPCNb5/dDQ4jLFjQpSJ9xmwLAFVn4AtAowFYPGkM8ECC8Gw15wzFirhOLnkTdT4PAIbFIgjMDkbqUizkN1dtou+9Q7PO2WGG7bGoI8VAM0hCrGYd0oAnH0rBBOiKrUbkozPFwA3jWbZZwsgeTKBIXL2I+q1RNzPgHbyvYbmEdmeilJOFsXIFk009xnPA6TuBnyM2grfh1rqpLmoHnn6HlBQvui28b7xOWKisIxYF7tAgKklloGanOBFoLRk1ktEY5445JZkf1GdEBfQkBYD1sXIp7pQoXjM2R33sOO+LcoKdzBjScfJee9QG+SscPRnjcenyIbvo3LQhiCmHvsOLTMW2g0TuptFuAs4lI5SACRwc8lF+VZNUaYQ9TMtZYGQb0Hr8Ba0w1QfH5po2ApCsGMJp2OGBuDBiIVA29DvejwekgrBQkCN5ZCVnqgOaRLXi4DEb5yDlApLYCIxHwnxVyjPgga8GXg8oEDuS3dM8xNKPOk9thCGTqJJppbQX4Pow/sZ2wtAPyb621FjOTb3DbpCehs2whhLbPaDx2pSa4eGANSXijFi8f4GmEyUY6Jow3pHinoB1Ma1uARIDF6mxVeimQVCHP0tg8LyicbAuzpFL9jviF7Q/tKhsH0yQckQ7QAiJyo8KA0jFACpg9vuoiLg6MqTIXpcV6tUaNEMYUVbKu2f7RcBSWR/GTVeQJFto8euwMRZ57hyx7iRWMcGvosgB7P40GVDXOMx0I8S1Gg4E4eywE1RIWaFBJDDx+LskUE2to3pZSozBJDNs8IJpZ0a/9TJ3534sV9pG9sNTE0U9bB/yYVRe9nGrcojonDNUVkUUTSb6SoCz0Ws4zGSbQg6zgLlNnTY99c6l35GZCI6RN13lG6gG3YjmwGXw6xHrGx71uxHK6ZY5G5Tx4EFUUxFPVetLcEyQKps48JB5++EeuJSHcBtrLfAjmg41ii8iU6noKOuBuPno8MBvC+MbidLAnSd4TR/ZWUgaOm8vq6xotphdKJFS0oTGaAFYLKgCM0n10UHQ0aLbFq66HDwaMlF9Rqk2a40VqCrsCW57ye0K/CwxsIeLKKtC90hLY7C86DXPZrhhAvH/i+0Mjh6EQ2ySeqr4l3ZCGo61ax3KrMfPNFHHmgsfu+lyMxLA0WinCjPlaNOkQdLMZfIQ89PugomWaDzPhz1LTipJ10FNgQ+b1w7xONNjn8CJOspFvNUysEVoXONNel8UK3HvmAtmABGRrGtCC7V0WDsSzHdcQE9mFjBFoKiTAvsBiedhfbCKVoCHbH9cBLwAU3iMRCIbCOw/jqKyWhhiPmQp+yXHPe8VhgBYCWyiQxy9tcUpTGNFo7VAi2XUiE77qp7Qbjrp3mHSGdAb5sAlQQFWgoYXiArRKrifixTVoTICtFuONEpRCaHibK8aK7D3Mlxg4JtSbwHLTGhXprNoIkiV9BLlQEwshRc1ASjKV3Sn1JCP8r8gomopuwGKuEgWNhtv1Am05aIRsP34udHBgfgQQCdgKkoEj0tBJT9cVMEEzdPuFLhrDwza/KLAEZzDUfjXybW8X1oSRj3rcMqNU10MKi7MrRoHiF3JYCzfsr88H1oVSC10usnpx7pMrMb4DV23Q93HVeiYRrjKfmDEqF33Uk3Oq0WqHrcj4xY0KCmwqh9Zva3oNOauEOCV8Q7ao/EL1MWA9Of6njgRj4X7cdGRWjpwuNECIpUHkS+jQDNrTKYKXJDIEYsIz8Ko9RGbcUYlRymxWON0Fig49pb4pYpuEqhpsKqYRqUbFINlYh8SXcBeCzyoQJH3YLGPksoMivjXPQW7XeiuERHZRHqoEVw0Lnxj+2Fk/OO1IeuOWZ36HGx5hL7bwxAPK0DjO8AK1vJxSagU4150eKwFpRvLlYA2xFKZwn91YLPOhWTsYwzsxTgdiJhNIs0G0QJg5PEpRvOItEcPYEJdJPNwMMrKw8A9T/C0waAOmmeEcna7+WXksaKIs4sml0AtmgjqC4GGcnUcRSlUshW7noDB91EZuk0+cEFxbONEIl+ZyCJ/YymrV9KQ+TOG82W9ijikuNvgcbEi+k/MPJyVeEljVWIYiH4koJxtmZV1sulsj3LqFFEM349ctRN0aJ6zuBlW6FChaKDAd9zoSRhYLLxqaIXZ5ONi9M4NY1tDl5c1/Jb6r0NrOo2bpO53CcmAODqtkukigCnthGNZVEJqaHT+0KNhdqJhbly14nqTpYFLfxh7HFRDfGizSjCskiX20TUisCV2w3FTFD2ZbGPla02o3rXZ9FsITNUjX6RQGeLIRL6FkyYcCXsxW1LVCZ4cegJOMYOvIq+2Iajoi5aHXa+odPlQsXvwKsfTvR3q4p3dsSz5j++8SJ/KZt0Mlh0jCgaTWgwms4VaQwP9mui/yqNRASyTLybcNeV3trIGe9KwON+ogUGC9enY1BN8RSFqIpwMUrtfOfY17LCpI041EbBzGSV0cmisOipsgJFqrZi9X+kuinTYgJA8jhMd7iUJMyQOQGVTzIDieyGkz4iUc/Oe4dVbzZBh05FZ4/oTznxEljD5c6iUmQrDGc9obGmoh4CZEzFh8YyC3wsizI3Me39otPIdc78rBBYTBViZo4pK0LNI6RtRgC69E+hpQDH3sR0fKepXXwHi4bgIMA79Iixj4WPOxWjrxqrUjuMSjdqra2kPhjZBvgdwvmEAd15ZoKSpSAb1hD4Qo+5yh4ZmFFEEyCRjjyPI/tg4II3QZenLJPAPsZno2LypXKA27MVHVliKLshKwRPxbuKSgkoZRdnRndCw10ojyOiaitOIl00jT6kPWE/lEDF2eOgrsBuiKyHjagLb9WLJR0T9oOLzPVEjQN8SnO11oab31prDu77MErnGqvappzMPK4CzZXADmwJi6Z8BdrsYpAGNcx3gSXFexVkILw70h2e+KGbRNaIgn0LANRoRcBO+25KN4F+6sQiKFcODyu1G16xHxIDVa1Eo1aJ8cmxs2JytGJfVIy2aA6hinJEd0p/+cwgnbjrJhoDjaZfScCDFJH/B72u5kBmcxPUvAE1sfi0ul8UseQUeBLtbRKFZhNTLZh5YyrDg5MrJ66Kx9Iby05M9lwtYzSJYivg2qA+N8vSkO4syBJNUSG56CzAnZr1Tlnh6Mfax+J4PBr9IKot+VgVSyFccDaqNRZn9yhATgGzAKooWqkZOjh3sAUa5ZLdLYLM1DHIrnBlEzAQry93pNcGqwaeqBZ1GtCcUfXkdFqXqTCYfm6VVWMyAEZrZgWWRhM9QKlrn0U1sbAarzBzWbVPTNBwtSQR2wsq26YSUGQtyP0R5ERxFyqcPVa2h8iYnTLSU8Mle5IV5z2cqJoJ74Du1H6WzGbOKLMUkYIZzp5Qps9Ee0XMs3e1Eqn4GJn7zk2EahtMyjhFupHBcXZKrceZu47UucmI9Q4VfvJfZSuE0Yw0oCXlnFRDrWx7RU+xF5WBh+wG1Dboe3UwP7swQtuMFvE1BAr2YkU/qMHUtjKwVrRWBArVnCeOO41YybZoTXYLANlIY83mH34KsKIINekm5ULxBvTEBucmOhTYYO2Be99QsEcRKrMjXrIbXphqP5soMRXyiZg3RasqokW99up4yj4Q/fIl2syi1mT/6cSKV6IprlHBvmCwOLGpIKDmRXCTXykrnAjyCyWpGdAV0CjjM3hPGKHQkpjMal61Ilql0BzpLdHa0oniD8oTC3Hw1HY+tjJSp1SGnQ404/mwFPx8oy2eMCF11ytUyECyqp8ljhFRYaWmmIl4FxHKkt72ioeljMRNZamRcBelGgWWLTBfsU345C0xILhZT0THxmUdpZlGnRCSNxf2g9Rd7zjvLeppd73YbATIMt0FlDa1FqJIJ+qRlixZxHXFavuyqYwz6Yl3VYxG519M0PDo+yYTPGZlL3nBk9OeUWWJCtMidAYK9cWSfipTglropdPxsZk/MTgtG8hKJlh9raK5YKVlhzIQrliTaS+MKEq8MzU20eqy8RQuFO+RG09rjI5WmRaI95LznkYo3xdPE6CoUKFHi3cosKjOhYjiou/AV3kCqtmV3agzIQNXqxSnDe7uEGilMLsTq7+EoEt0Fy9LEFkNNko6YVY4A9ZouptRGO8HzxtZ/5dUO4lYYRbHa55y8Ve1xwRTuySgKDJmIMzmFWYTYC8aCBaNVYYrg0KKegJPn2Sfl/YZO995TYEQI5W9bDcks3iiKFJp+rPA85rpNBOTMyT1ZdqJVgEMPS7XyyCFES1q3OMEYFbsTioIVun7Clx1NYMZP2cjAW/BxInNzjekr9sNb04Bk6I5ocJSVHKx0GxgP6T/C1JhJGgrmip4LqMIZoUFw3QaibDLAxYekTqKoq3KJi/RS0yOUKUcL1PhZ80trHphKvIks3iiWUItiy4V8LzTUrPw+ibm53G/uSfU52w9FKiQPSZTAl2BhyZHRHXCnAor0+SjSDHRR+E6Ddl0MY5Y1W0ZZfp16e1wichkgZGs5TmkqmSbqwkbLC9YqwoAnjRitE1Eqct71HlJlgNQoG7u/jsVvhOhViOYJ2tofWbEUgD8jIj1KlVSppVGpUm2p7apblZ0wtMoJaZ0WVILtGRq/VljfTKwShpL2As+mZg6O36a7U2cd59NvCj6XS3SWMpVT7LHkOKo5SUCYIOJppca6OwYag4h02miuUIqjIDliRHqlanzZEOEWWHi9l8ilrp5wMTNP9FJkFm2QlaYeWxhVljVbOJ3KSuEC5QjVsggOzi6KMifzldrrSeF6OWI1SbT6ytZoru+l2BGhe0zIpZoRmwTz6tNJhfMjiGn2WfbJkDjyNRmVMhzBFgrCfozmEvITvvJfE1o8o+s0Oc3DLBocY+CeJ/tF3VFmOijT8V61NEgDNCmJmEm8w3D4nIwuZUjVIkKwc2faSk1u4n3a5GjruhOtQ2prJDbygVNloDVBAVeXo8yPdHWosxNTzLElgl2MfO5VP5h2npFyE8ojW/FYolgj3RYKwj2BnP9VGRrQv031Fi4YiECRL0naJHREWumsWbZnOtbyVXc9WxF5iZmgmRWwgWoCb2qmUVRd4NP9JYHzr4pLRY0FFo0z4+zWnH/aY9aeFTHBHZJiHmBPjQwfz6v3Ke+47LGyiJV0CLsSYdpEyvMRCc++tzmwXpbijYnAJveVzoo8zTuREhotWXGaBKxGBRIbU3onsox25giDxNlT5ke9MM3YbC2SdRa0lih2A5626OZzjZZlC1qObaJWPcos0sshmmbdHEGUNgZkfTYN+WiD6AyVRKgZsKedZSzrlLgEZJBaimIXNENBNbtBhfLDlWjmxdX96uUgsS8xjbRZekcxSBCSr00KVaXgTabdDKZDGIqeqpedLXOgud3SruMu6JBoj2nx8t2w2UtiFdn6aw+T2ZYS4DNTlTyOWHr8gs98j6ZNCspTFBatB2bBi9ZZXRRctZo55uKXgzW3Xf8/cXf9VdUoLYMWDNB7QUd5olm8SjqqTbjZJ0IOWs6Wj0mWg9iZZbQqxljYkmE0VNZA5HGUtsYJGSOKpo8ZYEIJlHCacqFh225xsoMUdN3hOeTnE4sLYhxD45XmXoW+VHHohXQWhvdE3oGKmcdmCxkEiYK1QQAszkRsXwCzBZotsu5YC2Fj1U7MtwPqZ+A5fkNAaKsrBK50tVrZms3JAuLyAgQbTO9Zle4hGREw4XJr6WW5yxdp0bJTApEU+V4llKLLq7J3ED+Xkc7DGfe8LOV7IZK94Ja4sjyNbCmvV8RKAmIrThP0YNo5gVwHItf0KSNbCGT2WODe0TPoll2T+pTdiZ0WESFFwolf8wpU22ZnhJF6andICNUEm0yYW/ZdHkFSl7hRZmZ6vssAHC6yFtkJ7ygv0K7wa73f7yARzy+lIjUeWMqBM3UAr01Lib2uKaUKrLDuvMujE6vrOOQTXCd7avmrLlYzJ9S3Wx57xBkQdboonzkgQ2hwDKL0O76lnd8k/aQwuiejyEVqpJWQGkRDVZ/1px3RnoAlnQlwEADhTOdg2wuA4O6430YRZJk4aXF3Cy/eVQKas7qmJJEs1/o8NNYuIp6UbSEJQqixr6WWA2SCmW5xvRdvGS0CGgypEX6otFM53BFP/E+lXmqyNGoU7KtmLaFRU3k8YN9WpDVZced0mTCBsp6uFBxpOdIXzXx2vZqEfpIkyEMZ9nd6R8e97UjUSp77llEi6jHt+xNbyhgtM57Eh0vjXmV8g/eQKE6jS6iyaizZDETHrZKmHTtjX3KcR/foQdO+xoVFhr6mpiXl7YsGy3g7ws3MVflC4+X4bbAT4vuPOHqs5NJIWGPF2dukT8nwOau762YabNwfATItqxDlywEFYk2/r8m0WuLgFWxGUoAFNGsfC8dNTMoygotuZcOR6wCjdmsnvnqJF/qXvWZLlNue0WjTVqUXF1QykIItke9WgbA2krAssLdVhO9ZUJQZ9tkCSiaK8hRrgCeyv2r24y+kszykqREyxREYprXlA/GP5y0IRItj7ZlIFNRifcTrTdaY0WaqkJzE701NUhnJ00lCQEwsruQtaQtR1GiKX0XZcSq3x9Ape6tqDJbaTvw+7m7IehAiNgntCCqVkRQOWhlKpwAa+VWKFlkakmWWB5wC27bG2SIL93Z1ea3zCttq1wkynmPji0incxARWRSkccCZ139fZkKU8c40UcZ3aQDLpz/sLZXAJm6OtOLYWX5gJVtxRM/pdkK3RFlVujfo0SENNccWEkEyoCQvged+eL0MC+K2PTkUEZ5cuOD+YvRhaHc9ugv949faI7oFFN5eZfXzPkOdFgUwdOCd8AW2b4hZVbshupKyZXV/ppK+UUnwZQu+OQVqGsq7JPoMt03atku7hutKJ2uv5pF90CUl6IeZ3wiK6zQYY0KZzbDRD+F1FeJNsWsLdNA4Y2eIkG+AKQl8BSpMFpLtfRX7R9kdDITRCciyvyULvtsYL26nQvXK6DhbC2LSrLSb/mtVyyLhivabEWjTcpIUaG/VTUTue8ntx3/CuB07l6ZAQp7tsysZRortQsyWgw0i7+wXxrBJkapnASQNPXNXn/17+zzKxNIZEeE0l7B9LqNvtcmXHd83zaZO5h1Pcw1lriyohM9i0rT6MXiepH+lujzE+julUXnymAU9cyZxOA+9EaNchcao6zPIvqLsmwKEKi//iOkwkRHVeiwqrlUCC6DJaHLyrpdHvRNyWiyApwsSnv9tjBLEVFNfXshqjrNxpK0V9Bfsd1QHUhlAUyc33DwTawFUb3iA41Volo66ThnsXxh8ISRzC2HDojliykzgCsXjZr8gdO2ZvT6VqPf7MQWoluoubIu0iwardb4qE1aDlRB21T2LS/tZGICb9Jq3YQf5rNxy8xhQXkyYwyikE0MUrtErGwyRdKk5wG4wmn4BX1mBZqcgilq3KPHFwO18v6F5QeyMcnqmCt+XoUaS9osiXQp0FJgsTgfwvH3fjyb9rejm7yH+Sk1BS65Rc452gCT99nEeA09rFmf/4rVUJUT1WJ81vxXKIJ70KDHTn8nK2IWnaJt799hddaxUNFfq1d7YOAp8LcJrVc1nK1GjVmnwCSNXynuz8Y9M2952wYRp3x88Tn5vXQy8R2d8IS2ImBYRI8FqktnoVQj0qSNZOkkW2Eyb2G/ENAe30CrelFENGkzGgz0Va6xFoBlBdMzsx+sAMw2+8ez42VC3q7rPFgFdK+8JjRlJTpbpbtDXAipPgoqDyFIFsAUAat9mWUxFe0xEdvlq3ySGEyv6iIgLSiCX6h1ov2y/WRL9IsXxiXlL1BuutbF7DiJLVFx3+tUOANJAZAvAUFllJOBtSJNlibmJu8vj0ehM6Q6HlaRDOyoT4Dq3NIjHHULMsQocmkqTNLRWYSJ/pmVfavcz5liBRQrYCtnigWQTcfrxfctA+mNCzKjWN7+h92QDeCLUWsm6itXepT1hSvYvXhS1bHlehKFx+r/qZysGeVYVqoqHqN8Yb1QeJ5TYeWERf1Z1cczWqtQwgsAj56Xv8vKZ70g9g26S18Z5yVGwGhXAL0XBXxKhauRoBTiI4p9ZUCKgLQKgF8By+Ljy8JmwRKas/F4aayidbImGiuqF8p1Q98GVvZPRxMpOPNKsrCLo6s4vBgRo8FV6028FfU+8z0JMK3yv2ZjIKKTPJYAzyyKaWAVwrP0qWb7FY8XtuNUo1oVeFWRXDhRSyd0Ieq+StcWRN9IXL+roS4rKb+ssYoRbAVAFaBcwLUIIp8BYuVkV9qBXvn/3rhIOBq98v+FUWghQtWpcAYYE1O7FgfOViJCcHWWBi/L0lYo6819qxdgCZQTvfbKxcUyJKPEGQBjKlxMQzM6e2dQl04AaUr1vALiFcCvnECbXQR0wlqwQNzKBZPNE1QgerfB7xRcoog1PakU/lKAvHuyiiG9fKzZSXklYolWlYo9sxLVo/PwKcCOnos7U2QUOaXCtL3lVXAt/OP2Zw3UKuheeT4By2dfiC9duG+MXUv01RxYBYpLwQZNf2NVvsNRV8/Ve2YDhfuLIvClKEz2gnz+DrDwlmxOt2hzccu2NwE6u1iWLnjTyxGkIAqAlmusd8Bm8U0yj31oichsUZHsua1ShSooF6l/etUnd+IwS+Y8zjLOYvTl/1U+V3qouNpQVXed7QabtKysgE3RpLqSKldb9SpNTpjP3le1WCqvBRfa7AKogPnVqJXtUx7HSrQ6LW6b1KaWgFR9TXzJV8BTeQ3D+yVqBO9NFxyrjo8ARBlwn/jadHwqF+KCthqvnanwzcFcAZeKaMvgLAz0pbRUOAGlzymcQCu44y9fNCsAiFzyBQC9Yje0acRaOLnLJz07cew7rZ7kyeBZdVALBfmXx2p1TFZBTp5eNbq/PFbGq828GKHSiLQKxhWQUSZnnzAgqwBafv2dC1QIeV+JrquRsxC9PImAVyqcXYkjZVb7i22n9hnYdnHXs22RNmOHXXzfYQGE08f3z22R6SeuePx8qTnE6+G2JFJE52TFTa9E42XqK7zn7LxPIlBkCagaVmWbXL5xEsGq0c3oam9R1lNJ6YvR6E/ZlnhOKxGqHKWK22ZRrE6FVeAFYCiD5Z3BenfQKlfjnzk2s/cuXmjLY/fu2EyBNRmg0vY3BupdMK0O2lIPeqXHXLnwq/tkOq0KpM+4EBcuuHgyxeIAzsBV3mcCwqV9XgBrKwJ6+eSJIndqylYnRiwAwQoXin/GPvSzXeyGPwsUk5NVOWHVaPUpA754oqvezn/LsQr7sQJgrUwtaoXBWBmUTxucKh28eZVWLsK3x2oFlCsR992xsqi74QWP6t0r8933rAz4CkDfeU8LLJeq1qy8b+WiWAFGaHu8eAG2jArfAcorJ3/1arIXrqxXr8iXxPtqlMre9xkX0rvRbAG8ORV+EsBWuNzeHbDPHLw35cFnSIG3xuGViPxJ0bAOLFrd7+DVVwZahPxy2UCl68k+lcHzxYFtK//fZHw+PZH4BEB68XNnwGpf3g3vq1ffK0nBm9T06VfuvzGb/LOBtGwzFT+3fem9f/n/+c/8Gwa+2X/zn38DSFd//vNL7/3/mtnD/ufnf34+7+df/28AkXg9KZ7Ze3oAAAAASUVORK5CYII=) } ` - } + }; return (ColorPicker is used as a controlled input component with value and onChange properties.
++ ColorPicker is used as a controlled input component with value and onChange properties. +
-Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.
-Specification does not cover a color picker yet 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.
- -Key | -Function | -
---|---|
tab | -Moves focus to the color picker button. | -
space | -Opens the popup and moves focus to the color slider. | -
Key | -Function | -
---|---|
enter | -Selects the color and closes the popup. | -
space | -Selects the color and closes the popup. | -
escape | -Closes the popup, moves focus to the input. | -
Key | -Function | -
---|---|
arrow keys | -Changes color. | -
Key | -Function | -
---|---|
- - up arrow - down arrow - - | -Changes hue. | -
+ Specification does not cover a color picker yet 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. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus to the color picker button. | +
+ space + | +Opens the popup and moves focus to the color slider. | +
Key | +Function | +
---|---|
+ enter + | +Selects the color and closes the popup. | +
+ space + | +Selects the color and closes the popup. | +
+ escape + | +Closes the popup, moves focus to the input. | +
Key | +Function | +
---|---|
+ arrow keys + | +Changes color. | +
Key | +Function | +
---|---|
+ + up arrow + down arrow + + | +Changes hue. | +
None.
- { - useLiveEditorTabs({ name: 'ColorPickerDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'ColorPickerDemo', sources: sources, extFiles: extFiles })} - ) -}) + ); +}); export default ColorPickerDoc; diff --git a/components/doc/common/developmentsection.js b/components/doc/common/developmentsection.js index 60cd9b41bb..e79767546a 100644 --- a/components/doc/common/developmentsection.js +++ b/components/doc/common/developmentsection.js @@ -4,9 +4,7 @@ export const DevelopmentSection = React.memo((props) => { const isProduction = process.env.NODE_ENV === 'production'; if (isProduction) { - return ( -This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.
- ) + returnThis section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.
; } return props.children; diff --git a/components/doc/common/docactions.js b/components/doc/common/docactions.js index 8131adb32f..7e0061b33b 100644 --- a/components/doc/common/docactions.js +++ b/components/doc/common/docactions.js @@ -44,7 +44,7 @@ export const DocActions = (props) => { const toggleMenu = (event) => { menu.current.toggle(event); - } + }; const scrollToDocs = () => { const top = DomHandler.getOffset(document.getElementById('app-doc')).top - DomHandler.getOuterHeight(document.getElementsByClassName('layout-topbar')[0], true); @@ -53,38 +53,40 @@ export const DocActions = (props) => { top, behavior: 'smooth' }); - } + }; const viewOnGitHub = () => { window.open('https://github.com/primefaces/primereact/blob/master/pages/' + props.github, '_blank'); - } + }; const viewOnFigma = () => { - if (context.darkTheme) - window.open('https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648', '_blank'); - else - window.open('https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648', '_blank'); - } + if (context.darkTheme) window.open('https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648', '_blank'); + else window.open('https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648', '_blank'); + }; return ( <> -There are two ways to display confirm dialog. One of them is to use the confirmDialog method and the other is to use the <ConfirmDialog> tag. - These independently create dialog element. It supports the same properties in both.
++ There are two ways to display confirm dialog. One of them is to use the confirmDialog method and the other is to use the <ConfirmDialog> tag. These independently create dialog element. It supports the same + properties in both. +
ConfirmDialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state.
++ ConfirmDialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state. +
-ConfirmDialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes - 100%. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
-+ ConfirmDialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value + of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen. +
+These properties are extended from Dialog properties.
@@ -568,8 +573,10 @@ const confirm = () => {Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element within the popup. | -
shift + tab | -Moves focus to the previous the focusable element within the popup. | -
escape | -Closes the popup and moves focus to the trigger. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element within the popup. | +
+ shift + tab + | +Moves focus to the previous the focusable element within the popup. | +
+ escape + | +Closes the popup and moves focus to the trigger. | +
Key | -Function | -
---|---|
enter | -Triggers the action, closes the popup and moves focus to the trigger. | -
space | -Triggers the action, closes the popup and moves focus to the trigger. | -
Key | +Function | +
---|---|
+ enter + | +Triggers the action, closes the popup and moves focus to the trigger. | +
+ space + | +Triggers the action, closes the popup and moves focus to the trigger. | +
None.
- { - useLiveEditorTabs({ name: 'ConfirmDialogDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'ConfirmDialogDemo', sources: sources })} - ) -}) + ); +}); export default ConfirmDialogDoc; diff --git a/components/doc/confirmpopup/index.js b/components/doc/confirmpopup/index.js index b609885fdb..7dd10ff015 100644 --- a/components/doc/confirmpopup/index.js +++ b/components/doc/confirmpopup/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const ConfirmPopupDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -83,7 +82,7 @@ export class ConfirmPopupDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useRef } from 'react'; @@ -145,7 +144,7 @@ const ConfirmPopupDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useRef } from 'react'; @@ -206,8 +205,8 @@ const ConfirmPopupDemo = () => { ) } ` - }, - 'browser': { + }, + browser: { tabName: 'Browser Source', imports: ` @@ -273,35 +272,37 @@ const ConfirmPopupDemo = () => { } ` } - } + }; return (There are two ways to display confirm popup. One of them is to use the confirmPopup method and the other is to use the <ConfirmPopup> tag. - These independently create popup element. It supports the same properties in both. target property is mandatory to align the popup to its caller.
++ There are two ways to display confirm popup. One of them is to use the confirmPopup method and the other is to use the <ConfirmPopup> tag. These independently create popup element. It supports the same + properties in both. target property is mandatory to align the popup to its caller. +
The confirmPopup method returns an object incudes hide and show methods. The component can be shown or hidden by using this object at any time.
++ The confirmPopup method returns an object incudes hide and show methods. The component can be shown or hidden by using this object at any time. +
-ConfirmPopup is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state.
++ ConfirmPopup is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state. +
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element within the popup. | -
shift + tab | -Moves focus to the previous the focusable element within the popup. | -
escape | -Closes the popup and moves focus to the trigger. | -
Key | -Function | -
---|---|
enter | -Triggers the action, closes the popup and moves focus to the trigger. | -
space | -Triggers the action, closes the popup and moves focus to the trigger. | -
+ ConfirmPopup component uses alertdialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In + addition aria-modal is added since focus is kept within the popup. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. ConfirmPopup adds aria-expanded state attribute and{' '} + aria-controls to the trigger so that the relation between the trigger and the popup is defined. +
+ ++ When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element within the popup. | +
+ shift + tab + | +Moves focus to the previous the focusable element within the popup. | +
+ escape + | +Closes the popup and moves focus to the trigger. | +
Key | +Function | +
---|---|
+ enter + | +Triggers the action, closes the popup and moves focus to the trigger. | +
+ space + | +Triggers the action, closes the popup and moves focus to the trigger. | +
None.
- { - useLiveEditorTabs({ name: 'ConfirmPopupDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'ConfirmPopupDemo', sources: sources })} - ) -}) + ); +}); export default ConfirmPopupDoc; diff --git a/components/doc/contextmenu/index.js b/components/doc/contextmenu/index.js index 3ae12304f2..65a98b885e 100644 --- a/components/doc/contextmenu/index.js +++ b/components/doc/contextmenu/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const ContextMenuDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -165,7 +164,7 @@ export class ContextMenuDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useRef } from 'react'; @@ -316,7 +315,7 @@ const ContextMenuDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useRef } from 'react'; @@ -467,7 +466,7 @@ const ContextMenuDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -621,34 +620,36 @@ const ContextMenuDemo = () => { } ` } - } + }; return (ContextMenu uses the common menu item api to define its items, visit MenuModel for details.
++ ContextMenu uses the common menu item api to define its items, visit MenuModel for details. +
Menu requires a collection of menuitems as its model.
-Setting global property attaches the context menu to the document.
- -ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence. | -
enter | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
space | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
escape | -Closes the context menu. | -
down arrow | -If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu. | -
up arrow | -If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu. | -
right arrow | -Opens a submenu if there is one available and moves focus to the first item. | -
left arrow | -Closes a submenu and moves focus to the root item of the closed submenu. | -
home | -Moves focus to the first menuitem within the submenu. | -
end | -Moves focus to the last menuitem within the submenu. | -
Key | +Function | +
---|---|
+ tab + | +When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence. | +
+ enter + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ space + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ escape + | +Closes the context menu. | +
+ down arrow + | +If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu. | +
+ up arrow + | +If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu. | +
+ right arrow + | +Opens a submenu if there is one available and moves focus to the first item. | +
+ left arrow + | +Closes a submenu and moves focus to the root item of the closed submenu. | +
+ home + | +Moves focus to the first menuitem within the submenu. | +
+ end + | +Moves focus to the last menuitem within the submenu. | +
None.
- { - useLiveEditorTabs({ name: 'ContextMenuDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'ContextMenuDemo', sources: sources })} - ) - -}) + ); +}); export default ContextMenuDoc; diff --git a/components/doc/datascroller/index.js b/components/doc/datascroller/index.js index 841c21e5e7..05befe4333 100644 --- a/components/doc/datascroller/index.js +++ b/components/doc/datascroller/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const DataScrollerDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -66,7 +65,7 @@ export class DataScrollerDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useEffect } from 'react'; @@ -114,7 +113,7 @@ const DataScrollerDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useEffect } from 'react'; @@ -162,7 +161,7 @@ const DataScrollerDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -215,7 +214,7 @@ const DataScrollerDemo = () => { } ` } - } + }; const extFiles = { 'demo/DataScrollerDemo.css': { @@ -310,72 +309,77 @@ const DataScrollerDemo = () => { } ` } - } + }; return (DataScroller requires a collection of items as its value, number of rows to load and a template content to display. Here is a sample DataScroller that displays a - list of cars where each load event adds 10 more rows if available.
-+ DataScroller requires a collection of items as its value, number of rows to load and a template content to display. Here is a sample DataScroller that displays a list of cars where each load event adds 10 more rows if + available. +
+By default DataScroller listens to the scroll event of window, the alternative is the inline mode where container of the DataScroller element itself is used as the event target. Set inline option to true to enable this mode.
-+ By default DataScroller listens to the scroll event of window, the alternative is the inline mode where container of the DataScroller element itself is used as the event target. Set inline option to true to enable this + mode. +
+Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking - onLazyLoad callback everytime paging happens. To implement lazy loading, - enable lazy property and provide a method callback using onLazyLoad that actually loads the data from a remote datasource. onLazyLoad gets an event object - that contains information about what to load.
++ Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging happens. To implement lazy loading, enable lazy{' '} + property and provide a method callback using onLazyLoad that actually loads the data from a remote datasource. onLazyLoad gets an event object that contains information about what to load. +
-DataScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes - as any valid attribute is passed to the container element. List element can be also customized for accessibility using listProps property. -
++ DataScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also + customized for accessibility using listProps property. +
-Component does not include any built-in interactive elements.
+Component does not include any built-in interactive elements.
-None.
+None.
DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a product interface having code, name, description, image, category, quantity, price, inventoryStatus and rating properties is used to define an object to be displayed by the datatable. - Products are loaded by a CustomerService that connects to a server to fetch the products. Note that this is only for demo purposes, DataTable does not have any restrictions on how data is provided. +
+ DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a product interface having code, name, description, image, category, quantity, price, inventoryStatus and + rating properties is used to define an object to be displayed by the datatable. Products are loaded by a CustomerService that connects to a server to fetch the products. Note that this is only for demo purposes, DataTable does + not have any restrictions on how data is provided.
-Following sample datatable has 4 columns and retrieves the data from a service on componentDidMount.
-Dynamic columns are also possible by creating the column component dynamically.
-Column component defines various options to specify corresponding features.
@@ -1515,17 +1516,20 @@ export const DataTableDemo = () => {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 autoLayout 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 autoLayout property to true. Note that Scrollable and/or Resizable tables + do not support auto layout due to technical limitations.
Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where current row data and column properties are passed to the body template. - On the other hand, header and footer properties of a column are used to define the content of these sections by accepting either simple string values or JSX for advanced content. Similarly DataTable itself - also provides header and footer properties for the main header and footer of the table.
++ Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where current row data and column properties are passed to the body template. On the other hand,{' '} + header and footer properties of a column are used to define the content of these sections by accepting either simple string values or JSX for advanced content. Similarly DataTable itself also provides{' '} + header and footer properties for the main header and footer of the table. +
-In addition to the regular table, a smal and a large version are available with different paddings.
-Columns can be grouped at header and footer sections by defining a ColumnGroup component as the headerColumnGroup and footerColumnGroup properties.
++ Columns can be grouped at header and footer sections by defining a ColumnGroup component as the headerColumnGroup and footerColumnGroup properties. +
-When using sorting with column groups, define sort properties like sortable at columns inside column groups not at the direct children of DataTable component.
Pagination is enabled by setting paginator property to true, rows property defines the number of rows per page and optionally pageLinks specify the the number of page links to display. - See paginator component for more information about further customization options such as paginator template.
++ Pagination is enabled by setting paginator property to true, rows property defines the number of rows per page and optionally pageLinks specify the the number of page links to display. See{' '} + paginator component for more information about further customization options such as paginator template. +
-Pagination can either be used in Controlled or Uncontrolled manner. In controlled mode, first and onPage properties need to be defined to control the paginator state.
-+ Pagination can either be used in Controlled or Uncontrolled manner. In controlled mode, first and onPage properties need to be defined to control the paginator state. +
+In uncontrolled mode, only paginator and rows need to be enabled. Index of the first record can be still be provided using the first property in uncontrolled mode however - it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the paginator state, prefer to use the component as controlled.
-+ In uncontrolled mode, only paginator and rows need to be enabled. Index of the first record can be still be provided using the first property in uncontrolled mode however it is evaluated at initial + rendering and ignored in further updates. If you programmatically need to update the paginator state, prefer to use the component as controlled. +
+Elements of the paginator can be customized using the paginatorTemplate by the DataTable. Refer to the template section of the paginator documentation for further options.
-+ Elements of the paginator can be customized using the paginatorTemplate by the DataTable. Refer to the template section of the paginator documentation for further options. +
+Enabling sortable property at column component would be enough to make a column sortable. The property to use when sorting is field by default and can be customized using sortField.
-+ Enabling sortable property at column component would be enough to make a column sortable. The property to use when sorting is field by default and can be customized using sortField. +
+By default sorting is executed on the clicked column only. To enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column.
-+ By default sorting is executed on the clicked column only. To enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column. +
++ In case you'd like to display the table as sorted per a single column by default on mount, use sortField and sortOrder properties in Controlled or Uncontrolled manner. In controlled mode,{' '} + sortField, sortOrder and onSort properties need to be defined to control the sorting state. +
-In case you'd like to display the table as sorted per a single column by default on mount, use sortField and sortOrder properties in Controlled or Uncontrolled manner. - In controlled mode, sortField, sortOrder and onSort properties need to be defined to control the sorting state.
- -In multiple mode, use the multiSortMeta property and bind an array of SortMeta objects instead.
-+ In multiple mode, use the multiSortMeta property and bind an array of SortMeta objects instead. +
+In uncontrolled mode, no additional properties need to be enabled. Initial sort field can be still be provided using the sortField property in uncontrolled mode however - it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the sorting state, prefer to use the component as controlled.
++ In uncontrolled mode, no additional properties need to be enabled. Initial sort field can be still be provided using the sortField property in uncontrolled mode however it is evaluated at initial rendering and ignored + in further updates. If you programmatically need to update the sorting state, prefer to use the component as controlled. +
-To customize sorting algorithm, define a sortFunction that sorts the list.
-Getting access to the sorted data is provided by the onValueChange callback.
-+ Getting access to the sorted data is provided by the onValueChange callback. +
+DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the filterDisplay. - In row setting, filter elements are displayed in a separate row at the header section whereas - in menu mode filter elements are displayed inside an overlay. The template filter gets a value, filterCallback and filterApplyCallback, - use value to populate the filter with your own form components and call the filterCallback with the event of your choice like onInput, onChange, onClick. - FilterCallback adds new values in hidden 'filters' state in DataTable and when filterApplyCallback is called, data is filtered. The filterApplyCallback method can be used directly if you want to filter by value directly.
-+ DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the filterDisplay. In row setting, filter + elements are displayed in a separate row at the header section whereas in menu mode filter elements are displayed inside an overlay. The template filter gets a value, filterCallback and{' '} + filterApplyCallback, use value to populate the filter with your own form components and call the filterCallback with the event of your choice like onInput, onChange, onClick. FilterCallback adds new values in hidden + 'filters' state in DataTable and when filterApplyCallback is called, data is filtered. The filterApplyCallback method can be used directly if you want to filter by value directly. +
+Input field is displayed in a separate header row.
-Input field is displayed in an overlay.
-In "menu" display, it is possible to add more constraints to a same filter. In this case, metadata could be an array of constraints. The operator - defines whether all or any of the constraints should match.
+In "menu" display, it is possible to add more constraints to a same filter. In this case, metadata could be an array of constraints. The operator defines whether all or any of the constraints should match.
-Providing a filters with predefined values would be enough to display the table as filtered by default. This approach can also be used to clear filters progammatically.
-Depending on the dataType of the column, suitable match modes are displayed. Default configuration is available at PrimeReact.filterMatchModeOptions which can be used to customize the modes globally for all tables.
-+ Depending on the dataType of the column, suitable match modes are displayed. Default configuration is available at PrimeReact.filterMatchModeOptions which can be used to customize the modes globally for all + tables. +
+If you need to override the match modes for a particular column use the filterMatchModeOptions property and provide an array with label-value pairs.
-+ If you need to override the match modes for a particular column use the filterMatchModeOptions property and provide an array with label-value pairs. +
+Custom filtering is implemented using the FilterService, first register your filter and add it to your filterMatchModeOptions.
-+ Custom filtering is implemented using the FilterService, first register your filter and add it to your filterMatchModeOptions. +
+By default, input fields are used as filter elements and this can be customized using the filterElement property of the Column that calls the filter function of the table instance by passing the value, field and the match mode.
-+ By default, input fields are used as filter elements and this can be customized using the filterElement property of the Column that calls the filter function of the table instance by passing the value, field and the + match mode. +
+In case you'd like to display the table as filtered by default on mount, use filters property in Controlled or Uncontrolled manner. - In controlled mode, filters and onFilter properties need to be defined to control the filtering state.
++ In case you'd like to display the table as filtered by default on mount, use filters property in Controlled or Uncontrolled manner. In controlled mode, filters and onFilter properties need to + be defined to control the filtering state. +
-In uncontrolled filtering, no additional properties need to be enabled. Initial filtering can be still be provided using the filters property in uncontrolled mode however - it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the filtering state, prefer to use the component as controlled.
++ In uncontrolled filtering, no additional properties need to be enabled. Initial filtering can be still be provided using the filters property in uncontrolled mode however it is evaluated at initial rendering and ignored + in further updates. If you programmatically need to update the filtering state, prefer to use the component as controlled. +
-Getting access to the filtered data is provided by the onValueChange callback.
-+ Getting access to the filtered data is provided by the onValueChange callback. +
+DataTable provides single and multiple selection modes on click of a row or cell. Selected rows are bound to the selection property for reading and updated using onSelectionChange callback. - Alternatively column based selection can be done using radio buttons or checkboxes using selectionMode of a particular column. In addition onRowSelect-onRowUnselect / onCellSelect-onCellUnselect events are provided as optional callbacks.
++ DataTable provides single and multiple selection modes on click of a row or cell. Selected rows are bound to the selection property for reading and updated using onSelectionChange callback. Alternatively column + based selection can be done using radio buttons or checkboxes using selectionMode of a particular column. In addition onRowSelect-onRowUnselect / onCellSelect-onCellUnselect events are + provided as optional callbacks. +
In single mode, selection binding is an object reference.
-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 metaKeySelection property value which is true by default. - On touch enabled devices metaKeySelection is turned off automatically. Also, ShiftKey is supported for range selection. In addition, the rectangular selection can be dragged over the desired rows or cells thanks to the dragSelection property. In this way, a range of rows or cells can be selected.
++ 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 metaKeySelection property value which is true by default. On + touch enabled devices metaKeySelection is turned off automatically. Also, ShiftKey is supported for range selection. In addition, the rectangular selection can be dragged over the desired rows or cells thanks to the + dragSelection property. In this way, a range of rows or cells can be selected. +
-If you prefer a radiobutton or a checkbox instead of a row click, use the selectionMode 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.
-Tip: Use showSelectionElement function in case you need to hide selection element for a particular row.
-+ If you prefer a radiobutton or a checkbox instead of a row click, use the selectionMode 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. +
++ Tip: Use showSelectionElement function in case you need to hide selection element for a particular row. +
+Incell editing feature provides a way to quickly edit data inside the table. A cell editor is defined using the editor property - that refers to a function to return an input element for the editing.
++ Incell editing feature provides a way to quickly edit data inside the table. A cell editor is defined using the editor property that refers to a function to return an input element for the editing. +
-Clicking outside the cell or hitting enter key closes the cell, however this may not be desirable if the input is invalid. In order - to decide whether to keep the cell open or not, provide a cellEditValidator function that validates the value. Optionally onCellEditComplete and onCellEditCancel - events are available at the column component to provide callbacks whenever an editor is submitted or cancelled.
++ Clicking outside the cell or hitting enter key closes the cell, however this may not be desirable if the input is invalid. In order to decide whether to keep the cell open or not, provide a cellEditValidator function + that validates the value. Optionally onCellEditComplete and onCellEditCancel + events are available at the column component to provide callbacks whenever an editor is submitted or cancelled. +
-Row editing toggles the visibility of the all editors in the row at once and provides additional options to save and cancel editing.
-DataTable provides exclusive integration with ContextMenu. contextMenuSelection and onContextMenuSelectionChange are used to get a reference of the the selected row - and onContextMenu callback is utilized to display a particular context menu.
-+ DataTable provides exclusive integration with ContextMenu. contextMenuSelection and onContextMenuSelectionChange are used to get a reference of the the selected row and onContextMenu callback is utilized + to display a particular context menu. +
+Row expansion allows displaying detailed content for a particular row. To use this feature, add an expander column, define a rowExpansionTemplate as a function to return the expanded content and bind to +
+ Row expansion allows displaying detailed content for a particular row. To use this feature, add an expander column, define a rowExpansionTemplate as a function to return the expanded content and bind to expandedRows property to read the expanded rows along with the onRowToggle property to update it. expandedRows property either accepts an array of row data or a map whose key is the dataKey of the record. - Using expandable rows with a dataKey is suggested for better performance.
+ Using expandable rows with a dataKey is suggested for better performance. + -Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. - In "expand" mode, table width also changes along with the column width. onColumnResizeEnd is a callback that passes the resized column header as a parameter.
-+ Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is + resized. In "expand" mode, table width also changes along with the column width. onColumnResizeEnd is a callback that passes the resized column header as a parameter. +
+It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.
-You can choose which columns are resizeable per column.
-+ You can choose which columns are resizeable per column. +
+Columns can be reordered using drag drop by setting the reorderableColumns to true. onColReorder 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.
++ Columns can be reordered using drag drop by setting the reorderableColumns to true. onColReorder 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. +
-Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle. onRowReorder is a callback that is invoked when a column is reordered, use - this callback to update the new order. The reorder icon can be customized using rowReorderIcon of the column component.
-Tip: Use showRowReorderElement function in case you need to hide selection element for a particular row.
++ Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle. onRowReorder is a callback that is invoked when a column is reordered, use this callback to update the new + order. The reorder icon can be customized using rowReorderIcon of the column component. +
++ Tip: Use showRowReorderElement function in case you need to hide selection element for a particular row. +
-DataTable can export its data in CSV format using exportCSV() method.
-RowGrouping has two modes defined be the rowGroupMode property, in "subheader" option rows are grouped by a groupRowsBy and in "rowspan" mode grouping - is done based on the sort field. In both cases, data should be sorted initally using the properties such as sortField and sortOrder. In "subheader" mode, - rowGroupHeaderTemplate property should be defined to provide the content of the header and optionally rowGroupFooterTemplate is available to provide a footer - for the group.
++ RowGrouping has two modes defined be the rowGroupMode property, in "subheader" option rows are grouped by a groupRowsBy and in "rowspan" mode grouping is done based on the sort field. In both cases, data should be + sorted initally using the properties such as sortField and sortOrder. In "subheader" mode, + rowGroupHeaderTemplate property should be defined to provide the content of the header and optionally rowGroupFooterTemplate is available to provide a footer for the group. +
-DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using scrollable property and scrollHeight to define the viewport height.
-+ DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using scrollable property and scrollHeight to define the viewport height. +
+Scrollable table uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.
In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.
++ In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size + dynamically responds to the dialog size changes such as maximizing. +
-FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the
+ FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the
For horizontal scrolling, it is required to set scrollDirection to "horizontal" and give fixed widths to columns.
-+ For horizontal scrolling, it is required to set scrollDirection to "horizontal" and give fixed widths to columns. +
+Set scrollDirection to "both" and give fixed widths to columns to scroll both ways.
-+ Set scrollDirection to "both" and give fixed widths to columns to scroll both ways. +
+Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.
++ Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property. +
-Certain columns can be frozen by using the frozen property of the column component. In addition alignFrozen is available to define whether the column should - be fixed on the left or right.
++ Certain columns can be frozen by using the frozen property of the column component. In addition alignFrozen is available to define whether the column should be fixed on the left or right. +
-Row groups with subheaders have exclusive support for filtering, when the table scrolls the subheaders stay fixed as long as their
- data are still displayed. No additional configuration is required to enable this feature. View the
+ Row groups with subheaders have exclusive support for filtering, when the table scrolls the subheaders stay fixed as long as their data are still displayed. No additional configuration is required to enable this feature. View
+ the
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 everytime paging, sorting and filtering happens. Sample belows imitates - lazy paging by using an in memory list. 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 assuming - there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
++ 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 everytime paging, sorting and filtering happens. Sample belows imitates + lazy paging by using an in memory list. 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 assuming there are + actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist. +
-In lazy mode, pagination, sorting and filtering must be used in controlled mode in addition to enabling lazy property. Here is a sample paging implementation with in memory data.
-+ In lazy mode, pagination, sorting and filtering must be used in controlled mode in addition to enabling lazy property. Here is a sample paging implementation with in memory data. +
+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 stateKey, the storage to keep the state is defined with the stateStorage property that accepts session for sessionStorage and local for localStorage. - Also, a special storage implementation can be made with customSaveState and customRestoreState methods using stateStorage="custom". - Currently following features are supported by TableState; paging, sorting, filtering, column resizing, column reordering, row 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 stateKey, the storage to keep the state is defined with the stateStorage property that accepts session for sessionStorage and local for localStorage. Also, a special storage + implementation can be made with customSaveState and customRestoreState methods using stateStorage="custom". Currently following features are supported by TableState; paging, sorting, filtering, column + resizing, column reordering, row expansion and row selection. +
-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. +
Set responsiveLayout 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 table-layout for more details.
++ Set responsiveLayout 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 table-layout for more details. +
-In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px'.
-Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -3000,8 +3100,12 @@ export const DataTableStateDemo = () => {Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
tab | ++ tab + | Moves through the headers. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Sorts the column. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Sorts the column. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tab | ++ tab + | Moves through the elements inside the popup. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
escape | ++ escape + | Hides the popup. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tab | ++ tab + | Moves focus to the first selected row, if there is none then first row receives the focus. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
up arrow | ++ up arrow + | Moves focus to the previous row. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
down arrow | ++ down arrow + | Moves focus to the next row. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Toggles the selected state of the focused row depending on the metaKeySelection setting. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Toggles the selected state of the focused row depending on the metaKeySelection setting. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
home | ++ home + | Moves focus to the first row. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
end | ++ end + | Moves focus to the last row. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
shift + down arrow | ++ shift + down arrow + | Moves focus to the next row and toggles the selection state. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
shift + up arrow | ++ shift + up arrow + | Moves focus to the previous row and toggles the selection state. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
shift + space | ++ shift + space + | Selects the rows between the most recently selected row and the focused row. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
control + shift + home | ++ control + shift + home + | Selects the focused rows and all the options up to the first one. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
control + shift + end | ++ control + shift + end + | Selects the focused rows and all the options down to the last one. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
control + a | ++ control + a + | Selects all rows. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onChange | -event.originalEvent: browser event + |
+ event.originalEvent: browser event event.value = layout mode e.g. "list" or "grid" |
Callback to invoke when layout mode is changed. | @@ -804,31 +810,39 @@ const itemTemplate = (data, layout) => {paginatorTemplate | string|object | FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown | -Template of the paginator. For details, refer to the template section of the paginator documentation for further options. | ++ Template of the paginator. For details, refer to the template section of the paginator documentation for further options. + | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
paginatorLeft | @@ -995,7 +1013,9 @@ const onSortChange = (event) => {paginatorDropdownAppendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
emptyMessage | @@ -1053,18 +1073,20 @@ const onSortChange = (event) => {
Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onPage | -event.originalEvent: Browser event + |
+ event.originalEvent: Browser event event.first: Index of the first records on page. - event.rows: Number of records to display per page. |
+ event.rows: Number of records to display per page.
+
Callback to invoke on pagination. |
Name | -Element | -|||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Element | +|||||||||||||||
Key | -Function | -
---|---|
tab | -Moves focus to the buttons. | -
space | -Toggles the checked state of a button. | -
+ The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe + the buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively. +
+ ++ Refer to paginator accessibility documentation for the paginator of the component. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus to the buttons. | +
+ space + | +Toggles the checked state of a button. | +
None.
- - { - useLiveEditorTabs({ name: 'DataViewDemo', sources: sources, service: 'ProductService', data: 'products', extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'DataViewDemo', sources: sources, service: 'ProductService', data: 'products', extFiles: extFiles })} ); -}) +}); export default DataViewDoc; diff --git a/components/doc/deferredcontent/index.js b/components/doc/deferredcontent/index.js index b4d5ac20ce..e9b8f5d6bf 100644 --- a/components/doc/deferredcontent/index.js +++ b/components/doc/deferredcontent/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const DeferredContentDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -70,7 +69,7 @@ export class DeferredContentDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useRef } from 'react'; @@ -123,7 +122,7 @@ const DeferredContentDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useRef } from 'react'; @@ -176,7 +175,7 @@ const DeferredContentDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -236,31 +235,31 @@ const DeferredContentDemo = () => { } ` } - } + }; return (DeferredContent is used as a wrapper element of its content.
-onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.
-+ onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data. +
+Component does not apply any styling.
DeferredContent 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 you have full control over the roles like landmark and attributes like aria-live. -
- -+ DeferredContent 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 you have full control over the roles like{' '} + + landmark + {' '} + and attributes like aria-live. +
+ +Component does not include any interactive elements.
-Component does not include any interactive elements.
+None.
- { - useLiveEditorTabs({ name: 'DeferredContentDemo', sources: sources, service: 'ProductService', data: 'products-small' }) - } + {useLiveEditorTabs({ name: 'DeferredContentDemo', sources: sources, service: 'ProductService', data: 'products-small' })}Dialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state.
-+ Dialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state. +
+Header and Footer sections are defined using properties with the same name that accept simple strings or JSX for custom content. In addition icons property enables - adding more icons at the header section.
-+ Header and Footer sections are defined using properties with the same name that accept simple strings or JSX for custom content. In addition icons property enables adding more icons at the header section. +
+Dialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes - 100%. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
++ Dialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of{' '} + breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen. +
-Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar.
++ Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar. +
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element within the dialog. | -
shift + tab | -Moves focus to the previous the focusable element within the dialog. | -
escape | -Closes the dialog if closeOnEscape is true. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element within the dialog. | +
+ shift + tab + | +Moves focus to the previous the focusable element within the dialog. | +
+ escape + | ++ Closes the dialog if closeOnEscape is true. + | +
Key | -Function | -
---|---|
enter | -Closes the dialog. | -
space | -Closes the dialog. | -
Key | +Function | +
---|---|
+ enter + | +Closes the dialog. | +
+ space + | +Closes the dialog. | +
None.
- - { - useLiveEditorTabs({ name: 'DialogDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'DialogDemo', sources: sources, extFiles: extFiles })} ); -}) +}); export default DialogDoc; diff --git a/components/doc/divider/index.js b/components/doc/divider/index.js index 19790dcef3..b91470af2d 100644 --- a/components/doc/divider/index.js +++ b/components/doc/divider/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const DividerDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -164,7 +163,7 @@ export class DividerDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -319,7 +318,7 @@ const DividerDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -474,7 +473,7 @@ const DividerDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -632,51 +631,57 @@ const DividerDemo = () => { } ` } - } + }; return (Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical".
-+ Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical". +
+Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".
-+ Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted". +
+Vertical divider is enabled by setting the layout property as "vertical".
-+ Vertical divider is enabled by setting the layout property as "vertical". +
+Any content placed inside is rendered within the boundaries of the divider. In addition, location - of the content is configured with the align property. In horizontal layout, alignment options - are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom". -
-+ Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the align property. In horizontal layout, alignment options are "left", "center" and + "right" whereas vertical mode supports "top", "center" and "bottom". +
+Any valid attribute is passed to the root element implicitly, extended properties are as follows;
-Name | -Type | -Default | -Description | -
---|---|---|---|
align | -string | -null | -Alignment of the content, options are "left", "center", "right" for horizontal layout - and "top", "center", "bottom" for vertical. | -
layout | -string | -horizontal | -Specifies the orientation, valid values are "horizontal" and "vertical". | -
type | -String | -solid | -Border style type, default is "solid" and other options are "dashed" and "dotted". | -
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
+Name | +Type | +Default | +Description | +
---|---|---|---|
align | +string | +null | +Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical. | +
layout | +string | +horizontal | +Specifies the orientation, valid values are "horizontal" and "vertical". | +
type | +String | +solid | +Border style type, default is "solid" and other options are "dashed" and "dotted". | +
Following is the list of structural style classes, for theming classes visit theming page.
-Name | -Element | -
---|---|
p-divider | -Container element. | -
p-divider-horizontal | -Container element in horizontal layout. | -
p-divider-vertical | -Container element in vertical layout. | -
p-divider-solid | -Container element with solid border. | -
p-divider-dashed | -Container element with dashed border. | -
p-divider-dotted | -Container element with dotted border. | -
p-divider-left | -Container element with content aligned to left. | -
p-divider-right | -Container element with content aligned to right. | -
p-divider-center | -Container element with content aligned to center. | -
p-divider-bottom | -Container element with content aligned to bottom. | -
p-divider-top | -Container element with content aligned to top. | -
+ Following is the list of structural style classes, for theming classes visit theming page. +
+Name | +Element | +
---|---|
p-divider | +Container element. | +
p-divider-horizontal | +Container element in horizontal layout. | +
p-divider-vertical | +Container element in vertical layout. | +
p-divider-solid | +Container element with solid border. | +
p-divider-dashed | +Container element with dashed border. | +
p-divider-dotted | +Container element with dotted border. | +
p-divider-left | +Container element with content aligned to left. | +
p-divider-right | +Container element with content aligned to right. | +
p-divider-center | +Container element with content aligned to center. | +
p-divider-bottom | +Container element with content aligned to bottom. | +
p-divider-top | +Container element with content aligned to top. | +
Divider uses a separator role with aria-orientation set to either "horizontal" or "vertical".
- -Component does not include any interactive elements.
-None.
-+ Divider uses a separator role with aria-orientation set to either "horizontal" or "vertical". +
+ +Component does not include any interactive elements.
+None.
+ + + {useLiveEditorTabs({ name: 'DividerDemo', sources: sources })}Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the model property.
++ Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the model property. +
-Dock uses the common MenuModel API to define the items, visit MenuModel API for details.
++ Dock uses the common MenuModel API to define the items, visit MenuModel API for details. +
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -1618,7 +1621,9 @@ export const DockDemo = () => {Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | -
shift + tab | -Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | -
enter | -Activates the focused menuitem. | -
space | -Activates the focused menuitem. | -
down arrow | -Moves focus to the next menuitem in vertical layout. | -
up arrow | -Moves focus to the previous menuitem in vertical layout. | -
home | -Moves focus to the first menuitem in horizontal layout. | -
end | -Moves focus to the last menuitem in horizontal layout. | -
+ Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a{' '} + presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. +
+ +Key | +Function | +
---|---|
+ tab + | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
+ shift + tab + | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
+ enter + | +Activates the focused menuitem. | +
+ space + | +Activates the focused menuitem. | +
+ down arrow + | +Moves focus to the next menuitem in vertical layout. | +
+ up arrow + | +Moves focus to the previous menuitem in vertical layout. | +
+ home + | +Moves focus to the first menuitem in horizontal layout. | +
+ end + | +Moves focus to the last menuitem in horizontal layout. | +
None.
- { - useLiveEditorTabs({ name: 'DockDemo', sources: sources, service: 'NodeService, PhotoService', extFiles: extFiles }) - } - + {useLiveEditorTabs({ name: 'DockDemo', sources: sources, service: 'NodeService, PhotoService', extFiles: extFiles })} - ) -}) + ); +}); export default DockDoc; diff --git a/components/doc/dropdown/index.js b/components/doc/dropdown/index.js index f091e12435..2b6ffeda9d 100644 --- a/components/doc/dropdown/index.js +++ b/components/doc/dropdown/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const DropdownDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -218,7 +217,7 @@ export class DropdownDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useEffect, useRef } from 'react'; @@ -411,7 +410,7 @@ const DropdownDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useEffect, useRef } from 'react'; @@ -604,7 +603,7 @@ const DropdownDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -801,7 +800,7 @@ const DropdownDemo = () => { } ` } - } + }; const extFiles = { 'demo/DropdownDemo.css': { @@ -815,35 +814,38 @@ const DropdownDemo = () => { } ` } - } + }; return (SelectButton is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives - of how to define the options property; One way is providing a collection of SelectItem instances having label-value pairs - whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value field pair. In addition, - options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.
- -Options as SelectItems
-+ SelectButton is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives of how to define the options property; One way is providing a + collection of SelectItem instances having label-value pairs whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value + field pair. In addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary. +
+ ++ Options as SelectItems +
+Options as any type
-+ Options as any type +
+When optionValue is not defined, value of an option refers to the option object itself.
++ When optionValue is not defined, value of an option refers to the option object itself. +
Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.
Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against - label of the items and filterBy property is available to choose one or more properties of the options. In addition filterMatchMode can be utilized - to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
++ Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against label of the items and filterBy property is available to choose one or more + properties of the options. In addition filterMatchMode can be utilized to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals". +
-Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option instance as a parameter and returns the content. For custom filter support define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element.
-+ Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option instance as a parameter and returns the content. For custom filter + support define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element. +
+Options groups are specified with the optionGroupLabel and optionGroupChildren properties.
-+ Options groups are specified with the optionGroupLabel and optionGroupChildren properties. +
+appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + | |
tabIndex | @@ -1323,7 +1337,13 @@ const groupedCities = [transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
dropdownIcon | @@ -1341,7 +1361,9 @@ const groupedCities = [virtualScrollerOptions | object | null | -Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. | ++ Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. + |
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the dropdown element. | -
space | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
down arrow | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
up arrow | -Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the dropdown element. | +
+ space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
+ down arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
+ up arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus. | +
Key | -Function | -
---|---|
tab | -Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. | -
shift + tab | -Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. | -
enter | -Selects the focused option and closes the popup. | -
space | -Selects the focused option and closes the popup. | -
escape | -Closes the popup, moves focus to the dropdown element. | -
down arrow | -Moves focus to the next option, if there is none then visual focus does not change. | -
up arrow | -Moves focus to the previous option, if there is none then visual focus does not change. | -
right arrow | -If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left. | -
left arrow | -If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right. | -
home | -If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option. | -
end | -If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option. | -
any printable character | -Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. | +
+ shift + tab + | +Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. | +
+ enter + | +Selects the focused option and closes the popup. | +
+ space + | +Selects the focused option and closes the popup. | +
+ escape + | +Closes the popup, moves focus to the dropdown element. | +
+ down arrow + | +Moves focus to the next option, if there is none then visual focus does not change. | +
+ up arrow + | +Moves focus to the previous option, if there is none then visual focus does not change. | +
+ right arrow + | +If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left. | +
+ left arrow + | +If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right. | +
+ home + | +If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option. | +
+ end + | +If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option. | +
+ any printable character + | +Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | +
Key | -Function | -
---|---|
enter | -Closes the popup and moves focus to the dropdown element. | -
escape | -Closes the popup and moves focus to the dropdown element. | -
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the dropdown element. | +
+ escape + | +Closes the popup and moves focus to the dropdown element. | +
None.
- { - useLiveEditorTabs({ name: 'DropdownDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'DropdownDemo', sources: sources, extFiles: extFiles })} - ) -}) + ); +}); export default DropdownDoc; diff --git a/components/doc/editor/index.js b/components/doc/editor/index.js index 66e89b4b8d..63cbbbfc42 100644 --- a/components/doc/editor/index.js +++ b/components/doc/editor/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const EditorDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -52,7 +51,7 @@ export class EditorDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -88,7 +87,7 @@ const EditorDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -124,7 +123,7 @@ const EditorDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -165,41 +164,46 @@ const EditorDemo = () => { } ` } - } + }; return (Editor is used as a controlled component with value and onTextChange properties.
++ Editor is used as a controlled component with value and onTextChange properties. +
-Editor provides a default toolbar with common options, to customize it define your elements with the headerTemplate. Refer to Quill documentation for available controls.
++ Editor provides a default toolbar with common options, to customize it define your elements with the headerTemplate. Refer to Quill documentation for available + controls. +
-Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -265,13 +269,17 @@ const header = (Refer to Quill documentation for more information.
++ Refer to Quill documentation for more information. +
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element in the page tab sequence. | -
shift + tab | -Moves focus to the previous the focusable element in the page tab sequence. | -
enter | -Toggles the visibility of the content. | -
space | -Toggles the visibility of the content. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element in the page tab sequence. | +
+ shift + tab + | +Moves focus to the previous the focusable element in the page tab sequence. | +
+ enter + | +Toggles the visibility of the content. | +
+ space + | +Toggles the visibility of the content. | +
None.
- - { - useLiveEditorTabs({ name: 'FieldsetDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'FieldsetDemo', sources: sources })} ); - -}) +}); export default FieldsetDoc; diff --git a/components/doc/fileupload/index.js b/components/doc/fileupload/index.js index f49dab5669..f9aa94288f 100644 --- a/components/doc/fileupload/index.js +++ b/components/doc/fileupload/index.js @@ -5,9 +5,8 @@ import { useLiveEditorTabs } from '../common/liveeditor'; import { CodeHighlight } from '../common/codehighlight'; const FileUploadDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -176,7 +175,7 @@ export class FileUploadDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useRef, useState } from 'react'; @@ -321,7 +320,7 @@ export const FileUploadDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useRef, useState } from 'react'; @@ -466,7 +465,7 @@ export const FileUploadDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -615,8 +614,8 @@ const FileUploadDemo = () => { ) } ` - } - }; + } + }; const extFiles = { 'public/upload.php': { @@ -627,119 +626,129 @@ echo 'Fake Upload Process
'; ?> ` } - } + }; return (FileUpload requires a url property as the upload target and a name to identify the files at backend.
-+ FileUpload requires a url property as the upload target and a name to identify the files at backend. +
+Only one file can be selected at a time by default, to allow selecting multiple files at once enable multiple option.
++ Only one file can be selected at a time by default, to allow selecting multiple files at once enable multiple option. +
-File selection can also be done by dragging and dropping from the filesystem to the content section of the component.
+File selection can also be done by dragging and dropping from the filesystem to the content section of the component.
-When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.
++ When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area. +
-Selectable file types can be restricted with accept property, example below only allows images to be uploaded. Read more about other possible values here.
-+ Selectable file types can be restricted with accept property, example below only allows images to be uploaded. Read more about other possible values{' '} + here. +
+Maximium file size can be restricted using maxFileSize property defined in bytes.
++ Maximium file size can be restricted using maxFileSize property defined in bytes. +
-In order to customize the default messages use invalidFileSizeMessageSummary and invalidFileSizeMessageDetail options. In summary messages, {0} placeholder refers to the filename and in detail message, the file size.
-XHR request to upload the files can be customized using the onBeforeUpload callback that passes the xhr instance and FormData object as event parameters.
- -FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
- -+ In order to customize the default messages use invalidFileSizeMessageSummary and invalidFileSizeMessageDetail options. In summary messages, {0} placeholder refers to the filename and in detail message, the file + size. +
+XHR request to upload the files can be customized using the onBeforeUpload callback that passes the xhr instance and FormData object as event parameters.
+ +FileUpload basic mode provides a simpler UI as an alternative to advanced mode.
+ +Uploading implementation can be overriden by enabling customUpload property and defining a custom upload handler event.
-Uploading implementation can be overriden by enabling customUpload property and defining a custom upload handler event.
+Used to create custom item elements in the container.
-Used to create custom item elements in the container.
+Used to customize choose, upload and cancel buttons.
-Used to customize choose, upload and cancel buttons.
+Name | -Type | -Default | -Description | -
---|---|---|---|
id | -string | -null | -Unique identifier of the element. | -
name | -string | -null | -Name of the request parameter to identify the files at backend. | -
url | -string | -null | -Remote url to upload the files. | -
mode | -string | -advanced | -Defines the UI of the component, possible values are "advanced" and "basic". | -
multiple | -boolean | -false | -Used to select multiple files at once from file dialog. | -
accept | -string | -false | -Pattern to restrict the allowed file types such as "image/*". | -
disabled | -boolean | -false | -Disables the upload functionality. | -
auto | -boolean | -false | -When enabled, upload begins automatically after selection is completed. | -
maxFileSize | -number | -null | -Maximum file size allowed in bytes. | -
invalidFileSizeMessageSummary | -string | -"{0}: Invalid file size, " | -Summary message of the invalid fize size. | -
invalidFileSizeMessageDetail | -string | -"maximum upload size is {0}." | -Detail message of the invalid fize size. | -
style | -object | -null | -Inline style of the component. | -
className | -string | -null | -Style class of the component. | -
withCredentials | -boolean | -false | -Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. | -
previewWidth | -number | -50 | -Width of the image thumbnail in pixels. | -
chooseLabel | -string | -null | -Label of the choose button. Defaults to global value in Locale configuration. | -
uploadLabel | -string | -null | -Label of the upload button. Defaults to global value in Locale configuration. | -
cancelLabel | -string | -null | -Label of the cancel button. Defaults to global value in Locale configuration. | -
chooseOptions | -object (OptionsType) | -null | -Options used to customize the choose button. These options have "label", "icon", "className" and "style" properties. | -
uploadOptions | -object (OptionsType) | -null | -Options used to customize the upload button. These options have "label", "icon", "className" and "style" properties. | -
cancelOptions | -object (OptionsType) | -null | -Options used to customize the cancel button. These options have "label", "icon", "className" and "style" properties. | -
customUpload | -boolean | -false | -Whether to use the default upload or a manual implementation defined in uploadHandler callback. | -
emptyTemplate | -any | -null | -The template of empty content in the container. | -
progressBarTemplate | -any | -null | -The template of progressBar content in the container. | -
itemTemplate | -any | -null | -The template of each item content in the container. | -
headerTemplate | -any | -null | -The template of the header. | -
headerStyle | -object | -null | -Inline style of the header. | -
headerClassName | -string | -null | -Style class of the header. | -
contentStyle | -object | -null | -Inline style of the content. | -
contentClassName | -string | -null | -Style class of the content. | -
Name | -Parameters | -Description | -
---|---|---|
onBeforeUpload | -event.xhr: XmlHttpRequest instance. - event.formData: FormData object. |
- Callback to invoke before file upload begins to customize the request - such as post parameters before the files. | -
onBeforeSend | -event.xhr: XmlHttpRequest instance. - event.formData: FormData object. |
- Callback to invoke before file send begins to customize the request - such as adding headers. | -
onBeforeDrop | -event: DragEvent instance. | -Callback to invoke before files dropped. Return false from callback to prevent drop. | -
onBeforeSelect | -event.originalEvent: Original browser event. - event.target.files: List of selected files. |
- Callback to invoke before files are selected. Return false from callback to prevent selection. | -
onUpload | -event.xhr: XmlHttpRequest instance. - event.files: Uploaded files. |
- Callback to invoke when file upload is complete. | -
onError | -event.xhr: XmlHttpRequest instance. - event.files: Files that are not uploaded. |
- Callback to invoke if file upload fails. | -
onClear | -- | -Callback to invoke when files in queue are removed without uploading. | -
onSelect | -event.originalEvent: Original browser event. - event.target.files: List of selected files. |
- Callback to invoke when files are selected. | -
onProgress | -event.originalEvent: Original browser event. - event.progress: Calculated progress value. |
- Callback to invoke when files are being uploaded. | -
onValidationFail | -file: Invalid file. | -Callback to invoke when a validation file fails. | -
uploadHandler | -event.files: List of selected files. - event.options: Handler options. |
- Callback to invoke in custom upload mode to upload the files manually. | -
onRemove | -event.originalEvent: Original browser event. - event.file: Selected file. |
- Callback to invoke when a file is removed without uploading using clear button of a file. | -
Name | -Parameters | -Description | -
---|---|---|
upload | -- | -Uploads the selected files. | -
clear | -- | -Clears the files list. | -
Following is the list of structural style classes, for theming classes visit theming page.
-Name | -Element | -
---|---|
p-fileupload | -Container element. | -
p-fileupload-buttonbar | -Header containing the buttons. | -
p-fileupload-content | -Content section. | -
None.
-Name | +Type | +Default | +Description | +
---|---|---|---|
id | +string | +null | +Unique identifier of the element. | +
name | +string | +null | +Name of the request parameter to identify the files at backend. | +
url | +string | +null | +Remote url to upload the files. | +
mode | +string | +advanced | +Defines the UI of the component, possible values are "advanced" and "basic". | +
multiple | +boolean | +false | +Used to select multiple files at once from file dialog. | +
accept | +string | +false | +Pattern to restrict the allowed file types such as "image/*". | +
disabled | +boolean | +false | +Disables the upload functionality. | +
auto | +boolean | +false | +When enabled, upload begins automatically after selection is completed. | +
maxFileSize | +number | +null | +Maximum file size allowed in bytes. | +
invalidFileSizeMessageSummary | +string | +"{0}: Invalid file size, " | +Summary message of the invalid fize size. | +
invalidFileSizeMessageDetail | +string | +"maximum upload size is {0}." | +Detail message of the invalid fize size. | +
style | +object | +null | +Inline style of the component. | +
className | +string | +null | +Style class of the component. | +
withCredentials | +boolean | +false | +Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. | +
previewWidth | +number | +50 | +Width of the image thumbnail in pixels. | +
chooseLabel | +string | +null | +Label of the choose button. Defaults to global value in Locale configuration. | +
uploadLabel | +string | +null | +Label of the upload button. Defaults to global value in Locale configuration. | +
cancelLabel | +string | +null | +Label of the cancel button. Defaults to global value in Locale configuration. | +
chooseOptions | +object (OptionsType) | +null | +Options used to customize the choose button. These options have "label", "icon", "className" and "style" properties. | +
uploadOptions | +object (OptionsType) | +null | +Options used to customize the upload button. These options have "label", "icon", "className" and "style" properties. | +
cancelOptions | +object (OptionsType) | +null | +Options used to customize the cancel button. These options have "label", "icon", "className" and "style" properties. | +
customUpload | +boolean | +false | +Whether to use the default upload or a manual implementation defined in uploadHandler callback. | +
emptyTemplate | +any | +null | +The template of empty content in the container. | +
progressBarTemplate | +any | +null | +The template of progressBar content in the container. | +
itemTemplate | +any | +null | +The template of each item content in the container. | +
headerTemplate | +any | +null | +The template of the header. | +
headerStyle | +object | +null | +Inline style of the header. | +
headerClassName | +string | +null | +Style class of the header. | +
contentStyle | +object | +null | +Inline style of the content. | +
contentClassName | +string | +null | +Style class of the content. | +
Name | +Parameters | +Description | +
---|---|---|
onBeforeUpload | +
+ event.xhr: XmlHttpRequest instance. + event.formData: FormData object. + |
+ Callback to invoke before file upload begins to customize the request such as post parameters before the files. | +
onBeforeSend | +
+ event.xhr: XmlHttpRequest instance. + event.formData: FormData object. + |
+ Callback to invoke before file send begins to customize the request such as adding headers. | +
onBeforeDrop | +event: DragEvent instance. | +Callback to invoke before files dropped. Return false from callback to prevent drop. | +
onBeforeSelect | +
+ event.originalEvent: Original browser event. + event.target.files: List of selected files. + |
+ Callback to invoke before files are selected. Return false from callback to prevent selection. | +
onUpload | +
+ event.xhr: XmlHttpRequest instance.
+ + event.files: Uploaded files. + |
+ Callback to invoke when file upload is complete. | +
onError | +
+ event.xhr: XmlHttpRequest instance.
+ + event.files: Files that are not uploaded. + |
+ Callback to invoke if file upload fails. | +
onClear | +- | +Callback to invoke when files in queue are removed without uploading. | +
onSelect | +
+ event.originalEvent: Original browser event. + event.target.files: List of selected files. + |
+ Callback to invoke when files are selected. | +
onProgress | +
+ event.originalEvent: Original browser event. + event.progress: Calculated progress value. + |
+ Callback to invoke when files are being uploaded. | +
onValidationFail | +file: Invalid file. | +Callback to invoke when a validation file fails. | +
uploadHandler | +
+ event.files: List of selected files.
+ + event.options: Handler options. + |
+ Callback to invoke in custom upload mode to upload the files manually. | +
onRemove | +
+ event.originalEvent: Original browser event. + event.file: Selected file. + |
+ Callback to invoke when a file is removed without uploading using clear button of a file. | +
Name | +Parameters | +Description | +
---|---|---|
upload | +- | +Uploads the selected files. | +
clear | +- | +Clears the files list. | +
+ Following is the list of structural style classes, for theming classes visit theming page. +
+Name | +Element | +
---|---|
p-fileupload | +Container element. | +
p-fileupload-buttonbar | +Header containing the buttons. | +
p-fileupload-content | +Content section. | +
None.
+Galleria requires a value as an array of objects and can either be used as a Controlled or Uncontrolled component.
-Number of items per page is defined using the numVisible property.
-+ Number of items per page is defined using the numVisible property. +
+For responsive design, numVisible can be defined using the responsiveOptions property that should be an array of - objects whose breakpoint defines the max-width to apply the settings.
-+ For responsive design, numVisible can be defined using the responsiveOptions property that should be an array of objects whose breakpoint defines the max-width to apply the settings. +
+Custom content projection is available using the header and footer properties.
-+ Custom content projection is available using the header and footer properties. +
+In controlled mode, activeIndex and onItemChange properties need to be defined to control the first visible item.
++ In controlled mode, activeIndex and onItemChange properties need to be defined to control the first visible item. +
-In uncontrolled mode, no additional properties are required. Initial item can be provided using the activeItemIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically - need to update the first visible item index, prefer to use the component as controlled.
++ In uncontrolled mode, no additional properties are required. Initial item can be provided using the activeItemIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further + updates. If you programmatically need to update the first visible item index, prefer to use the component as controlled. +
-Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Name | -Element | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Element | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tab | ++ tab + | Moves focus through interactive elements in the carousel. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Activates navigation. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Activates navigation. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tab | ++ tab + | Moves focus through the active slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Activates the focused slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Activates the focused slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
right arrow | ++ right arrow + | Moves focus to the next slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
left arrow | ++ left arrow + | Moves focus to the previous slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
home | ++ home + | Moves focus to the first slide link. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
end | ++ end + | Moves focus to the last slide link. |
Name | -Type | -Default | -Description | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Type | +Default | +Description | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
options | object | @@ -828,9 +828,11 @@ return (||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onOverlayClick | -originalEvent: Google Maps MouseEvent + |
+ originalEvent: Google Maps MouseEvent overlay: Clicked overlay - map: Map instance |
+ map: Map instance Callback to invoke when an overlay is clicked. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tab | ++ tab + | Moves focus through button bar. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
enter | ++ enter + | Activates the button. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
space | ++ space + | Activates the button. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
esc | ++ esc + | Closes the image preview. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onToggle | -event.originalEvent: browser event - event.value: active state as a boolean - |
+
+ event.originalEvent: browser event + event.value: active state as a boolean + |
Callback to invoke when inplace is opened or closed. |
Key | -Function | -
---|---|
enter | -Switches to content. | -
Key | -Function | -
---|---|
enter | -Switches to display. | -
space | -Switches to display. | -
+ Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily. +
++ Display element uses button role in view mode by default, displayProps can be used for customizations like adding aria-label or aria-labelledby attributes to describe the content of the view + mode or even overriding the default role. +
++ Closable inplace components displays a button with an aria-label that refers to the aria.close property of the locale API by default, you may use + closeButtonProps to customize the element and override the default aria-label. +
+ +Key | +Function | +
---|---|
+ enter + | +Switches to content. | +
Key | +Function | +
---|---|
+ enter + | +Switches to display. | +
+ space + | +Switches to display. | +
None.
- - { - useLiveEditorTabs({ name: 'InplaceDemo', sources: sources, service: 'ProductService', data: 'products-small' }) - } + {useLiveEditorTabs({ name: 'InplaceDemo', sources: sources, service: 'ProductService', data: 'products-small' })} ); -}) +}); export default InplaceDoc; diff --git a/components/doc/inputgroup/index.js b/components/doc/inputgroup/index.js index 43e07649a9..89f36a99e0 100644 --- a/components/doc/inputgroup/index.js +++ b/components/doc/inputgroup/index.js @@ -3,9 +3,8 @@ import { TabView } from '../../lib/tabview/TabView'; import { useLiveEditorTabs } from '../common/liveeditor'; const InputGroupDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -139,7 +138,7 @@ export class InputGroupDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hook Source', content: ` import React, { useState } from 'react'; @@ -265,7 +264,7 @@ const InputGroupDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -391,7 +390,7 @@ const InputGroupDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -523,18 +522,13 @@ const InputGroupDemo = () => { } ` } - } - + }; return (InputMask is used as a controlled component with value and onChange properties.
++ InputMask is used as a controlled component with value and onChange properties. +
Mask format can be a combination of the the following built-in definitions.
Underscore is the default placeholder for a mask and this can be customized using slotChart option.
++ Underscore is the default placeholder for a mask and this can be customized using slotChart option. +
If the input does not complete the mask definition, it is cleared by default. - Use autoClear property to control this behavior. In addition, certain part of - a mask can be made optional by using ? symbol where anything after the question - mark becomes optional.
++ If the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, certain part of a mask can be made optional by using ? symbol where anything + after the question mark becomes optional. +
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the input. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
None.
- { - useLiveEditorTabs({ name: 'InputMaskDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'InputMaskDemo', sources: sources })} ); -}) +}); export default InputMaskDoc; diff --git a/components/doc/inputnumber/index.js b/components/doc/inputnumber/index.js index 3b2bcf8b05..e2213f3e3c 100644 --- a/components/doc/inputnumber/index.js +++ b/components/doc/inputnumber/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const InputNumberDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -154,7 +153,7 @@ export class InputNumberDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -292,7 +291,7 @@ const InputNumberDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -430,7 +429,7 @@ const InputNumberDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` `, @@ -570,54 +569,63 @@ const InputNumberDemo = () => { } ` } - } + }; return (InputNumber is used as a controlled input with value and onValueChange properties. Component always provides a number type although formatting on the input is a string.
++ InputNumber is used as a controlled input with value and onValueChange properties. Component always provides a number type although formatting on the input is a string. +
-Format is defined using the mode property, "decimal" is the default value allowing only integers when there is no other configuration.
-+ Format is defined using the mode property, "decimal" is the default value allowing only integers when there is no other configuration. +
+Fractions are configured with the minFractionDigits property. Optionally maxFractionDigits can be used to defined a boundary for the maximum digits.
-+ Fractions are configured with the minFractionDigits property. Optionally maxFractionDigits can be used to defined a boundary for the maximum digits. +
+locale option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per BCP Language Tag.
-+ locale option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per{' '} + BCP Language Tag. +
+Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option - allows how the currency is displayed, valid values are "symbol" (default) or "code".
-+ Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option allows how the currency is displayed, valid values are "symbol" (default) + or "code". +
+Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
-+ Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties. +
+Spinner buttons is enabled using the showButtons options and layout is defined with the buttonLayout. 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 showButtons options and layout is defined with the buttonLayout. 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. +
+Step factor is 1 by default and can be customized with step option.
-+ Step factor is 1 by default and can be customized with step option. +
+Value to be entered can be restricted by configuring the min and max options.
-+ Value to be entered can be restricted by configuring the min and max options. +
+Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
p-inputnumber-button-icon | Button icon | -
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. - The input element uses spinbutton role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes.
-+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element uses spinbutton role in + addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. +
+Key | -Function | -
---|---|
tab | -Moves focus to the input. | -
up arrow | -Increments the value. | -
down arrow | -Decrements the value. | -
home | -Set the minimum value if provided. | -
end | -Set the maximum value if provided. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
+ up arrow + | +Increments the value. | +
+ down arrow + | +Decrements the value. | +
+ home + | +Set the minimum value if provided. | +
+ end + | +Set the maximum value if provided. | +
None.
- { - useLiveEditorTabs({ name: 'InputNumberDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'InputNumberDemo', sources: sources })} ); -}) +}); export default InputNumberDoc; diff --git a/components/doc/inputswitch/index.js b/components/doc/inputswitch/index.js index f0b6a0a607..d0e9dc296d 100644 --- a/components/doc/inputswitch/index.js +++ b/components/doc/inputswitch/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const InputSwitchDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -40,7 +39,7 @@ export class InputSwitchDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -64,7 +63,7 @@ const InputSwitchDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -88,7 +87,7 @@ const InputSwitchDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -115,189 +114,198 @@ const InputSwitchDemo = () => { } ` } - } + }; return (InputSwitch is used as a controlled input with checked and onChange properties.
++ InputSwitch is used as a controlled input with checked and onChange properties. +
-Any valid attribute is passed to the root element implicitly, extended properties are as follows;
-Name | -Type | -Default | -Description | -
---|---|---|---|
id | -string | -null | -Unique identifier of the element. | -
style | -string | -null | -Inline style of the element. | -
className | -string | -null | -Style class of the element. | -
inputId | -string | -null | -Identifier of the input element. | -
name | -string | -null | -Name of the input element. | -
tabIndex | -number | -null | -Index of the element in tabbing order. | -
checked | -boolean | -false | -Specifies whether a inputswitch should be checked or not. | -
trueValue | -any | -true | -Value in checked state. | -
falseValue | -any | -false | -Value in unchecked state. | -
disabled | -boolean | -false | -When present, it specifies that the component should be disabled. | -
tooltip | -any | -null | -Content of the tooltip. | -
tooltipOptions | -object | -null | -Configuration of the tooltip, refer to the tooltip documentation for more information. | -
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
+Name | +Type | +Default | +Description | +
---|---|---|---|
id | +string | +null | +Unique identifier of the element. | +
style | +string | +null | +Inline style of the element. | +
className | +string | +null | +Style class of the element. | +
inputId | +string | +null | +Identifier of the input element. | +
name | +string | +null | +Name of the input element. | +
tabIndex | +number | +null | +Index of the element in tabbing order. | +
checked | +boolean | +false | +Specifies whether a inputswitch should be checked or not. | +
trueValue | +any | +true | +Value in checked state. | +
falseValue | +any | +false | +Value in unchecked state. | +
disabled | +boolean | +false | +When present, it specifies that the component should be disabled. | +
tooltip | +any | +null | +Content of the tooltip. | +
tooltipOptions | +object | +null | +Configuration of the tooltip, refer to the tooltip documentation for more information. | +
Name | -Parameters | -Description | -
---|---|---|
onChange | -event.originalEvent: Browser event - event.value: Checked state as a boolean. |
- Callback to invoke on value change. | -
onFocus | -event: Browser event. | -Callback to invoke when the element receives focus. | -
onBlur | -event: Browser event. | -Callback to invoke when the element loses focus. | -
Name | +Parameters | +Description | +
---|---|---|
onChange | +
+ event.originalEvent: Browser event + event.value: Checked state as a boolean. + |
+ Callback to invoke on value change. | +
onFocus | +event: Browser event. | +Callback to invoke when the element receives focus. | +
onBlur | +event: Browser event. | +Callback to invoke when the element loses focus. | +
Following is the list of structural style classes, for theming classes visit theming page.
-Name | -Element | -
---|---|
p-inputswitch | -Container element. | -
p-inputswitch-checked | -Container element in active state. | -
p-inputswitch-slider | -Slider element behind the handle. | -
+ Following is the list of structural style classes, for theming classes visit theming page. +
+Name | +Element | +
---|---|
p-inputswitch | +Container element. | +
p-inputswitch-checked | +Container element in active state. | +
p-inputswitch-slider | +Slider element behind the handle. | +
InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props.
-+ InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined + with inputId prop or using aria-labelledby, aria-label props. +
+Key | -Function | -
---|---|
tab | -Moves focus to the switch. | -
space | -Toggles the checked state. | -
None.
-Key | +Function | +
---|---|
+ tab + | +Moves focus to the switch. | +
+ space + | +Toggles the checked state. | +
None.
+ - { - useLiveEditorTabs({ name: 'InputSwitchDemo', sources: sources }) - } -InputText is used as a controlled input with value and onChange properties.
-+ InputText is used as a controlled input with value and onChange properties. +
+A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class.
-+ A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class. +
+InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
++ InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. +
InputText passes any valid attribute to the underlying React HTMLInputElement element. Extended properties are as follows;
++ InputText passes any valid attribute to the underlying{' '} + + React HTMLInputElement + {' '} + element. Extended properties are as follows; +
Key | -Function | -
---|---|
tab | -Moves focus to the input. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
None.
- { - useLiveEditorTabs({ name: 'InputTextDemo', sources: sources }) - } - + {useLiveEditorTabs({ name: 'InputTextDemo', sources: sources })} - ) -}) + ); +}); export default InputTextDoc; diff --git a/components/doc/inputtextarea/index.js b/components/doc/inputtextarea/index.js index 6bf4fa0e26..ba5672cb46 100644 --- a/components/doc/inputtextarea/index.js +++ b/components/doc/inputtextarea/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const InputTextareaDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, {Component} from 'react'; @@ -44,7 +43,7 @@ export class InputTextareaDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -71,8 +70,8 @@ const InputTextareaDemo = () => { ) } ` - }, - 'ts': { + }, + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -100,7 +99,7 @@ const InputTextareaDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -131,8 +130,7 @@ const InputTextareaDemo = () => { } ` } - } - + }; return (Textarea is used as a controlled input with value and onChange properties.
++ Textarea is used as a controlled input with value and onChange properties. +
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the input. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
None.
- { - useLiveEditorTabs({ name: 'InputTextareaDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'InputTextareaDemo', sources: sources })} - ) -}) + ); +}); export default InputTextareaDoc; diff --git a/components/doc/invalid/index.js b/components/doc/invalid/index.js index 58fee69216..cb0d885dd3 100644 --- a/components/doc/invalid/index.js +++ b/components/doc/invalid/index.js @@ -3,9 +3,8 @@ import { TabView } from '../../lib/tabview/TabView'; import { useLiveEditorTabs } from '../common/liveeditor'; const InvalidDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -210,7 +209,7 @@ export class InvalidDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useEffect } from 'react'; @@ -406,7 +405,7 @@ const InvalidDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useEffect } from 'react'; @@ -602,7 +601,7 @@ const InvalidDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -815,17 +814,13 @@ const InvalidDemo = () => { } ` } - } + }; return (KeyFilter property is integrated in input components such as InputText using the keyfilter property. The value of the filter - can either a built-in regular expression or a custom one. Following input only accepts integers.
++ KeyFilter property is integrated in input components such as InputText using the keyfilter property. The value of the filter can either a built-in regular expression or a custom one. Following input only accepts + integers. +
-Commonly used cases have their own built-in shortcuts.
@@ -261,26 +262,26 @@ import { InputText } from 'primereact/inputtext';A custom filter is enabled by binding a regular expression, an example that blocks special characters would be;
-Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText.
-+ Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText. +
+None.
Knob is used as a controlled input with value and onChange properties.
-Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.
-+ Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively. +
+Step factor is 1 by default and can be customized with step option.
-+ Step factor is 1 by default and can be customized with step option. +
+valueColor defines the value color, rangeColor defines the range background and similarly textColor configures the color of the value text. - In addition, strokeWidth is used to determine the width of the stroke of range and value sections.
-+ valueColor defines the value color, rangeColor defines the range background and similarly textColor configures the color of the value text. In addition, strokeWidth is used to determine the width of + the stroke of range and value sections. +
+Default size of the Knob is 100 pixels for width and height, use the size property to customize it per your requirements.
-+ Default size of the Knob is 100 pixels for width and height, use the size property to customize it per your requirements. +
+Any valid attribute is passed to the root element implicitly, extended properties are as follows;
Name | -Type | -Default | -Description | -
---|---|---|---|
Name | +Type | +Default | +Description | +
id | -string | -null | -Unique identifier of the element. | -
value | -number | -null | -Value of the component. | -
size | -number | -100 | -Size of the component in pixels. | -
disabled | -boolean | -false | -When present, it specifies that the component should be disabled. | -
readOnly | -boolean | -false | -When present, it specifies that the component value cannot be edited. | -
step | -number | -null | -Step factor to increment/decrement the value. | -
min | -number | -0 | -Mininum boundary value. | -
max | -number | -100 | -Maximum boundary value. | -
valueColor | -string | -null | -Background of the value. | -
rangeColor | -string | -null | -Background color of the range. | -
textColor | -string | -null | -Color of the value text. | -
strokeWidth | -number | -14 | -Width of the knob stroke. | -
showValue | -boolean | -true | -Whether the show the value inside the knob. | -
valueTemplate | -string | -{value} | -Template string of the value. | -
id | +string | +null | +Unique identifier of the element. | +
value | +number | +null | +Value of the component. | +
size | +number | +100 | +Size of the component in pixels. | +
disabled | +boolean | +false | +When present, it specifies that the component should be disabled. | +
readOnly | +boolean | +false | +When present, it specifies that the component value cannot be edited. | +
step | +number | +null | +Step factor to increment/decrement the value. | +
min | +number | +0 | +Mininum boundary value. | +
max | +number | +100 | +Maximum boundary value. | +
valueColor | +string | +null | +Background of the value. | +
rangeColor | +string | +null | +Background color of the range. | +
textColor | +string | +null | +Color of the value text. | +
strokeWidth | +number | +14 | +Width of the knob stroke. | +
showValue | +boolean | +true | +Whether the show the value inside the knob. | +
valueTemplate | +string | +{value} | +Template string of the value. | +
Name | -Parameters | -Description | -
---|---|---|
Name | +Parameters | +Description | +
onChange | -value: New value | -Callback to invoke when the value changes. | -
onChange | +value: New value | +Callback to invoke when the value changes. | +
Following is the list of structural style classes, for theming classes visit theming page.
-Name | -Element | -
---|---|
p-knob | -Container element. | -
p-knob-range | -Range element. | -
p-knob-value | -Value element. | -
p-knob-text | -Text element. | -
Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using - aria-labelledby and aria-label props.
-+ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | +Name | +Element |
---|---|---|---|
tab | -Moves focus to the slider. | -||
- - left arrow - down arrow - - | -Decrements the value. | -||
- - right arrow - up arrow - - | -Increments the value. | +p-knob | +Container element. |
home | -Set the minimum value. | +p-knob-range | +Range element. |
end | -Set the maximum value. | +p-knob-value | +Value element. |
page up | -Increments the value by 10 steps. | -||
page down | -Decrements the value by 10 steps. | +p-knob-text | +Text element. |
+ Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using + aria-labelledby and aria-label props. +
+Key | +Function | +
---|---|
+ tab + | +Moves focus to the slider. | +
+ + left arrow + down arrow + + | +Decrements the value. | +
+ + right arrow + up arrow + + | +Increments the value. | +
+ home + | +Set the minimum value. | +
+ end + | +Set the maximum value. | +
+ page up + | +Increments the value by 10 steps. | +
+ page down + | +Decrements the value by 10 steps. | +
None.
Listbox is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives - of how to define the options property; One way is providing a collection of SelectItem instances having label-value pairs - whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value field pair. - In addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.
- -Options as SelectItems
-+ Listbox is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives of how to define the options property; One way is providing a collection + of SelectItem instances having label-value pairs whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value field pair. In + addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary. +
+ ++ Options as SelectItems +
+Options as any type
-+ Options as any type +
+When optionValue is not defined, value of an option refers to the option object itself.
++ When optionValue is not defined, value of an option refers to the option object itself. +
Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected - using metaKey or toggled individually depending on the value of metaKeySelection property value which is false by default. On touch enabled - devices metaKeySelection is turned on automatically even when enabled.
++ Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected using metaKey or toggled + individually depending on the value of metaKeySelection property value which is false by default. On touch enabled devices metaKeySelection is turned on automatically even when enabled. +
-Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate property. Its value can be JSXElement, function or string. For custom filter support, define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element.
++ Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate property. Its value can be JSXElement, function or string. For custom filter support, define a{' '} + filterTemplate function that gets the option instance as a parameter and returns the content for the filter element. +
-Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against - label of the items and filterBy property is available to choose one or more properties of the options. In addition filterMatchMode can be utilized - to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals". - Also, the filterValue and onFilterValueChange properties can be used to control the filter value.
- -+ Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against label of the items and filterBy property is available to choose one or more + properties of the options. In addition filterMatchMode can be utilized to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals". Also, the{' '} + filterValue and onFilterValueChange properties can be used to control the filter value. +
+ +Filter input can be customized with the filterInputProps option that passes any property to the filter input element.
-+ Filter input can be customized with the filterInputProps option that passes any property to the filter input element. +
+Options groups are specified with the optionGroupLabel and optionGroupChildren properties.
-+ Options groups are specified with the optionGroupLabel and optionGroupChildren properties. +
+Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the first selected option, if there is none then first option receives the focus. | -
up arrow | -Moves focus to the previous option. | -
down arrow | -Moves focus to the next option. | -
enter | -Toggles the selected state of the focused option. | -
space | -Toggles the selected state of the focused option. | -
home | -Moves focus to the first option. | -
end | -Moves focus to the last option. | -
shift + down arrow | -Moves focus to the next option and toggles the selection state. | -
shift + up arrow | -Moves focus to the previous option and toggles the selection state. | -
shift + space | -Selects the items between the most recently selected option and the focused option. | -
control + shift + home | -Selects the focused options and all the options up to the first one. | -
control + shift + end | -Selects the focused options and all the options down to the last one. | -
control + a | -Selects all options. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the first selected option, if there is none then first option receives the focus. | +
+ up arrow + | +Moves focus to the previous option. | +
+ down arrow + | +Moves focus to the next option. | +
+ enter + | +Toggles the selected state of the focused option. | +
+ space + | +Toggles the selected state of the focused option. | +
+ home + | +Moves focus to the first option. | +
+ end + | +Moves focus to the last option. | +
+ shift + down arrow + | +Moves focus to the next option and toggles the selection state. | +
+ shift + up arrow + | +Moves focus to the previous option and toggles the selection state. | +
+ shift + space + | +Selects the items between the most recently selected option and the focused option. | +
+ control + shift + home + | +Selects the focused options and all the options up to the first one. | +
+ control + shift + end + | +Selects the focused options and all the options down to the last one. | +
+ control + a + | +Selects all options. | +
None.
- { - useLiveEditorTabs({ name: 'ListBoxDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'ListBoxDemo', sources: sources })} ); -}) +}); export default ListBoxDoc; diff --git a/components/doc/megamenu/index.js b/components/doc/megamenu/index.js index fc1778a5fc..b19016a8ed 100644 --- a/components/doc/megamenu/index.js +++ b/components/doc/megamenu/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const MegaMenuDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -155,7 +154,7 @@ export class MegaMenuDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -296,7 +295,7 @@ const MegaMenuDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -437,7 +436,7 @@ const MegaMenuDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -581,33 +580,35 @@ const MegaMenuDemo = () => { } ` } - } + }; return (MegaMenu uses the common menu item api to define its items, visit MenuModel for details.
++ MegaMenu uses the common menu item api to define its items, visit MenuModel for details. +
MegaMenu requires a collection of menuitems as its model.
-Default orientation is "horizontal" with "vertical" as the alternative.
-The megamenu can display custom content by using the "start" and "end" properties.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | -
shift + tab | -Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | -
enter | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
space | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
escape | -If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | -
down arrow | -If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. | -
up arrow | -If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. | -
right arrow | -If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group. | -
left arrow | -If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group. | -
home | -Moves focus to the first menuitem within the submenu. | -
end | -Moves focus to the last menuitem within the submenu. | -
+ MegaMenu component uses the menubar role along with aria-orientation and the value to describe the component can either be provided with aria-labelledby or aria-label props. Each list item has a{' '} + presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a MegaMenu + uses the menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have aria-haspopup, aria-expanded and{' '} + aria-controls to define the relation between the item and the submenu. +
+ +Key | +Function | +
---|---|
+ tab + | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
+ shift + tab + | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
+ enter + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ space + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ escape + | +If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | +
+ down arrow + | +If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. | +
+ up arrow + | +If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. | +
+ right arrow + | +If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group. | +
+ left arrow + | +If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group. | +
+ home + | +Moves focus to the first menuitem within the submenu. | +
+ end + | +Moves focus to the last menuitem within the submenu. | +
None.
- { - useLiveEditorTabs({ name: 'MegaMenuDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'MegaMenuDemo', sources: sources })} - ) -}) + ); +}); export default MegaMenuDoc; diff --git a/components/doc/mention/index.js b/components/doc/mention/index.js index b84697e478..9cef845597 100644 --- a/components/doc/mention/index.js +++ b/components/doc/mention/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const MentionDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -148,7 +147,7 @@ export class MentionDemo extends Component { ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useEffect } from 'react'; @@ -275,7 +274,7 @@ const MentionDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useEffect } from 'react'; @@ -402,7 +401,7 @@ const MentionDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -533,38 +532,40 @@ const MentionDemo = () => { } ` } - } + }; return (Mention is used as a controlled component with suggestions and onSearch properties.
++ Mention is used as a controlled component with suggestions and onSearch properties. +
-It is used to define the expected keyword/s in the input field to mention someone or something.
-InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows;
@@ -723,7 +724,13 @@ const onSearch = (event) => {Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role - in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used - to instruct screen reader which option to read during keyboard navigation within the popup list.
-The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.
-+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition + to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to + instruct screen reader which option to read during keyboard navigation within the popup list. +
++ The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant{' '} + of the input element. +
+Key | -Function | -
---|---|
tab | -Moves focus to the input element when popup is not visible. - If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | -
up arrow | -Highlights the previous item if popup is visible. | -
down arrow | -Highlights the next item if popup is visible. | -
enter | -Selects the highlighted item and closes the popup if popup is visible. | -
home | -Highlights the first item if popup is visible. | -
end | -Highlights the last item if popup is visible. | -
escape | -Hides the popup. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | +
+ up arrow + | +Highlights the previous item if popup is visible. | +
+ down arrow + | +Highlights the next item if popup is visible. | +
+ enter + | +Selects the highlighted item and closes the popup if popup is visible. | +
+ home + | +Highlights the first item if popup is visible. | +
+ end + | +Highlights the last item if popup is visible. | +
+ escape + | +Hides the popup. | +
None.
- - { - useLiveEditorTabs({ name: 'MentionDemo', sources: sources, service: 'CustomerService', data: 'customers-small' }) - } + {useLiveEditorTabs({ name: 'MentionDemo', sources: sources, service: 'CustomerService', data: 'customers-small' })} - ) -}) + ); +}); export default MentionDoc; diff --git a/components/doc/menu/index.js b/components/doc/menu/index.js index e28d9e4c32..c83d47e51b 100644 --- a/components/doc/menu/index.js +++ b/components/doc/menu/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const MenuDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -80,7 +79,7 @@ export class MenuDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useRef } from 'react'; @@ -147,7 +146,7 @@ const MenuDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useRef } from 'react'; @@ -214,7 +213,7 @@ const MenuDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -285,51 +284,53 @@ const MenuDemo = () => { } ` } - } + }; return (Menu uses the common menumodel api to define its items, visit MenuModel API for details.
++ Menu uses the common menumodel api to define its items, visit MenuModel API for details. +
Menu requires a collection of menuitems as its model.
-Menu supports one level of nesting via subitems of an item.
-Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | +Function | +
---|---|
+ tab + | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
+ shift + tab + | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
+ enter + | +Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. | +
+ space + | +Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. | +
+ escape + | +If menu is in overlay mode, popup gets closes and focus moves to target. | +
+ down arrow + | +Moves focus to the next menuitem. | +
+ up arrow + | +Moves focus to the previous menuitem. | +
+ home + | +Moves focus to the first menuitem. | +
+ end + | +Moves focus to the last menuitem. | +
Key | -Function | -
---|---|
tab | -Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | -
shift + tab | -Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | -
enter | -Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. | -
space | -Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. | -
escape | -If menu is in overlay mode, popup gets closes and focus moves to target. | -
down arrow | -Moves focus to the next menuitem. | -
up arrow | -Moves focus to the previous menuitem. | -
home | -Moves focus to the first menuitem. | -
end | -Moves focus to the last menuitem. | -
None.
- { - useLiveEditorTabs({ name: 'MenuDemo', sources: sources }) - } - + {useLiveEditorTabs({ name: 'MenuDemo', sources: sources })} + - ) -}) + ); +}); export default MenuDoc; diff --git a/components/doc/menubar/index.js b/components/doc/menubar/index.js index a8219fd5b6..0bc94e88be 100644 --- a/components/doc/menubar/index.js +++ b/components/doc/menubar/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const MenubarDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -164,7 +163,7 @@ export class MenubarDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -313,7 +312,7 @@ const MenubarDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -462,7 +461,7 @@ const MenubarDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -614,40 +613,42 @@ const MenubarDemo = () => { } ` } - } + }; return (Menubar uses the common menu item api to define its items, visit MenuModel for details.
++ Menubar uses the common menu item api to define its items, visit MenuModel for details. +
Menubar requires nested menuitems as its model.
-The menubar can display custom content by using the "start" and "end" properties.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | -
shift + tab | -Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | -
enter | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
space | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
escape | -If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | -
down arrow | -If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. | -
up arrow | -If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. | -
right arrow | -If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item. | -
left arrow | -If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu. | -
home | -Moves focus to the first menuitem within the submenu. | -
end | -Moves focus to the last menuitem within the submenu. | -
+ Menubar component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor + elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a MenuBar uses the menu role with an{' '} + aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup, aria-expanded and aria-controls to define the relation + between the item and the submenu. +
+ ++ In mobile viewports, a menu icon appears with a button role along with aria-haspopup, aria-expanded and aria-controls to manage the relation between the overlay menubar and the button. The value + to describe the button can be defined aria-label or aria-labelledby specified using buttonProps, by default navigation key of the aria property from the locale{' '} + API as the aria-label. +
+ +Key | +Function | +
---|---|
+ tab + | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
+ shift + tab + | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
+ enter + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ space + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ escape + | +If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | +
+ down arrow + | +If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. | +
+ up arrow + | +If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. | +
+ right arrow + | +If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item. | +
+ left arrow + | +If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu. | +
+ home + | +Moves focus to the first menuitem within the submenu. | +
+ end + | +Moves focus to the last menuitem within the submenu. | +
None.
- { - useLiveEditorTabs({ name: 'MenubarDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'MenubarDemo', sources: sources })} - ) -}) + ); +}); export default MenubarDoc; diff --git a/components/doc/messages/index.js b/components/doc/messages/index.js index cf230842ea..f8fdaaa4ff 100644 --- a/components/doc/messages/index.js +++ b/components/doc/messages/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const MessagesDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -114,10 +113,10 @@ export class MessagesDemo extends Component { } } ` - }, - 'hooks': { - tabName: 'Hooks Source', - content: ` + }, + hooks: { + tabName: 'Hooks Source', + content: ` import React, { useEffect, useRef } from 'react'; import { Messages } from 'primereact/messages'; import { Message } from 'primereact/message'; @@ -215,10 +214,10 @@ const MessagesDemo = () => { ) } ` - }, - 'ts': { - tabName: 'TS Source', - content: ` + }, + ts: { + tabName: 'TS Source', + content: ` import React, { useEffect, useRef } from 'react'; import { Messages } from 'primereact/messages'; import { Message } from 'primereact/message'; @@ -316,14 +315,14 @@ const MessagesDemo = () => { ) } ` - }, - 'browser': { - tabName: 'Browser Source', - imports: ` + }, + browser: { + tabName: 'Browser Source', + imports: ` `, - content: ` + content: ` const { useEffect, useState, useRef } = React; const { Messages } = primereact.messages; const { Message } = primereact.message; @@ -422,46 +421,48 @@ const MessagesDemo = () => { } ` } - } + }; return (A single message is specified by the Message interface in PrimeReact that defines various properties such as severity, - summary and detail. Messages are displayed by using the show method on the ref of the Messages instance.
++ A single message is specified by the Message interface in PrimeReact that defines various properties such as severity, summary and detail. Messages are displayed by using the show method on the ref of the Messages + instance. +
Note that for animations, messages requires react-transition-group package.
-Show method accepts either a single message or an array of messages.
-clear() method removes all messages.
++ clear() method removes all messages. +
-replace(newMessages) method adds new messages after removing all old messages.
++ replace(newMessages) method adds new messages after removing all old messages. +
-Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.
++ Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false. +
-Messages are cleared automatically after the timeout defined by life property which is 3 seconds by default. Use sticky mode to make them stay until - they are manually removed.
++ Messages are cleared automatically after the timeout defined by life property which is 3 seconds by default. Use sticky mode to make them stay until they are manually removed. +
-Message component is useful in cases where a single message needs to be displayed related to an element such as forms. It has two properties, severity and text of the message.
-+ Message component is useful in cases where a single message needs to be displayed related to an element such as forms. It has two properties, severity and text of the message. +
+CSS helpers to display inline messages mostly within forms.
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
enter | -Closes the message. | -
space | -Closes the message. | -
+ Message components use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby{' '} + and aria-label can optionally be used as well. +
+ ++ Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use + closeButtonProps to customize the element and override the default aria-label. +
+ +Key | +Function | +
---|---|
+ enter + | +Closes the message. | +
+ space + | +Closes the message. | +
MultiSelect is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives - of how to define the options property; One way is providing a collection of SelectItem instances having label-value pairs - whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value field pair. In addition, - options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.
- -Options as SelectItems
-+ MultiSelect is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives of how to define the options property; One way is providing a + collection of SelectItem instances having label-value pairs whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value + field pair. In addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary. +
+ ++ Options as SelectItems +
+Options as any type
-+ Options as any type +
+When optionValue is not defined, value of an option refers to the option object itself.
++ When optionValue is not defined, value of an option refers to the option object itself. +
A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the display property to visualize the items as tokens.
-+ A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the display property to visualize the items as tokens. +
+Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option instance as a parameter and returns the content. For custom filter support define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element.
++ Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option instance as a parameter and returns the content. For custom filter + support define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element. +
-selectedItemTemplate can be used to customize the selected values display instead of the default comma separated list.
++ selectedItemTemplate can be used to customize the selected values display instead of the default comma separated list. +
-In addition panelHeaderTemplate and panelFooterTemplate can be used to customize the header and footer of panel.
-+ In addition panelHeaderTemplate and panelFooterTemplate can be used to customize the header and footer of panel. +
+Options groups are specified with the optionGroupLabel and optionGroupChildren properties.
-+ Options groups are specified with the optionGroupLabel and optionGroupChildren properties. +
+Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against - label of the items and filterBy property is available to choose one or more properties of the options. In addition filterMatchMode can be utilized - to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
++ Options can be filtered using an input field in the overlay by enabling the filter property. By default filtering is done against label of the items and filterBy property is available to choose one or more + properties of the options. In addition filterMatchMode can be utilized to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals". +
-Name | -Type | -Default | -Description | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Type | +Default | +Description | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
maxSelectedLabels | @@ -1284,7 +1304,13 @@ const groupedCities = [transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dropdownIcon | @@ -1302,7 +1328,9 @@ const groupedCities = [virtualScrollerOptions | object | null | -Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. | ++ Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. + | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
showSelectAll | @@ -1324,17 +1352,20 @@ const groupedCities = [
Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onChange | -event.originalEvent: Browser event - event.value: Current selected values + |
+ event.originalEvent: Browser event
+ + event.value: Current selected values + |
Callback to invoke when value changes. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onFilter | -event.originalEvent: Browser event - event.filter: Filter value. |
+
+ event.originalEvent: Browser event
+ + event.filter: Filter value. + |
Callback to invoke on filtering. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onSelectAll | -event.originalEvent: Browser event - event.checked: Whether all data is selected. |
+
+ event.originalEvent: Browser event
+ + event.checked: Whether all data is selected. + |
Callback to invoke when all data is selected. |
Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
tab | -Moves focus to the multiselect element. | -
space | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
down arrow | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
up arrow | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the multiselect element. | +
+ space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
+ down arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
+ up arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
Key | -Function | -
---|---|
tab | -Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. | -
shift + tab | -Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. | -
enter | -Toggles the selection state of the focused option. | -
space | -Toggles the selection state of the focused option. | -
escape | -Closes the popup, moves focus to the multiselect element. | -
down arrow | -Moves focus to the next option, if there is none then visual focus does not change. | -
up arrow | -Moves focus to the previous option, if there is none then visual focus does not change. | -
home | -Moves focus to the first option. | -
end | -Moves focus to the last option. | -
any printable character | -Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. | +
+ shift + tab + | +Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. | +
+ enter + | +Toggles the selection state of the focused option. | +
+ space + | +Toggles the selection state of the focused option. | +
+ escape + | +Closes the popup, moves focus to the multiselect element. | +
+ down arrow + | +Moves focus to the next option, if there is none then visual focus does not change. | +
+ up arrow + | +Moves focus to the previous option, if there is none then visual focus does not change. | +
+ home + | +Moves focus to the first option. | +
+ end + | +Moves focus to the last option. | +
+ any printable character + | +Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | +
Key | -Function | -
---|---|
space | -Toggles the checked state. | -
escape | -Closes the popup. | -
Key | +Function | +
---|---|
+ space + | +Toggles the checked state. | +
+ escape + | +Closes the popup. | +
Key | -Function | -
---|---|
enter | -Closes the popup and moves focus to the multiselect element. | -
escape | -Closes the popup and moves focus to the multiselect element. | -
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the multiselect element. | +
+ escape + | +Closes the popup and moves focus to the multiselect element. | +
Key | -Function | -
---|---|
enter | -Closes the popup and moves focus to the multiselect element. | -
space | -Closes the popup and moves focus to the multiselect element. | -
escape | -Closes the popup and moves focus to the multiselect element. | -
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the multiselect element. | +
+ space + | +Closes the popup and moves focus to the multiselect element. | +
+ escape + | +Closes the popup and moves focus to the multiselect element. | +
None.
- { - useLiveEditorTabs({ name: 'MultiSelectDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'MultiSelectDemo', sources: sources, extFiles: extFiles })} ); -}) +}); export default MultiSelectDoc; diff --git a/components/doc/multistatecheckbox/index.js b/components/doc/multistatecheckbox/index.js index 2d53520a15..6454599820 100644 --- a/components/doc/multistatecheckbox/index.js +++ b/components/doc/multistatecheckbox/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const MultiStateCheckboxDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -45,7 +44,7 @@ export class MultiStateCheckboxDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -72,7 +71,7 @@ const MultiStateCheckboxDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -99,9 +98,9 @@ const MultiStateCheckboxDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', - imports: ` + imports: ` `, content: ` @@ -129,31 +128,33 @@ const MultiStateCheckboxDemo = () => { } ` } - } + }; return (MultiStateCheckbox is used as a controlled input with value, options and onChange properties. The optionValue field refers to the value of each option.
-+ MultiStateCheckbox is used as a controlled input with value, options and onChange properties. The optionValue field refers to the value of each option. +
+Icon of each option is defined with the icon property of an option object. For templating use iconTemplate to render custom content inside the checkbox.
+Name | -Type | -Default | -Description | -
---|---|---|---|
icon | -string | -null | -The icon of the option. This is optional. The iconTemplate property can be used instead. | -
style | -object | -null | -Inline style of the checkbox element when the option is selected. | -
className | -string | -null | -Style class of the checkbox element when the option is selected. | -
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
-Name | -Type | -Default | -Description | -
---|---|---|---|
id | -string | -null | -Unique identifier of the element. | -
value | -any | -null | -Value of the MultiStateCheckbox. | -
options | -array | -null | -An array to display as the available options. | -
optionValue | -string | -null | -Property name to use as the value of an option, defaults to the option itself when not defined. | -
optionLabel | -string | -null | -Property name to refer to the option label, used by screen readers only. Defaults to optionValue. | -
iconTemplate | -any | -null | -Template of icon for the selected option. | -
dataKey | -string | -null | -A property to uniquely match the value in options for better performance. | -
style | -string | -null | -Inline style of the element. | -
className | -string | -null | -Style class of the element. | -
disabled | -boolean | -false | -When present, it specifies that the element value cannot be altered. | -
readOnly | -boolean | -false | -When present, it specifies that the value cannot be changed. | -
tabIndex | -number | -null | -Index of the element in tabbing order. | -
empty | -boolean | -true | -If false, the empty state is skipped in the chekbox. | -
tooltip | -any | -null | -Content of the tooltip. | -
tooltipOptions | -object | -null | -Configuration of the tooltip, refer to the tooltip documentation for more information. | -
+ Icon of each option is defined with the icon property of an option object. For templating use iconTemplate to render custom content inside the checkbox. +
-Name | -Parameters | -Description | -
---|---|---|
onChange | -event.originalEvent: Browser event - event.value: Current Value - |
- Callback to invoke on value change | -
Name | +Type | +Default | +Description | +
---|---|---|---|
icon | +string | +null | ++ The icon of the option. This is optional. The iconTemplate property can be used instead. + | +
style | +object | +null | +Inline style of the checkbox element when the option is selected. | +
className | +string | +null | +Style class of the checkbox element when the option is selected. | +
Following is the list of structural style classes, for theming classes visit theming page.
-Name | -Element | -
---|---|
p-chkbox | -Container element | -
p-multistatechkbox | -Container element | -
p-chkbox-box | -Container of icon. | -
p-chkbox-icon | -Icon element. | -
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
+Name | +Type | +Default | +Description | +
---|---|---|---|
id | +string | +null | +Unique identifier of the element. | +
value | +any | +null | +Value of the MultiStateCheckbox. | +
options | +array | +null | +An array to display as the available options. | +
optionValue | +string | +null | +Property name to use as the value of an option, defaults to the option itself when not defined. | +
optionLabel | +string | +null | +Property name to refer to the option label, used by screen readers only. Defaults to optionValue. | +
iconTemplate | +any | +null | +Template of icon for the selected option. | +
dataKey | +string | +null | +A property to uniquely match the value in options for better performance. | +
style | +string | +null | +Inline style of the element. | +
className | +string | +null | +Style class of the element. | +
disabled | +boolean | +false | +When present, it specifies that the element value cannot be altered. | +
readOnly | +boolean | +false | +When present, it specifies that the value cannot be changed. | +
tabIndex | +number | +null | +Index of the element in tabbing order. | +
empty | +boolean | +true | +If false, the empty state is skipped in the chekbox. | +
tooltip | +any | +null | +Content of the tooltip. | +
tooltipOptions | +object | +null | +Configuration of the tooltip, refer to the tooltip documentation for more information. | +
MultiStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with aria-labelledby or aria-label props. Component adds an element with - aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the optionLabel property that defaults to optionValue if not defined. Unchecked state label on the other hand is - retrieved from nullLabel key of the aria property from the locale API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
-Name | +Parameters | +Description | +
---|---|---|
onChange | +
+ event.originalEvent: Browser event + event.value: Current Value + |
+ Callback to invoke on value change | +
+ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | +Name | +Element |
---|---|---|---|
tab | -Moves focus to the checkbox. | +p-chkbox | +Container element | +
p-multistatechkbox | +Container element | ||
space | -Toggles between the values. | +p-chkbox-box | +Container of icon. | +
p-chkbox-icon | +Icon element. |
None.
-+ MultiStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with aria-labelledby or aria-label props. Component adds an element with + aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the optionLabel property that defaults to optionValue if not defined. Unchecked + state label on the other hand is retrieved from nullLabel key of the aria property from the locale API. This is an example of a custom accessibility implementation as there is no + one to one mapping between the component design and the WCAG specification. +
+Key | +Function | +
---|---|
+ tab + | +Moves focus to the checkbox. | +
+ space + | +Toggles between the values. | +
None.
+ + + {useLiveEditorTabs({ name: 'MultiStateCheckboxDemo', sources: sources })} + + + ); +}); export default MultiStateCheckboxDoc; diff --git a/components/doc/orderlist/index.js b/components/doc/orderlist/index.js index a7294198c8..31387f276f 100644 --- a/components/doc/orderlist/index.js +++ b/components/doc/orderlist/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const OrderListDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -65,7 +64,7 @@ export class OrderListDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useEffect } from 'react'; @@ -111,7 +110,7 @@ const OrderListDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useEffect } from 'react'; @@ -157,7 +156,7 @@ const OrderListDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -262,61 +261,68 @@ const OrderListDemo = () => { } ` } - } + }; return (OrderList requires an array as its value, a template for its content where each item in the array can be accessed inside the template and onChange - callback to update the value after reorder. +
+ OrderList requires an array as its value, a template for its content where each item in the array can be accessed inside the template and onChange + callback to update the value after reorder.
-Items can be reordered using drag and drop by enabling dragdrop property.
++ Items can be reordered using drag and drop by enabling dragdrop property. +
-Items can be filtered using an input field by enabling the filter property. By default filtering is done against - label of the items and filterBy property is available to choose one or more properties of the options. In addition filterMatchMode can be utilized - to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
++ Items can be filtered using an input field by enabling the filter property. By default filtering is done against label of the items and filterBy property is available to choose one or more properties of the + options. In addition filterMatchMode can be utilized to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals". +
-For custom content support define an itemTemplate function that gets the item instance as a parameter and returns the content. For custom filter support define a filterTemplate function that gets the option instance as a parameter and returns the content for the filter element.
++ For custom content support define an itemTemplate function that gets the item instance as a parameter and returns the content. For custom filter support define a filterTemplate function that gets the option + instance as a parameter and returns the content for the filter element. +
-Name | -Type | -Default | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Type | +Default | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onChange | -event.originalEvent: Browser event - event.value: Reordered list |
+
+ event.originalEvent: Browser event + event.value: Reordered list + |
Callback to invoke when list is reordered. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onFilter | -event.originalEvent: Original event - event.filter: Value of the filter input |
+
+ event.originalEvent: Original event + event.filter: Value of the filter input + |
Callback to invoke when the value is filtered. |
Key | -Function | -
---|---|
tab | -Moves focus to the first selected option, if there is none then first option receives the focus. | -
up arrow | -Moves focus to the previous option. | -
down arrow | -Moves focus to the next option. | -
enter | -Toggles the selected state of the focused option. | -
space | -Toggles the selected state of the focused option. | -
home | -Moves focus to the first option. | -
end | -Moves focus to the last option. | -
shift + down arrow | -Moves focus to the next option and toggles the selection state. | -
shift + up arrow | -Moves focus to the previous option and toggles the selection state. | -
shift + space | -Selects the items between the most recently selected option and the focused option. | -
control + shift + home | -Selects the focused options and all the options up to the first one. | -
control + shift + end | -Selects the focused options and all the options down to the first one. | -
control + a | -Selects all options. | -
Key | -Function | -
---|---|
enter | -Executes button action. | -
space | -Executes button action. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the first selected option, if there is none then first option receives the focus. | +
+ up arrow + | +Moves focus to the previous option. | +
+ down arrow + | +Moves focus to the next option. | +
+ enter + | +Toggles the selected state of the focused option. | +
+ space + | +Toggles the selected state of the focused option. | +
+ home + | +Moves focus to the first option. | +
+ end + | +Moves focus to the last option. | +
+ shift + down arrow + | +Moves focus to the next option and toggles the selection state. | +
+ shift + up arrow + | +Moves focus to the previous option and toggles the selection state. | +
+ shift + space + | +Selects the items between the most recently selected option and the focused option. | +
+ control + shift + home + | +Selects the focused options and all the options up to the first one. | +
+ control + shift + end + | +Selects the focused options and all the options down to the first one. | +
+ control + a + | +Selects all options. | +
Key | +Function | +
---|---|
+ enter + | +Executes button action. | +
+ space + | +Executes button action. | +
None.
- { - useLiveEditorTabs({ name: 'OrderListDemo', sources: sources, service: 'ProductService', data: 'products-small', extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'OrderListDemo', sources: sources, service: 'ProductService', data: 'products-small', extFiles: extFiles })} ); -}) +}); export default OrderListDoc; diff --git a/components/doc/organizationchart/index.js b/components/doc/organizationchart/index.js index df5b7b3b6a..ec6f003c87 100644 --- a/components/doc/organizationchart/index.js +++ b/components/doc/organizationchart/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const OrganizationChartDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -158,7 +157,7 @@ export class OrganizationChartDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -297,7 +296,7 @@ const OrganizationChartDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -436,7 +435,7 @@ const OrganizationChartDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -579,7 +578,7 @@ const OrganizationChartDemo = () => { } ` } - } + }; const extFiles = { 'demo/OrganizationChartDemo.css': { @@ -627,31 +626,31 @@ const OrganizationChartDemo = () => { } ` } - } + }; return (OrganizationChart requires a model of TreeNode as its value.
-Label of the treenode is displayed inside the node content by default and templating enables further customization.
-In order to display a treenode as expanded by default, set "expanded" property as true in your model.
OrganizationChart supports two selection methods; single or multiple. Selection is enabled by setting selectionMode property to the corresponding mode, defining selection property along with selectionChange callback.
-+ OrganizationChart supports two selection methods; single or multiple. Selection is enabled by setting selectionMode property to the corresponding mode, defining selection property along with{' '} + selectionChange callback. +
+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.
- -Key | -Function | -
---|---|
tab | -Moves focus through the focusable elements within the chart. | -
enter | -Toggles the expanded state of a node. | -
space | -Toggles the expanded state of a node. | -
+ 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. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus through the focusable elements within the chart. | +
+ enter + | +Toggles the expanded state of a node. | +
+ space + | +Toggles the expanded state of a node. | +
None.
-OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.
-Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. - Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.
+Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.
-OverlayPanel width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 450px and below 961px, width would be 75vw and finally below 641px width becomes - 100%. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
++ OverlayPanel width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 450px and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value + of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen. +
-Name | -Type | -Default | -Description | -||
---|---|---|---|---|---|
Name | +Type | +Default | +Description | +||
appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + | |
ariaCloseLabel | @@ -485,7 +487,13 @@ import { OverlayPanel } from 'primereact/overlaypanel';transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
show | -event: Browser event - target: Optional target if event.target should not be used |
+
+ event: Browser event + target: Optional target if event.target should not be used + |
Shows the overlay. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element within the popup. | -
shift + tab | -Moves focus to the previous the focusable element within the popup. | -
escape | -Closes the popup and moves focus to the trigger. | -
Key | -Function | -
---|---|
enter | -Closes the popup and moves focus to the trigger. | -
space | -Closes the popup and moves focus to the trigger. | -
+ OverlayPanel component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition{' '} + aria-modal is added since focus is kept within the popup. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. OverlayPanel adds aria-expanded state attribute and{' '} + aria-controls to the trigger so that the relation between the trigger and the popup is defined. +
+ ++ When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element within the popup. | +
+ shift + tab + | +Moves focus to the previous the focusable element within the popup. | +
+ escape + | +Closes the popup and moves focus to the trigger. | +
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the trigger. | +
+ space + | +Closes the popup and moves focus to the trigger. | +
None.
- { - useLiveEditorTabs({ name: 'OverlayPanelDemo', sources: sources, service: 'ProductService', data: 'products-small', extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'OverlayPanelDemo', sources: sources, service: 'ProductService', data: 'products-small', extFiles: extFiles })} ); -}) +}); export default OverlayPanelDoc; diff --git a/components/doc/paginator/index.js b/components/doc/paginator/index.js index 2d94357a86..852e08486b 100644 --- a/components/doc/paginator/index.js +++ b/components/doc/paginator/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const PaginatorDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -229,7 +228,7 @@ export class PaginatorDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -424,7 +423,7 @@ const PaginatorDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -619,7 +618,7 @@ const PaginatorDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -829,66 +828,67 @@ const PaginatorDemo = () => { } ` } - } + }; return (Paginator is used as a controlled component with first, rows (optional) and onPageChange properties.
++ Paginator is used as a controlled component with first, rows (optional) and onPageChange properties. +
-Rows and TotalRecords define how many pages the paginator should display. Paginator below will have 10 pages.
-Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values. In this case, - rows property should also be updated -
-Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values. In this case, rows property should also be updated
+Paginator elements can be customized using the template 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.
++ Paginator elements can be customized using the template 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. +
The pagination element is fully customizable. To make special paginators, an object can be given to the template property as below.
-+ The pagination element is fully customizable. To make special paginators, an object can be given to the template property as below. +
+Current page report item in the itemplate displays information about the pagination state. Default value is ({currentPage} of {totalPages}) - whereas available placeholders are the following;
+Current page report item in the itemplate displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
tab | ++ tab + | Moves focus through the paginator elements. |
enter | ++ enter + | Executes the paginator element action. |
space | ++ space + | Executes the paginator element action. | transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
Name | -Parameters | -Description | -|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onToggle | -event.originalEvent: browser event + |
+ event.originalEvent: browser event event.value: collapsed state as a boolean |
Callback to invoke when a tab gets expanded. | @@ -445,7 +461,9 @@ template: (options) => {
Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element in the page tab sequence. | -
shift + tab | -Moves focus to the previous the focusable element in the page tab sequence. | -
enter | -Toggles the visibility of the content. | -
space | -Toggles the visibility of the content. | -
+ Toggleable panels use a content toggle button at the header that has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button + defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property. +
++ The content uses region, defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element in the page tab sequence. | +
+ shift + tab + | +Moves focus to the previous the focusable element in the page tab sequence. | +
+ enter + | +Toggles the visibility of the content. | +
+ space + | +Toggles the visibility of the content. | +
PanelMenu uses the common menu item api to define its items, visit MenuModel for details.
++ PanelMenu uses the common menu item api to define its items, visit MenuModel for details. +
PanelMenu requires a collection of menuitems as its model.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
tab | ++ tab + | Adds focus to the first header when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. | |||
enter | ++ enter + | Toggles the visibility of the content. | |||
space | ++ space + | Toggles the visibility of the content. | |||
down arrow | ++ down arrow + | If panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus. | |||
up arrow | ++ up arrow + | If previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus. | |||
home | ++ home + | Moves focus to the first header. | |||
end | ++ end + | Moves focus to the last header. | |||
tab | ++ tab + | Moves focus to the next focusable element in the page tab order. | |||
shift + tab | ++ shift + tab + | Moves focus to the previous focusable element in the page tab order. | |||
enter | ++ enter + | Activates the focused treenode. | |||
space | ++ space + | Activates the focused treenode. | |||
down arrow | ++ down arrow + | Moves focus to the next treenode. | |||
up arrow | ++ up arrow + | Moves focus to the previous treenode. | |||
right arrow | ++ right arrow + | If node is closed, opens the node otherwise moves focus to the first child node. | |||
left arrow | ++ left arrow + | If node is open, closes the node otherwise moves focus to the parent node. | appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + |
header | @@ -409,7 +412,13 @@ import { Password } from 'primereact/password';transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
Name | -Parameters | -Description | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
tab | -Moves focus to the input. | -
escape | -Hides the strength meter if open. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
+ escape + | +Hides the strength meter if open. | +
None.
- { - useLiveEditorTabs({ name: 'PasswordDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'PasswordDemo', sources: sources, extFiles: extFiles })} - ) -}) + ); +}); export default PasswordDoc; diff --git a/components/doc/picklist/index.js b/components/doc/picklist/index.js index 6cd540e3b8..7d3941fc13 100644 --- a/components/doc/picklist/index.js +++ b/components/doc/picklist/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const PickListDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -75,7 +74,7 @@ export class PickListDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState, useEffect } from 'react'; @@ -128,7 +127,7 @@ const PickListDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState, useEffect } from 'react'; @@ -181,7 +180,7 @@ const PickListDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -293,54 +292,57 @@ const PickListDemo = () => { } ` } - } + }; return (PickList requires two arrays as source and target lists, an itemTemplate for the item content and onChange callback to update the value after reorder or transfer.
-+ PickList requires two arrays as source and target lists, an itemTemplate for the item content and onChange callback to update the value after reorder or transfer. +
+sourceHeader and targetHeader properties are used to define captions for the lists that accept simple strings or JSX for custom content.
++ sourceHeader and targetHeader properties are used to define captions for the lists that accept simple strings or JSX for custom content. +
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with the aria-multiselectable attribute. - Each list item has an option role with aria-selected and aria-disabled as their attributes.
-Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom, - aria.moveTo, aria.moveAllTo, aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use - moveTopButtonProps, moveUpButtonProps, moveDownButtonProps, moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
-+ Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a{' '} + listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. +
++ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo,{' '} + aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use + moveTopButtonProps, moveUpButtonProps, moveDownButtonProps, moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and{' '} + moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. +
+Key | -Function | -
---|---|
tab | -Moves focus to the first selected option, if there is none then first option receives the focus. | -
up arrow | -Moves focus to the previous option. | -
down arrow | -Moves focus to the next option. | -
enter | -Toggles the selected state of the focused option. | -
space | -Toggles the selected state of the focused option. | -
home | -Moves focus to the first option. | -
end | -Moves focus to the last option. | -
shift + down arrow | -Moves focus to the next option and toggles the selection state. | -
shift + up arrow | -Moves focus to the previous option and toggles the selection state. | -
shift + space | -Selects the items between the most recently selected option and the focused option. | -
control + shift + home | -Selects the focused options and all the options up to the first one. | -
control + shift + end | -Selects the focused options and all the options down to the first one. | -
control + a | -Selects all options. | -
Key | -Function | -
---|---|
enter | -Executes button action. | -
space | -Executes button action. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the first selected option, if there is none then first option receives the focus. | +
+ up arrow + | +Moves focus to the previous option. | +
+ down arrow + | +Moves focus to the next option. | +
+ enter + | +Toggles the selected state of the focused option. | +
+ space + | +Toggles the selected state of the focused option. | +
+ home + | +Moves focus to the first option. | +
+ end + | +Moves focus to the last option. | +
+ shift + down arrow + | +Moves focus to the next option and toggles the selection state. | +
+ shift + up arrow + | +Moves focus to the previous option and toggles the selection state. | +
+ shift + space + | +Selects the items between the most recently selected option and the focused option. | +
+ control + shift + home + | +Selects the focused options and all the options up to the first one. | +
+ control + shift + end + | +Selects the focused options and all the options down to the first one. | +
+ control + a + | +Selects all options. | +
Key | +Function | +
---|---|
+ enter + | +Executes button action. | +
+ space + | +Executes button action. | +
None.
-ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.
-Indeterminate is simplly enabled using mode property.
-+ Indeterminate is simplly enabled using mode property. +
+Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -385,7 +386,9 @@ import { ProgressBar } from 'primereact/progressbar';Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using - aria-labelledby and aria-label props.
-+ ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using + aria-labelledby and aria-label props. +
+Not applicable.
-None.
-Not applicable.
+ +None.
+ - { - useLiveEditorTabs({ name: 'ProgressBarDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'ProgressBarDemo', sources: sources })} ); -}) +}); export default ProgressBarDoc; diff --git a/components/doc/progressspinner/index.js b/components/doc/progressspinner/index.js index 2648f9fa99..a79c1211a8 100644 --- a/components/doc/progressspinner/index.js +++ b/components/doc/progressspinner/index.js @@ -6,11 +6,10 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const ProgressSpinnerDoc = memo(() => { - - const sources = { - 'class': { - tabName: 'Class Source', - content: ` + const sources = { + class: { + tabName: 'Class Source', + content: ` import React, { Component } from 'react'; import { ProgressSpinner } from 'primereact/progressspinner'; @@ -32,7 +31,7 @@ export class ProgressSpinnerDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -53,7 +52,7 @@ const ProgressSpinnerDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -74,7 +73,7 @@ const ProgressSpinnerDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -98,39 +97,39 @@ const ProgressSpinnerDemo = () => { } ` } - } + }; return (ProgressSpinner is defined using ProgressSpinner element.
-Colors of the spinner can be changed by overriding the keyframes animation
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Name | -Element | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Element | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onChange | -event.originalEvent: Original event + |
+ event.originalEvent: Original event event.value: Value of the radiobutton - event.checked: Checked state as a boolean. |
+ event.checked: Checked state as a boolean.
+
Callback to invoke on radio button click. |
Key | -Function | -
---|---|
tab | -Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. | -
- - left arrow - up arrow - - | -Moves focus to the previous radio button, if there is none then last radio button receives the focus. | -
- - right arrow - down arrow - - | -Moves focus to the next radio button, if there is none then first radio button receives the focus. | -
space | -If the focused radio button is unchecked, changes the state to checked. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. | +
+ + left arrow + up arrow + + | +Moves focus to the previous radio button, if there is none then last radio button receives the focus. | +
+ + right arrow + down arrow + + | +Moves focus to the next radio button, if there is none then first radio button receives the focus. | +
+ space + | +If the focused radio button is unchecked, changes the state to checked. | +
None.
- { - useLiveEditorTabs({ name: 'RadioButtonDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'RadioButtonDemo', sources: sources })} - ) -}) + ); +}); export default RadioButtonDoc; diff --git a/components/doc/rating/index.js b/components/doc/rating/index.js index 75a224e2f1..7f2ca44eb0 100644 --- a/components/doc/rating/index.js +++ b/components/doc/rating/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const RatingDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -47,7 +46,7 @@ export class RatingDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -77,7 +76,7 @@ const RatingDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -107,7 +106,7 @@ const RatingDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -140,53 +139,59 @@ const RatingDemo = () => { } ` } - } + }; return (Rating is used a controlled input component with value and onChange properties.
++ Rating is used a controlled input component with value and onChange properties. +
-Number of stars to display is defined with stars property, default is 5.
++ Number of stars to display is defined with stars property, default is 5. +
-A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.
++ A cancel icon is displayed to reset the value by default, set cancel as false to remove this option. +
-Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -278,7 +283,8 @@ import { Rating } from 'primereact/rating';Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property.
- -Keyboard interaction is derived from the native browser handling of radio buttons in a group.
-Key | -Function | -
---|---|
tab | -Moves focus to the star representing the value, if there is none then first star receives the focus. | -
- - left arrow - up arrow - - | -Moves focus to the previous star, if there is none then last radio button receives the focus. | -
- - right arrow - down arrow - - | -Moves focus to the next star, if there is none then first star receives the focus. | -
space | -If the focused star does not represent the value, changes the value to the star value. | -
+ Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the{' '} + aria property. +
+ +Keyboard interaction is derived from the native browser handling of radio buttons in a group.
+Key | +Function | +
---|---|
+ tab + | +Moves focus to the star representing the value, if there is none then first star receives the focus. | +
+ + left arrow + up arrow + + | +Moves focus to the previous star, if there is none then last radio button receives the focus. | +
+ + right arrow + down arrow + + | +Moves focus to the next star, if there is none then first star receives the focus. | +
+ space + | +If the focused star does not represent the value, changes the value to the star value. | +
None.
- { - useLiveEditorTabs({ name: 'RatingDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'RatingDemo', sources: sources })} - ) -}) + ); +}); export default RatingDoc; diff --git a/components/doc/ripple/index.js b/components/doc/ripple/index.js index adf186d957..ab0dd76a97 100644 --- a/components/doc/ripple/index.js +++ b/components/doc/ripple/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const RippleDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -50,7 +49,7 @@ export class RippleDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -86,7 +85,7 @@ const RippleDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -122,7 +121,7 @@ const RippleDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -200,66 +199,73 @@ const RippleDemo = () => { } ` } - } + }; return (Ripple effect 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 main container (e.g. App.js) using the PrimeReact class.
-+ Ripple effect 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 main container (e.g. App.js) using the PrimeReact class. +
+Note: That would be it to enable ripple on PrimeReact components, next section describes how to use it with your own components and standard elements.
++ Note: That would be it to enable ripple on PrimeReact components, next section describes how to use it with your own components and standard elements. +
Ripple is a component that needs to be imported and activated using PrimeReact.ripple = true
-+ Ripple is a component that needs to be imported and activated using PrimeReact.ripple = true +
+Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of .p-ink element.
-+ Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of .p-ink element. +
+Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.
++ Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers. +
-Component does not include any interactive elements.
-Component does not include any interactive elements.
+None.
ScrollPanel is defined using dimensions for the scrollable viewport.
-Look and feel can easily be customized, here is an example with a custom handle.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Scrollbars of the ScrollPanel has a scrollbar role along with the aria-controls attribute that refers to the id of the scrollable content container and the aria-orientation to indicate the orientation of scrolling.
++ Scrollbars of the ScrollPanel has a scrollbar role along with the aria-controls attribute that refers to the id of the scrollable content container and the aria-orientation to indicate the + orientation of scrolling. +
-Key | -Function | -
---|---|
down arrow | -Scrolls content down when vertical scrolling is available. | -
up arrow | -Scrolls content up when vertical scrolling is available. | -
left | -Scrolls content left when horizontal scrolling is available. | -
right | -Scrolls content right when horizontal scrolling is available. | -
Key | +Function | +
---|---|
+ down arrow + | +Scrolls content down when vertical scrolling is available. | +
+ up arrow + | +Scrolls content up when vertical scrolling is available. | +
+ left + | +Scrolls content left when horizontal scrolling is available. | +
+ right + | +Scrolls content right when horizontal scrolling is available. | +
None.
Without any configuration, ScrollTop listens window scroll.
-When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is - defined with the threshold property that defaults to 400.
-+ When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is defined with the threshold property that defaults to 400. +
+ScrollTop can also be assigned to its parent element by setting target as "parent".
-+ ScrollTop can also be assigned to its parent element by setting target as "parent". +
+Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -284,7 +286,13 @@ import { ScrollTop } from 'primereact/scrolltop';Name | -Parameters | -Description | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Parameters | +Description | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
enter | -Scrolls to top. | -
space | -Scrolls to top. | -
Key | +Function | +
---|---|
+ enter + | +Scrolls to top. | +
+ space + | +Scrolls to top. | +
None.
- { - useLiveEditorTabs({ name: 'ScrollTopDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'ScrollTopDemo', sources: sources, extFiles: extFiles })} ); -}) +}); export default ScrollTopDoc; diff --git a/components/doc/selectbutton/index.js b/components/doc/selectbutton/index.js index 883881f7e2..a87e246b02 100644 --- a/components/doc/selectbutton/index.js +++ b/components/doc/selectbutton/index.js @@ -5,9 +5,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const SelectButtonDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -62,7 +61,7 @@ export class SelectButtonDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -106,7 +105,7 @@ const SelectButtonDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -150,7 +149,7 @@ const SelectButtonDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -197,36 +196,39 @@ const SelectButtonDemo = () => { } ` } - } + }; return (Dropdown is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives - of how to define the options property; One way is providing a collection of SelectItem instances having label-value pairs - whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value field pair. In addition, - options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.
- -Options as SelectItems
-+ Dropdown is used as a controlled component with value and onChange properties along with the options collection. There are two alternatives of how to define the options property; One way is providing a collection + of SelectItem instances having label-value pairs whereas other way is providing an array of arbitrary objects along with the optionLabel and optionValue properties to specify the label/value field pair. In + addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary. +
+ ++ Options as SelectItems +
+Options as any type
-+ Options as any type +
+When optionValue is not defined, value of an option refers to the option object itself.
++ When optionValue is not defined, value of an option refers to the option object itself. +
SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.
++ SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array. +
Options support templating using the itemTemplate property that references a function to render the content. Notice - the usage of optionLabel, although it is not rendered visually, it is still required to be used as the list key.
++ Options support templating using the itemTemplate property that references a function to render the content. Notice the usage of optionLabel, although it is not rendered visually, it is still required to be used as the + list key. +
-The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. - Value to describe an option is automatically set using the aria-label property that refers to the label of an option so it is still suggested to define a label even the option display - consists of presentational content like icons only.
- -Key | -Function | -
---|---|
tab | -Moves focus to the buttons. | -
space | -Toggles the checked state of a button. | -
+ The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Value to describe an option is + automatically set using the aria-label property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only. +
+ +Key | +Function | +
---|---|
+ tab + | +Moves focus to the buttons. | +
+ space + | +Toggles the checked state of a button. | +
None.
Sidebar is used as a container and visibility is controlled with visible property.
++ Sidebar is used as a container and visibility is controlled with visible property. +
-Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property.
++ Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property. +
-Sidebar size can be changed using a fixed value or using one of the three predefined ones.
-Full screen mode allows the sidebar to cover whole screen.
-Additional content can be provided using the icons property.
++ Additional content can be provided using the icons property. +
-Sidebar component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. - In addition aria-modal is added since focus is kept within the sidebar when opened.
-It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
-Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
- -+ Sidebar component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can + be added. In addition aria-modal is added since focus is kept within the sidebar when opened. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. +
++ Trigger element also requires aria-expanded and aria-controls to be handled explicitly. +
+ +Key | -Function | -
---|---|
tab | -Moves focus to the next the focusable element within the sidebar. | -
shift + tab | -Moves focus to the previous the focusable element within the sidebar. | -
escape | -Closes the dialog if closeOnEscape is true. | -
Key | -Function | -
---|---|
enter | -Closes the sidebar. | -
space | -Closes the sidebar. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the next the focusable element within the sidebar. | +
+ shift + tab + | +Moves focus to the previous the focusable element within the sidebar. | +
+ escape + | ++ Closes the dialog if closeOnEscape is true. + | +
Key | +Function | +
---|---|
+ enter + | +Closes the sidebar. | +
+ space + | +Closes the sidebar. | +
None.
- { - useLiveEditorTabs({ name: 'SidebarDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'SidebarDemo', sources: sources })} - ) -}) + ); +}); export default SidebarDoc; diff --git a/components/doc/skeleton/index.js b/components/doc/skeleton/index.js index 90afcf13da..30b2209129 100644 --- a/components/doc/skeleton/index.js +++ b/components/doc/skeleton/index.js @@ -5,10 +5,9 @@ import { useLiveEditorTabs } from '../common/liveeditor'; import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; -const SkeletonDoc = memo(Â () => { - +const SkeletonDoc = memo(() => { const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from "react"; @@ -149,7 +148,7 @@ export class SkeletonDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -287,7 +286,7 @@ export const SkeletonDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from "react"; @@ -425,7 +424,7 @@ export const SkeletonDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -583,63 +582,71 @@ const SkeletonDemo = () => { } ` } - } + }; return (Skeleton displays a rectangle in its simplest form.
-The other option is the circle by setting shape property as "circle".
-+ The other option is the circle by setting shape property as "circle". +
+In order to customize the size, use width and height properties for rectangles and size for Circle and Square shapes.
-+ In order to customize the size, use width and height properties for rectangles and size for Circle and Square shapes. +
+The default border radius of a rectangle is specified by the theme and can be overriden using the borderRadius property.
-+ The default border radius of a rectangle is specified by the theme and can be overriden using the borderRadius property. +
+Animation can be turned of by setting animation to "none".
-+ Animation can be turned of by setting animation to "none". +
+Any valid attribute is passed to the root element implicitly, extended properties are as follows;
Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
appendTo | DOM element | string | document.body | -DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. | ++ DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + |
transitionOptions | object | null | -The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. | ++ The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. + |
Name | -Element | -||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | +Element | +||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Key | -Function | -
---|---|
tab | -Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | -
shift + tab | -Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | -
enter | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
space | -If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | -
escape | -If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | -
down arrow | -Moves focus to the next menuitem within the submenu. | -
up arrow | -Moves focus to the previous menuitem within the submenu. | -
right arrow | -Opens a submenu if there is one available and moves focus to the first item. | -
left arrow | -Closes a submenu and moves focus to the root item of the closed submenu. | -
home | -Moves focus to the first menuitem within the submenu. | -
end | -Moves focus to the last menuitem within the submenu. | -
Key | +Function | +
---|---|
+ tab + | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
+ shift + tab + | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
+ enter + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ space + | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
+ escape + | +If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | +
+ down arrow + | +Moves focus to the next menuitem within the submenu. | +
+ up arrow + | +Moves focus to the previous menuitem within the submenu. | +
+ right arrow + | +Opens a submenu if there is one available and moves focus to the first item. | +
+ left arrow + | +Closes a submenu and moves focus to the root item of the closed submenu. | +
+ home + | +Moves focus to the first menuitem within the submenu. | +
+ end + | +Moves focus to the last menuitem within the submenu. | +
None.
- { - useLiveEditorTabs({ name: 'SlideMenuDemo', sources: sources }) - } + {useLiveEditorTabs({ name: 'SlideMenuDemo', sources: sources })} - ) -}) + ); +}); export default SlideMenuDoc; diff --git a/components/doc/slider/index.js b/components/doc/slider/index.js index 55472f68ea..e1a057565d 100644 --- a/components/doc/slider/index.js +++ b/components/doc/slider/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const SliderDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -60,7 +59,7 @@ export class SliderDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useState } from 'react'; @@ -103,7 +102,7 @@ const SliderDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useState } from 'react'; @@ -146,7 +145,7 @@ const SliderDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -207,51 +206,57 @@ const SliderDemo = () => { } ` } - } + }; return (Slider is used as a controlled input with value and onChange properties.
++ Slider is used as a controlled input with value and onChange properties. +
-Range slider provides two handles to define two values. Enable range property and bind an array to implement a range slider.
-+ Range slider provides two handles to define two values. Enable range property and bind an array to implement a range slider. +
+Default layout of slider is horizontal, use orientation property for the alternative vertical mode.
-+ Default layout of slider is horizontal, use orientation property for the alternative vertical mode. +
+Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -355,14 +360,16 @@ import { Slider } from 'primereact/slider';Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
tab | -Moves focus to the slider. | -
- - left arrow - up arrow - - | -Decrements the value. | -
- - right arrow - down arrow - - | -Increments the value. | -
home | -Set the minimum value. | -
end | -Set the maximum value. | -
page up | -Increments the value by 10 steps. | -
page down | -Decrements the value by 10 steps. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the slider. | +
+ + left arrow + up arrow + + | +Decrements the value. | +
+ + right arrow + down arrow + + | +Increments the value. | +
+ home + | +Set the minimum value. | +
+ end + | +Set the maximum value. | +
+ page up + | +Increments the value by 10 steps. | +
+ page down + | +Decrements the value by 10 steps. | +
None.
- { - useLiveEditorTabs({ name: 'SliderDemo', sources: sources, extFiles: extFiles }) - } + {useLiveEditorTabs({ name: 'SliderDemo', sources: sources, extFiles: extFiles })} ); -}) +}); export default SliderDoc; diff --git a/components/doc/speeddial/index.js b/components/doc/speeddial/index.js index 3c58e4cd1a..63fe907f14 100644 --- a/components/doc/speeddial/index.js +++ b/components/doc/speeddial/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const SpeedDialDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -121,7 +120,7 @@ export class SpeedDialDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React from 'react'; @@ -230,7 +229,7 @@ export const SpeedDialDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React from 'react'; @@ -339,7 +338,7 @@ export const SpeedDialDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -453,7 +452,7 @@ const SpeedDialDemo = () => { } ` } - } + }; const extFiles = { 'demo/SpeedDialDemo.css': { @@ -528,33 +527,35 @@ const SpeedDialDemo = () => { } ` } - } + }; return (When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the model property. - SpeedDial's position is calculated according to the container element with the position type style.
++ When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the model property. SpeedDial's position is calculated + according to the container element with the position type style. +
-SpeedDial uses the common MenuModel API to define the items, visit MenuModel API for details.
++ SpeedDial uses the common MenuModel API to define the items, visit MenuModel API for details. +
SpeedDial has 4 types; linear, circle, semi-circle and quarter-circle.
++ SpeedDial has 4 types; linear, circle, semi-circle and quarter-circle. +
Specifies the opening direction of actions. For the linear and semi-circle types; up, down, left and right. For the quarter-circle type; up-left, up-right, down-left and down-right.
++ Specifies the opening direction of actions. For the linear and semi-circle types; up, down, left and right. For the quarter-circle type;{' '} + up-left, up-right, down-left and down-right. +
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
@@ -770,7 +778,9 @@ export const SpeedDialDemo = () => {Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +
Key | -Function | -
---|---|
enter | -Toggles the visibility of the menu. | -
space | -Toggles the visibility of the menu. | -
down arrow | -Opens the menu and moves focus to the first item. | -
up arrow | -Opens the menu and moves focus to the last item. | -
Key | -Function | -
---|---|
enter | -Actives the menuitem, closes the menu and sets focus on the menu button. | -
escape | -Closes the menu and sets focus on the menu button. | -
arrow keys | -Navigates between the menu items. | -
home | -Moves focus to the first item. | -
end | -Moves focus to the last item. | -
Key | +Function | +
---|---|
+ enter + | +Toggles the visibility of the menu. | +
+ space + | +Toggles the visibility of the menu. | +
+ down arrow + | +Opens the menu and moves focus to the first item. | +
+ up arrow + | +Opens the menu and moves focus to the last item. | +
Key | +Function | +
---|---|
+ enter + | +Actives the menuitem, closes the menu and sets focus on the menu button. | +
+ escape + | +Closes the menu and sets focus on the menu button. | +
+ arrow keys + | +Navigates between the menu items. | +
+ home + | +Moves focus to the first item. | +
+ end + | +Moves focus to the last item. | +
None.
- { - useLiveEditorTabs({ name: 'SpeedDialDemo', sources: sources, extFiles: extFiles }) - } - + {useLiveEditorTabs({ name: 'SpeedDialDemo', sources: sources, extFiles: extFiles })} - ) -}) + ); +}); export default SpeedDialDoc; diff --git a/components/doc/splitbutton/index.js b/components/doc/splitbutton/index.js index 93e58bbb51..177c460fc8 100644 --- a/components/doc/splitbutton/index.js +++ b/components/doc/splitbutton/index.js @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; const SplitButtonDoc = memo(() => { - const sources = { - 'class': { + class: { tabName: 'Class Source', content: ` import React, { Component } from 'react'; @@ -133,7 +132,7 @@ export class SplitButtonDemo extends Component { } ` }, - 'hooks': { + hooks: { tabName: 'Hooks Source', content: ` import React, { useRef } from 'react'; @@ -250,7 +249,7 @@ const SplitButtonDemo = () => { } ` }, - 'ts': { + ts: { tabName: 'TS Source', content: ` import React, { useRef } from 'react'; @@ -367,7 +366,7 @@ const SplitButtonDemo = () => { } ` }, - 'browser': { + browser: { tabName: 'Browser Source', imports: ` @@ -488,31 +487,33 @@ const SplitButtonDemo = () => { } ` } - } + }; return (SplitButton has a default command button and a collection of additional options defined by the model property.
-+ SplitButton has a default command button and a collection of additional options defined by the model property. +
+SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details.
++ SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details. +
Different color options are available as severity levels.
@@ -572,8 +575,8 @@ export const SplitButtonDemo = () => {SplitButton can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.
-Following is the list of structural style classes, for theming classes visit theming page.
++ Following is the list of structural style classes, for theming classes visit theming page. +