-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
Popover.demo.inline.tsx
51 lines (47 loc) · 1.92 KB
/
Popover.demo.inline.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
import React from 'react';
import { MantineDemo } from '@mantine/ds';
import { Popover, Mark, Text } from '@mantine/core';
const code = `
import { Popover, Mark, Text } from '@mantine/core';
function Demo() {
return (
<Text>
Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
<Popover middlewares={{ flip: true, shift: true, inline: true }} position="top">
<Popover.Target>
<Mark>When visiting a junkyard</Mark>
</Popover.Target>
<Popover.Dropdown>Inline dropdown</Popover.Dropdown>
</Popover>
, you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
feathers glow in seven colors depending on the angle at which they are struck by light. These
feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
of a rainbow.
</Text>
);
}
`;
function Demo() {
return (
<Text>
Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
<Popover middlewares={{ flip: true, shift: true, inline: true }} position="top">
<Popover.Target>
<Mark>When visiting a junkyard</Mark>
</Popover.Target>
<Popover.Dropdown>Inline dropdown</Popover.Dropdown>
</Popover>
, you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
feathers glow in seven colors depending on the angle at which they are struck by light. These
feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
of a rainbow.
</Text>
);
}
export const inline: MantineDemo = {
type: 'demo',
component: Demo,
code,
};