◥
18 | {/if}
19 | 
5 |
6 |
7 | 
8 |
9 |
10 |
11 | 
12 |
13 |
14 |
15 | 
16 |
17 |
18 |
4 |
{error.message}
31 | 32 | {#if dev && error.stack} 33 |{error.stack}
34 | {/if}
35 |
36 |
42 |
--------------------------------------------------------------------------------
/www/src/routes/_layout.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 | 35 | ← Hover 36 |
37 | 38 |
39 | An arrow is just a symbol ◥. You can change the color of the arrow by setting the
40 | arrowColor
41 | property, and turn off arrow by setting false for the
42 | arrow
43 | property
44 |
Simply just click on the button
27 | 28 |26 | ← Basic 27 |
28 | 29 |
30 | In this example the popover is wrapped in
31 | a
32 | tag. Pass the
33 | preventDefault
34 | prop to disable default behavior
35 |
35 | ← preventDefault/stopPropagation 36 |
37 | 38 |Click, hover and touch events
39 | 40 |25 | ← Arrow 26 |
27 | 28 |
29 | on:open
30 | is dispatched/called when the content is mounted,
31 | on:close
32 | is dispatched/called after the content is unmounted from the dom
33 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
123 |
26 | {`npm i svelte-popover --save-dev`}
27 |
28 |
29 | The basic example
34 | 35 |
36 |
37 | {`
38 |
39 |
40 |
41 | Content
42 |
43 |
44 | `}
45 |
46 |
47 |
48 | 49 | See more examples 50 |
51 | You can also use nested popovers 52 |
53 |
54 | {`
55 |
56 |
57 |
58 | Content
59 |
60 |
61 |
62 | Content
63 |
64 |
65 |
66 |
67 | `}
68 |
69 |
70 | Use
71 | let:open
72 | directive. For example
73 |
74 |
75 | {`
76 |
77 |
78 |
79 | Content
80 |
81 |
82 | `}
83 |
84 |
85 |
86 | | Prop | 92 |Type | 93 |Description | 94 |Default | 95 |Required | 96 |
|---|---|---|---|---|
| let:open | 99 |Boolean | 100 |Returns the value of the visibility of a popover | 101 |... | 102 |✘ | 103 |
| arrow | 106 |Boolean | 107 |
108 | If
109 | false
110 | , the arrow is removed
111 | |
112 |
113 | true
114 | |
115 | ✘ | 116 |
| placement | 119 |String | 120 |
121 | The placement of the popover.
122 | top-start
123 | ,
124 | top-center
125 | ,
126 | top-end
127 | ,
128 | left-start
129 | ,
130 | left-center
131 | ,
132 | left-end
133 | ,
134 | right-start
135 | ,
136 | right-center
137 | ,
138 | right-end
139 | ,
140 | bottom-start
141 | ,
142 | bottom-center
143 | ,
144 | bottom-end
145 | |
146 |
147 | auto
148 | |
149 | ✘ | 150 |
| action | 153 |String | 154 |
155 | click
156 | |
157 | hover
158 | . Supports touch event
159 | |
160 |
161 | click
162 | |
163 | ✘ | 164 |
| on:open | 167 |Function | 168 |
169 | on:open
170 | is dispatched/called when the content is mounted
171 | |
172 | ... | 173 |✘ | 174 |
| on:close | 177 |Function | 178 |
179 | on:close
180 | is dispatched/called after the content is unmounted from the dom
181 | |
182 | ... | 183 |✘ | 184 |
| open | 187 |Boolean | 188 |
189 | Whether the popover is visible. Passing this prop puts the popover in controlled mode.To make the popover completely manageable, you must pass the
190 | null
191 | value to the
192 | action
193 | prop
194 | |
195 | false | 196 |✘ | 197 |
| zIndex | 201 |Number | 202 |Initial number for zIndex | 203 |
204 | 1000
205 | |
206 | ✘ | 207 |
| overlayColor | 210 |String | 211 |Set the background color of an overlay element | 212 |
213 | rgba(0,0,0,0.5)
214 | |
215 | ✘ | 216 |
| preventDefault | 219 |Boolean | 220 |221 | Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. 222 | more 223 | | 224 |
225 | false
226 | |
227 | ✘ | 228 |
| stopPropagation | 232 |Boolean | 233 |234 | Stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. 235 | more 236 | | 237 |
238 | false
239 | |
240 | ✘ | 241 |