Skip to content

Commit 3cb820d

Browse files
igalklebanovgioboa
igalklebanov
and
gioboa
committed
docs(popover): document the new headless popover component
Co-authored-by: Giorgio Boa <[email protected]>
1 parent dd06273 commit 3cb820d

File tree

5 files changed

+142
-67
lines changed

5 files changed

+142
-67
lines changed

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
4141
headless: {
4242
Accordion: 'Planned',
4343
Carousel: 'Planned',
44+
Popover: 'Planned',
4445
Select: 'Draft',
4546
Tabs: 'Planned',
4647
Toggle: 'Planned',

‎apps/website/src/routes/docs/headless/(components)/popover/examples.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Slot, component$ } from '@builder.io/qwik';
2+
import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
3+
import { GitHubIcon } from 'apps/website/src/components/icons/GitHubIcon';
4+
import { PreviewCodeExample } from 'apps/website/src/components/preview-code-example/preview-code-example';
5+
6+
export const MainExample = component$(() => {
7+
return (
8+
<PreviewCodeExample>
9+
<div q:slot="actualComponent">
10+
<Popover>
11+
<PopoverContent>
12+
<div class="p-4 bg-gray-500">Hi, I'm the content</div>
13+
</PopoverContent>
14+
<PopoverTrigger> Click on me </PopoverTrigger>
15+
</Popover>
16+
</div>
17+
<div q:slot="codeExample">
18+
<Slot />
19+
</div>
20+
</PreviewCodeExample>
21+
);
22+
});
23+
24+
export const Example1 = component$(() => {
25+
return (
26+
<PreviewCodeExample>
27+
<div q:slot="actualComponent">
28+
<Popover placement="top">
29+
<PopoverContent>
30+
<div class="p-4 bg-gray-500">
31+
Hi, I'm the content, but now on top
32+
</div>
33+
</PopoverContent>
34+
<PopoverTrigger> Click on me </PopoverTrigger>
35+
</Popover>
36+
</div>
37+
<div q:slot="codeExample">
38+
<Slot />
39+
</div>
40+
</PreviewCodeExample>
41+
);
42+
});

‎apps/website/src/routes/docs/headless/(components)/popover/index.mdx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Qwik UI | Popover
3+
---
4+
5+
import { Popover } from '@qwik-ui/headless';
6+
import { MainExample, Example1 } from './examples';
7+
import { CodeExample } from '../../../../../components/code-example/code-example';
8+
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
9+
import { APITable } from '../../../../../components/api-table/api-table';
10+
11+
# Popover
12+
13+
#### A popover is an element that displays a modal with content when the user clicks or hovers on a trigger element.
14+
15+
<MainExample>
16+
```tsx
17+
<Popover>
18+
<PopoverContent>
19+
<div class="p-4 bg-gray-500">Hi, I'm the content</div>
20+
</PopoverContent>
21+
<PopoverTrigger> Click on me </PopoverTrigger>
22+
</Popover>
23+
```
24+
</MainExample>
25+
26+
## Building blocks
27+
28+
<CodeExample>
29+
```tsx
30+
import { component$ } from '@builder.io/qwik';
31+
import { Popover } from '@qwik-ui/headless';
32+
33+
export default component$(() => (
34+
<Popover>
35+
<PopoverContent>
36+
<div class="p-4 bg-gray-500">Hi, I'm the content</div>
37+
</PopoverContent>
38+
<PopoverTrigger> Click on me </PopoverTrigger>
39+
</Popover>
40+
));
41+
```
42+
43+
</CodeExample>
44+
45+
## Examples
46+
47+
### EXAMPLE: Positioning the popover's content (on top)
48+
49+
<Example1>
50+
```tsx
51+
<Popover placement="top">
52+
<PopoverContent>
53+
<div class="p-4 bg-gray-500">Hi, I'm the content, but now on top</div>
54+
</PopoverContent>
55+
<PopoverTrigger> Click on me </PopoverTrigger>
56+
</Popover>
57+
```
58+
</Example1>
59+
60+
## API
61+
62+
### Popover
63+
64+
<APITable
65+
propDescriptors={[
66+
{
67+
name: 'placement',
68+
type: '"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"',
69+
description: 'The side where to show the popover.',
70+
},
71+
{
72+
name: 'triggerEvent',
73+
type: '"click" | "mouseOver"',
74+
description: 'Popover is opened when trigger is clicked or mouse overed.',
75+
},
76+
{
77+
name: 'offset',
78+
type: 'number',
79+
description: 'Offset between trigger and content.',
80+
},
81+
{
82+
name: 'isOpen',
83+
type: 'boolean',
84+
description:
85+
'Open or close the popover when popover is controlled by the parent.',
86+
},
87+
{
88+
name: 'disableClickOutSide',
89+
type: 'boolean',
90+
description: 'When true the popover is not closed when click outside.',
91+
},
92+
{
93+
name: 'onUpdate$',
94+
type: 'PropFunction<(isOpen: boolean) => void>',
95+
description: 'Notify a state update to the parent.',
96+
},
97+
]}
98+
/>

‎apps/website/src/routes/docs/headless/(components)/popover/index.tsx

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎apps/website/src/routes/docs/headless/menu.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
- [Accordion](/docs/headless/accordion)
1212
- [Carousel](/docs/headless/carousel)
13+
- [Popover](/docs/headless/popover)
1314
- [Select](/docs/headless/select)
1415
- [Tabs](/docs/headless/tabs)
1516
- [Toggle](/docs/headless/toggle)

0 commit comments

Comments
 (0)