Skip to content

Commit

Permalink
Add new Docs: AccordionDemo
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed Nov 10, 2022
1 parent 18dfd64 commit a5f2463
Show file tree
Hide file tree
Showing 8 changed files with 860 additions and 1,068 deletions.
303 changes: 303 additions & 0 deletions components/doc/accordion/apidoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
import Link from 'next/link';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
import { DocSectionText } from '../common/docsectiontext';

export function ApiDoc(props) {
return (
<>
<DocSectionText {...props}></DocSectionText>
<h3>Properties</h3>
<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>header</td>
<td>string</td>
<td>null</td>
<td>Orientation of tab headers.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>Whether the tab is disabled.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the tab header and content.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab header and content.</td>
</tr>
<tr>
<td>headerStyle</td>
<td>object</td>
<td>null</td>
<td>Inline style of the tab header.</td>
</tr>
<tr>
<td>headerClassName</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab header.</td>
</tr>
<tr>
<td>headerTemplate</td>
<td>any</td>
<td>null</td>
<td>Template of the tab header.</td>
</tr>
<tr>
<td>contentStyle</td>
<td>object</td>
<td>null</td>
<td>Inline style of the tab content.</td>
</tr>
<tr>
<td>contentClassName</td>
<td>string</td>
<td>null</td>
<td>Style class of the tab content.</td>
</tr>
<tr>
<td>tabIndex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
</tbody>
</table>
</div>

<h3>Properties</h3>
<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>activeIndex</td>
<td>any</td>
<td>null</td>
<td>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.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the element.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
<td>null</td>
<td>Inline style of the element.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, multiple tabs can be activated at the same time.</td>
</tr>
<tr>
<td>expandIcon</td>
<td>string</td>
<td>pi pi-chevron-right</td>
<td>Icon of a collapsed tab.</td>
</tr>
<tr>
<td>collapseIcon</td>
<td>string</td>
<td>pi pi-chevron-down</td>
<td>Icon of an expanded tab.</td>
</tr>
<tr>
<td>transitionOptions</td>
<td>object</td>
<td>null</td>
<td>
The properties of{' '}
<a href="https://reactcommunity.org/react-transition-group/css-transition" rel="noopener noreferrer" target="_blank">
CSSTransition
</a>{' '}
can be customized, except for "nodeRef" and "in" properties.
</td>
</tr>
</tbody>
</table>
</div>

<h3>Events</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onTabOpen</td>
<td>
event.originalEvent: browser event <br />
event.index: Index or indexes of the tab (number or array of numbers).
</td>
<td>Callback to invoke when a tab gets expanded.</td>
</tr>
<tr>
<td>onTabClose</td>
<td>
event.originalEvent: browser event <br />
event.index: Index of the tab
</td>
<td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
</tr>
<tr>
<td>onTabChange</td>
<td>
event.originalEvent: browser event <br />
event.index: Index of the tab
</td>
<td>Callback to invoke when state of the accordion changes.</td>
</tr>
</tbody>
</table>
</div>

<h3>Styling</h3>
<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-accordion</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-accordion-header</td>
<td>Header of a tab.</td>
</tr>
<tr>
<td>p-accordion-content</td>
<td>Container of a tab.</td>
</tr>
</tbody>
</table>
</div>

<h3>Accessibility</h3>
<DevelopmentSection>
<h4>Screen Reader</h4>
<p>
Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerProps</i> property.
</p>
<p>
The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.
</p>

<h4>Header 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>Moves focus to the next the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>shift</i> + <i>tab</i>
</td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the visibility of the content.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next header.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h3>Dependencies</h3>
<ul>
<li>react-transition-group</li>
</ul>
</>
);
}
Loading

0 comments on commit a5f2463

Please sign in to comment.