List of UI components
- Actions
- AskModal
- Button
- Container
- Content
- Divider
- Form
- Header
- Icon
- Menu
- MenuLink
- Message
- Modal
- Modals
- Toasts
API
1// Menu component
2<Menu
3 // type -> Components map (described below)
4 components={{
5 menu: Menu,
6 link: Menu.Link
7 }}
8
9 // visually important - set to true only in main menu
10 topLevel={false}
11
12 // menu header icon
13 icon=""
14
15 // menu header link
16 link=""
17
18 // menu header text
19 text=""
20
21 // menu class (high priority)
22 class=""
23
24 // menu class (low priority)
25 className=""
26/>
27
28// Link component
29<Menu.Link
30 // link icon
31 icon=""
32
33 // link link
34 link=""
35
36 // link text
37 text=""
38
39 // link class (high priority)
40 class=""
41
42 // link class (low priority)
43 className=""
44/>
45
46// Menu builder class
47const MainMenu = new Menu.Builder(definition = {});
48
49// item is an JSON object
50// or an Builder instance
51MainMenu.add(item);
52
53// returns definition
54MainMenu.export();
55
56// overwrites current definition
57MainMenu.import(definition);
Example
1const AdminMenu = new Menu.Builder({
2 topLevel: true,
3 class: 'vertical borderless'
4});
5
6const GamesMenu = new Menu.Builder({
7 icon: 'game',
8 text: 'Games',
9 link: '#admin-games'
10});
11
12GamesMenu.add({
13 type: 'link',
14 text: 'Add game',
15 icon: 'plus',
16 link: '#admin-games-add'
17});
18
19GamesMenu.add({
20 type: 'link',
21 text: 'Find game',
22 icon: 'search',
23 link: '#admin-games-find'
24});
25
26const UsersMenu = new Menu.Builder({
27 icon: 'users',
28 text: 'Users',
29 link: '#admin-users'
30});
31
32UsersMenu.add({
33 type: 'link',
34 text: 'Add user',
35 icon: 'plus',
36 link: '#admin-users-add'
37});
38
39UsersMenu.add({
40 type: 'link',
41 text: 'Find user',
42 icon: 'search',
43 link: '#admin-users-find'
44});
45
46AdminMenu.add(GamesMenu);
47AdminMenu.add(UsersMenu);
48
49// AdminMenu.export() === {
50// topLevel: true,
51// class: 'vertical borderless',
52// items: [
53// {
54// type: 'menu',
55// text: 'Games',
56// link: '#admin-games',
57// icon: 'game',
58// items: [
59// {
60// type: 'link',
61// text: 'Add game',
62// icon: 'plus',
63// link: '#admin-games-add'
64// },
65// {
66// type: 'link',
67// text: 'Find game',
68// icon: 'search',
69// link: '#admin-games-find'
70// }
71// ]
72// },
73// {
74// type: 'menu',
75// text: 'Users',
76// link: '#admin-users',
77// icon: 'users',
78// items: [
79// {
80// type: 'link',
81// text: 'Add user',
82// icon: 'plus',
83// link: '#admin-users-add'
84// },
85// {
86// type: 'link',
87// text: 'Find user',
88// icon: 'search',
89// link: '#admin-users-find'
90// }
91// ]
92// }
93// ]
94// }
95
96// Later...
97<Menu {...AdminMenu.export()}/>