-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
Menu.story.tsx
89 lines (78 loc) · 2.21 KB
/
Menu.story.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from 'react';
import { IconTable, IconSearch } from '@tabler/icons';
import { WithinOverlays } from '@mantine/storybook';
import { Menu } from './Menu';
import { Button } from '../Button';
import { Tooltip } from '../Tooltip';
import { Text } from '../Text';
export default { title: 'Menu' };
export function Usage() {
return (
<div style={{ padding: 40, display: 'flex', justifyContent: 'center' }}>
<Menu width={200} shadow="md">
<Menu.Target>
<Button>Toggle menu</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>Label 1</Menu.Label>
<Menu.Item component="a" href="https://google.com">
Link item
</Menu.Item>
<Menu.Item closeMenuOnClick={false}>Won't close on click</Menu.Item>
<Menu.Item disabled>Disabled</Menu.Item>
<Menu.Item
icon={<IconSearch size={14} />}
rightSection={
<Text size="xs" color="dimmed">
⌘K
</Text>
}
>
Search
</Menu.Item>
<Menu.Divider />
<Menu.Label>Label 2</Menu.Label>
<Menu.Item color="red" icon={<IconTable size={14} />}>
Red color
</Menu.Item>
<Menu.Item icon={<IconTable size={14} />}>Button item 3</Menu.Item>
</Menu.Dropdown>
</Menu>
</div>
);
}
export function _WithinOverlays() {
return (
<WithinOverlays>
<Usage />
</WithinOverlays>
);
}
export function MenuTargetWithTooltip() {
return (
<div style={{ padding: 40 }}>
<Menu>
<Tooltip label="Tooltip first">
<Menu.Target>
<Button>Tooltip first</Button>
</Menu.Target>
</Tooltip>
<Menu.Dropdown>
<Menu.Item>Item 1</Menu.Item>
<Menu.Item>Item 2</Menu.Item>
</Menu.Dropdown>
</Menu>
<Menu>
<Menu.Target>
<Tooltip label="Tooltip last">
<Button ml="xl">Tooltip last</Button>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>Item 1</Menu.Item>
<Menu.Item>Item 2</Menu.Item>
</Menu.Dropdown>
</Menu>
</div>
);
}