File tree Expand file tree Collapse file tree 1 file changed +12
-25
lines changed
apps/website/src/routes/docs/headless/popover/examples Expand file tree Collapse file tree 1 file changed +12
-25
lines changed Original file line number Diff line number Diff line change 1
1
import { component$ } from '@builder.io/qwik' ;
2
2
import { Popover , PopoverTrigger } from '@qwik-ui/headless' ;
3
-
4
3
export default component$ ( ( ) => {
5
- const myPopovers = [
6
- { id : 'manual-1' , content : 'Popover 1' } ,
7
- { id : 'manual-2' , content : 'Popover 2' } ,
8
- ] ;
9
-
10
4
return (
11
5
< >
12
- { myPopovers . map ( ( popover , index ) => (
13
- < >
14
- < PopoverTrigger
15
- popovertarget = { popover . id }
16
- class = "mb-4 rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 text-white"
17
- >
18
- Popover Trigger { index + 1 }
19
- </ PopoverTrigger >
20
-
21
- < Popover
22
- manual
23
- id = { popover . id }
24
- class = "py- rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 shadow-md"
25
- style = { { top : `${ index * 20 } px` } }
26
- >
27
- { popover . content }
28
- </ Popover >
29
- </ >
30
- ) ) }
6
+ < PopoverTrigger popovertarget = "manual-1" class = "popover-trigger" >
7
+ Popover Trigger 1
8
+ </ PopoverTrigger >
9
+ < Popover manual id = "manual-1" class = "popover" >
10
+ Popover 1
11
+ </ Popover >
12
+ < PopoverTrigger popovertarget = "manual-2" class = "popover-trigger" >
13
+ Popover Trigger 2
14
+ </ PopoverTrigger >
15
+ < Popover manual id = "manual-2" class = "popover" style = { { top : '100px' } } >
16
+ Popover 2
17
+ </ Popover >
31
18
</ >
32
19
) ;
33
20
} ) ;
You can’t perform that action at this time.
0 commit comments