forked from primefaces/primereact
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
1,422 additions
and
1,082 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| import Link from 'next/link'; | ||
| import { DevelopmentSection } from '../common/developmentsection'; | ||
| import { DocSectionText } from '../common/docsectiontext'; | ||
| import { DocSubSection } from '../common/docsubsection'; | ||
|
|
||
| export function ApiDoc(props) { | ||
| return ( | ||
| <> | ||
| <DocSectionText {...props}></DocSectionText> | ||
| <DocSubSection id="properties" label="Properties"> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Type</th> | ||
| <th>Default</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>id</td> | ||
| <td>string</td> | ||
| <td>null</td> | ||
| <td>Unique identifier of the element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>model</td> | ||
| <td>array</td> | ||
| <td>null</td> | ||
| <td>An array of menuitems.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>style</td> | ||
| <td>string</td> | ||
| <td>null</td> | ||
| <td>Inline style of the component.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>className</td> | ||
| <td>string</td> | ||
| <td>null</td> | ||
| <td>Style class of the component.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>orientation</td> | ||
| <td>string</td> | ||
| <td>horizontal</td> | ||
| <td>Defines the orientation, valid values are horizontal and vertical.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>start</td> | ||
| <td>any</td> | ||
| <td>null</td> | ||
| <td>The template of starting element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>end</td> | ||
| <td>any</td> | ||
| <td>null</td> | ||
| <td>The template of trailing element</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSubSection> | ||
|
|
||
| <DocSubSection id="styling" label="Styling"> | ||
| <p> | ||
| Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page. | ||
| </p> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Element</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>p-megamenu</td> | ||
| <td>Container element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>p-megamenu-root-list</td> | ||
| <td>List element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>p-menuitem</td> | ||
| <td>Menuitem element.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>p-menuitem-text</td> | ||
| <td>Label of a menuitem.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>p-menuitem-icon</td> | ||
| <td>Icon of a menuitem.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>p-submenu-icon</td> | ||
| <td>Arrow icon of a submenu.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DocSubSection> | ||
|
|
||
| <DocSubSection id="accessibility" label="Accessibility"> | ||
| <DevelopmentSection> | ||
| <h4>Screen Reader</h4> | ||
| <p> | ||
| MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a{' '} | ||
| <i>presentation</i> role whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MegaMenu uses | ||
| the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i>{' '} | ||
| to define the relation between the item and the submenu. | ||
| </p> | ||
|
|
||
| <h4>Keyboard Support</h4> | ||
| <div className="doc-tablewrapper"> | ||
| <table className="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Function</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <i>tab</i> | ||
| </td> | ||
| <td>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.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>shift</i> + <i>tab</i> | ||
| </td> | ||
| <td>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.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>enter</i> | ||
| </td> | ||
| <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>space</i> | ||
| </td> | ||
| <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>escape</i> | ||
| </td> | ||
| <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>down arrow</i> | ||
| </td> | ||
| <td>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.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>up arrow</i> | ||
| </td> | ||
| <td>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.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>right arrow</i> | ||
| </td> | ||
| <td>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.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>left arrow</i> | ||
| </td> | ||
| <td>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.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>home</i> | ||
| </td> | ||
| <td>Moves focus to the first menuitem within the submenu.</td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <i>end</i> | ||
| </td> | ||
| <td>Moves focus to the last menuitem within the submenu.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </DevelopmentSection> | ||
| </DocSubSection> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.