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.
Merge remote-tracking branch 'upstream/master' into structure-enhance…
…ments
- Loading branch information
Showing
70 changed files
with
4,164 additions
and
47 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
Large diffs are not rendered by default.
Oops, something went wrong.
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
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} /> | ||
| </> | ||
| ); | ||
| } |
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,68 @@ | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; | ||
|
|
||
| export function IconDoc(props) { | ||
| const code = { | ||
| basic: ` | ||
| <MeterGroup values={values} /> | ||
| `, | ||
| javascript: ` | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { MeterGroup } from 'primereact/metergroup'; | ||
| export default function IconDemo() { | ||
| const values = [ | ||
| { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, | ||
| { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, | ||
| { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, | ||
| { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } | ||
| ]; | ||
| 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 IconDemo() { | ||
| const values = [ | ||
| { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, | ||
| { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, | ||
| { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, | ||
| { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } | ||
| ]; | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <MeterGroup values={values} /> | ||
| </div> | ||
| ) | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| const values = [ | ||
| { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, | ||
| { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, | ||
| { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, | ||
| { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props}> | ||
| <p>Icons can be displayed next to the labels instead of the default marker.</p> | ||
| </DocSectionText> | ||
| <div className="card"> | ||
| <MeterGroup values={values} /> | ||
| </div> | ||
| <DocSectionCode code={code} /> | ||
| </> | ||
| ); | ||
| } |
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,17 @@ | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
|
|
||
| export function ImportDoc(props) { | ||
| const code = { | ||
| basic: ` | ||
| import { MeterGroup } from 'primereact/metergroup'; | ||
| ` | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props}></DocSectionText> | ||
| <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz /> | ||
| </> | ||
| ); | ||
| } |
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,71 @@ | ||
| import { DocSectionCode } from '@/components/doc/common/docsectioncode'; | ||
| import { DocSectionText } from '@/components/doc/common/docsectiontext'; | ||
| import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; | ||
|
|
||
| export function LabelDoc(props) { | ||
| const code = { | ||
| basic: ` | ||
| <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" /> | ||
| `, | ||
| javascript: ` | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { MeterGroup } from 'primereact/metergroup'; | ||
| export default function LabelDemo() { | ||
| const values = [ | ||
| { label: 'Apps', color: '#34d399', value: 16 }, | ||
| { label: 'Messages', color: '#fbbf24', value: 8 }, | ||
| { label: 'Media', color: '#60a5fa', value: 24 }, | ||
| { label: 'System', color: '#c084fc', value: 10 } | ||
| ]; | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" /> | ||
| </div> | ||
| ) | ||
| } | ||
| `, | ||
| typescript: ` | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { MeterGroup } from 'primereact/metergroup'; | ||
| export default function LabelDemo() { | ||
| const values = [ | ||
| { label: 'Apps', color: '#34d399', value: 16 }, | ||
| { label: 'Messages', color: '#fbbf24', value: 8 }, | ||
| { label: 'Media', color: '#60a5fa', value: 24 }, | ||
| { label: 'System', color: '#c084fc', value: 10 } | ||
| ]; | ||
| return ( | ||
| <div className="card flex justify-content-center"> | ||
| <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" /> | ||
| </div> | ||
| ) | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| const values = [ | ||
| { label: 'Apps', color: '#34d399', value: 16 }, | ||
| { label: 'Messages', color: '#fbbf24', value: 8 }, | ||
| { label: 'Media', color: '#60a5fa', value: 24 }, | ||
| { label: 'System', color: '#c084fc', value: 10 } | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <DocSectionText {...props}> | ||
| <p> | ||
| The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the{' '} | ||
| <i>labelOrientation</i> option. | ||
| </p> | ||
| </DocSectionText> | ||
| <div className="card"> | ||
| <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" /> | ||
| </div> | ||
| <DocSectionCode code={code} /> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.