-
Notifications
You must be signed in to change notification settings - Fork 1
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
1 parent
a5f89fe
commit b425a4f
Showing
26 changed files
with
1,184 additions
and
534 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
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,61 @@ | ||
| import React from 'react'; | ||
| import DemoPageRenderer from '../../common/demo-page-renderer'; | ||
| import Widgets from './widgets'; | ||
|
|
||
| function menu() { | ||
| return ( | ||
| <DemoPageRenderer | ||
| tabTitles={['Examples', 'Properties', 'Stackblitz']} | ||
| stackBlitzCodes={['react-ts-gxoodzp']} | ||
| title="Menu Bar" | ||
| description={`A menu bar is a graphical control element which contains drop-down menus. | ||
| The menu bar's purpose is to supply a common housing for window- or | ||
| application-specific menus which provide access to such functions as opening files, interacting with an application, or displaying help documentation or manuals`} | ||
| sourceId="menu/menu.tsx" | ||
| editId="menu" | ||
| callbacks={[ | ||
| { | ||
| default: '', | ||
| description: 'Callback function for when a menu item is selected', | ||
| name: 'onSelect', | ||
| optional: 'Yes', | ||
| type: 'function', | ||
| }, | ||
| ]} | ||
| properties={[ | ||
| { | ||
| default: 'false', | ||
| description: | ||
| 'Set to true to render the menu bar in a right-to-left direction', | ||
| name: 'RTL', | ||
| optional: 'Yes', | ||
| type: 'boolean', | ||
| }, | ||
| { | ||
| description: | ||
| 'Set to true to disable the unique id generation for menu items', | ||
| name: 'noUniqueId', | ||
| optional: 'Yes', | ||
| type: 'boolean', | ||
| }, | ||
| { | ||
| default: '[]', | ||
| description: 'The menu items to render', | ||
| name: 'items', | ||
| optional: 'No', | ||
| type: 'Array<MenuItem>', | ||
| }, | ||
| { | ||
| default: 'True', | ||
| description: 'Set to true to make the menu bar focusable', | ||
| name: 'focusable', | ||
| optional: 'Yes', | ||
| type: 'boolean', | ||
| }, | ||
| ]} | ||
| demoWidget={<Widgets />} | ||
| ></DemoPageRenderer> | ||
| ); | ||
| } | ||
|
|
||
| export default menu; |
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,103 @@ | ||
| import { faHackerNews } from '@fortawesome/free-brands-svg-icons'; | ||
| import { faFile, faSearch, faWrench } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import React from 'react'; | ||
| import { BlockQuote, MenuBar, Section } from '../../../lib/components'; | ||
| import { DemoWidget } from '../../common/demo-widget'; | ||
|
|
||
| const icons = [ | ||
| <FontAwesomeIcon icon={faFile} key="1" />, | ||
| <FontAwesomeIcon icon={faSearch} key="2" />, | ||
| <FontAwesomeIcon icon={faWrench} key="3" />, | ||
| <FontAwesomeIcon icon={faHackerNews} key="9" />, | ||
| ]; | ||
|
|
||
| const items = [ | ||
| { | ||
| items: [ | ||
| { | ||
| name: 'Open', | ||
| }, | ||
| { | ||
| name: 'Save As', | ||
| }, | ||
| { | ||
| name: 'Save', | ||
| }, | ||
| { | ||
| name: 'Close', | ||
| }, | ||
| ], | ||
| name: 'File', | ||
| }, | ||
| { | ||
| items: [ | ||
| { | ||
| name: 'Cut', | ||
| }, | ||
| { | ||
| name: 'Copy', | ||
| }, | ||
| { | ||
| name: 'Paste', | ||
| }, | ||
| { | ||
| name: 'Select All', | ||
| }, | ||
| ], | ||
| name: 'Edit', | ||
| }, | ||
| { | ||
| items: [ | ||
| { | ||
| name: 'About', | ||
| }, | ||
| { | ||
| name: 'Version', | ||
| }, | ||
| ], | ||
| name: 'Help', | ||
| }, | ||
| ]; | ||
|
|
||
| function Widgets() { | ||
| return ( | ||
| <div className="rc-demo-widgets"> | ||
| <Section title="Default Render" size="md"> | ||
| <DemoWidget width={400} style={{ marginLeft: '2rem' }}> | ||
| <MenuBar items={items} /> | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section title="RTL" size="md"> | ||
| <BlockQuote> | ||
| Use the <code>RTL</code> prop for right to left alignment | ||
| </BlockQuote> | ||
| <DemoWidget width={400} style={{ marginLeft: '2rem' }}> | ||
| <MenuBar items={items} RTL /> | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section title="Icons" size="md"> | ||
| <BlockQuote> | ||
| The <code>icons</code> prop can be used to add a custom icon for each | ||
| top level menu bar item | ||
| </BlockQuote> | ||
| <DemoWidget width={400} style={{ marginLeft: '2rem' }}> | ||
| <MenuBar items={items} icons={icons} /> | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section title="Custom Sizes" size="md"> | ||
| <BlockQuote> | ||
| With the <code>size</code> prop customize the size of the menu bar. | ||
| </BlockQuote> | ||
| <DemoWidget width={400} style={{ marginLeft: '2rem' }}> | ||
| <MenuBar items={items} size="md" /> | ||
| </DemoWidget> | ||
| <DemoWidget width={400} style={{ marginLeft: '2rem' }}> | ||
| <MenuBar items={items} size="lg" /> | ||
| </DemoWidget> | ||
| </Section> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Widgets; |
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
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
Oops, something went wrong.
b425a4fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: