File tree Expand file tree Collapse file tree 1 file changed +72
-1
lines changed
Expand file tree Collapse file tree 1 file changed +72
-1
lines changed Original file line number Diff line number Diff line change 11# react-menu
22
3- [ wip] Accessible menu component built for React.JS
3+ An accessible menu component built for React.JS
4+
5+ ## Basic Usage
6+
7+ ``` html
8+ /** @jsx React.DOM */
9+
10+ var react = require('react');
11+
12+ var Menu = require('react-menu');
13+ var MenuTrigger = Menu.MenuTrigger;
14+ var MenuOptions = Menu.MenuOptions;
15+ var MenuOption = Menu.MenuOption;
16+
17+ var App = React.createClass({
18+
19+ render: function() {
20+ return (
21+ <Menu className =' myMenu' >
22+ <MenuTrigger >
23+ ⚙
24+ </MenuTrigger >
25+ <MenuOptions >
26+
27+ <MenuOption >
28+ 1st Option
29+ </MenuOption >
30+
31+ <MenuOption onSelect ={this.someHandler} >
32+ 2nd Option
33+ </MenuOption >
34+
35+ <div className =' a-non-interactive-menu-item' >
36+ non-selectable item
37+ </div >
38+
39+ <MenuOption disabled ={true} onDisabledSelect ={this.otherHanlder} >
40+ diabled option
41+ </MenuOption >
42+
43+ </MenuOptions >
44+ </Menu >
45+ );
46+ }
47+ });
48+
49+ React.renderComponent(<App />, document.body);
50+
51+ ```
52+
53+ For a working example see the ` examples/basic ` example
54+
55+ ## Styles
56+
57+ Bring in default styles by calling ` injectCSS ` on the ` Menu ` component.
58+
59+ ``` javascript
60+ var Menu = require (' react-menu' );
61+
62+ Menu .injectCSS ();
63+ ```
64+
65+ Default styles will be added to the top of the head, and thus any styles you write will override any of the defaults.
66+
67+ The following class names are used / available for modification in your own stylsheets:
68+
69+ ```
70+ .Menu
71+ .Menu__MenuTrigger
72+ .Menu__MenuOptions
73+ .Menu__MenuOption
74+ ```
You can’t perform that action at this time.
0 commit comments