universe:ui

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()}/>