-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5977 from nitrogenous/meter-group
New MeterGroup Component
- Loading branch information
Showing
68 changed files
with
15,712 additions
and
3,488 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 |
|---|---|---|
|
|
@@ -25,6 +25,7 @@ tsconfig.tsbuildinfo | |
| # misc | ||
| .DS_Store | ||
| *.pem | ||
| *.code-workspace | ||
|
|
||
| # debug | ||
| npm-debug.log* | ||
|
|
||
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
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,26 @@ | ||
| import { DevelopmentSection } from '@/components/doc/common/developmentsection'; | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import Link from 'next/link'; | ||
|
|
||
| export function AccessibilityDoc() { | ||
| const code = { | ||
| basic: ` | ||
| <span id="dd1">Options</span> | ||
| <MultiSelect aria-labelledby="dd1" /> | ||
| <MultiSelect aria-label="Options" /> | ||
| ` | ||
| }; | ||
|
|
||
| return ( | ||
| <DocSectionText id="accessibility" label="Accessibility"> | ||
| <h3>Screen Reader</h3> | ||
| <p> | ||
| MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop. | ||
| </p> | ||
| <h3>Keyboard Support</h3> | ||
| <p>Component does not include any interactive elements.</p> | ||
| </DocSectionText> | ||
| ); | ||
| } |
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,55 @@ | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; | ||
|
|
||
| export function BasicDoc(props) { | ||
| const code = { | ||
| basic: ` | ||
| <MeterGroup values={values} /> | ||
| `, | ||
| javascript: ` | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { MeterGroup } from 'primereact/metergroup'; | ||
| export default function BasicDemo() { | ||
| const values = [{ label: 'Space used', value: 15 }]; | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <MeterGroup values={values} /> | ||
| </div> | ||
| ) | ||
| } | ||
| `, | ||
| typescript: ` | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { MeterGroup } from 'primereact/metergroup'; | ||
| export default function BasicDemo() { | ||
| const values = [{ label: 'Space used', value: 15 }]; | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <MeterGroup values={values} /> | ||
| </div> | ||
| ) | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| const values = [{ label: 'Space used', value: 15 }]; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props}> | ||
| <p> | ||
| MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>. | ||
| </p> | ||
| </DocSectionText> | ||
| <div className="card"> | ||
| <MeterGroup values={values} /> | ||
| </div> | ||
| <DocSectionCode code={code} /> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.