-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
Popover.demo.arrow.tsx
39 lines (35 loc) · 992 Bytes
/
Popover.demo.arrow.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
import React from 'react';
import { MantineDemo } from '@mantine/ds';
import { Popover, Text, Button } from '@mantine/core';
const code = `
import { Popover, Text, Button } from '@mantine/core';
function Demo() {
return (
<Popover width={700} position="bottom" withArrow shadow="md">
<Popover.Target>
<Button>arrow popover</Button>
</Popover.Target>
<Popover.Dropdown>
<Text size="sm">This is to test popover arrow, the arrow will be the center postion.</Text>
</Popover.Dropdown>
</Popover>
);
}
`;
function Demo() {
return (
<Popover width={700} position="bottom" withArrow shadow="md">
<Popover.Target>
<Button>arrow popover</Button>
</Popover.Target>
<Popover.Dropdown>
<Text size="sm">This is to test popover arrow, the arrow will be the center postion.</Text>
</Popover.Dropdown>
</Popover>
);
}
export const arrow: MantineDemo = {
type: 'demo',
code,
component: Demo,
};