@rogieking/figui3 2.12.0 → 2.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -10
- package/components.css +1 -1
- package/fig.js +38 -15
- package/index.html +3539 -0
- package/package.json +2 -1
package/index.html
ADDED
|
@@ -0,0 +1,3539 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title>Figma UI3 Web Components</title>
|
|
9
|
+
<link rel="stylesheet"
|
|
10
|
+
type="text/css"
|
|
11
|
+
href="fig.css">
|
|
12
|
+
<script src="fig.js"></script>
|
|
13
|
+
<style>
|
|
14
|
+
* {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body {
|
|
19
|
+
margin: 0;
|
|
20
|
+
min-height: 100vh;
|
|
21
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
22
|
+
overflow-x: hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
nav {
|
|
26
|
+
position: fixed;
|
|
27
|
+
width: 180px;
|
|
28
|
+
height: 100vh;
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
background: var(--figma-color-bg-secondary);
|
|
31
|
+
border-right: 1px solid var(--figma-color-border);
|
|
32
|
+
padding: 16px 0 0 0;
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
nav .nav-links {
|
|
38
|
+
flex: 1;
|
|
39
|
+
overflow-y: auto;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
nav .theme-switch {
|
|
43
|
+
padding: 12px 16px;
|
|
44
|
+
border-top: 1px solid var(--figma-color-border);
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: 8px;
|
|
48
|
+
font-size: 13px;
|
|
49
|
+
color: var(--figma-color-text-secondary);
|
|
50
|
+
|
|
51
|
+
&:has([checked="true"]) {
|
|
52
|
+
#theme-dark-btn {
|
|
53
|
+
color: var(--figma-color-icon-selected);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#theme-light-btn {
|
|
57
|
+
color: var(--figma-color-icon-secondary);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:not(:has([checked="true"])) {
|
|
62
|
+
#theme-light-btn {
|
|
63
|
+
color: var(--figma-color-icon-selected);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
#theme-dark-btn {
|
|
67
|
+
color: var(--figma-color-icon-secondary);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
nav .theme-switch fig-button {
|
|
73
|
+
flex-shrink: 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
nav .nav-links h1 {
|
|
77
|
+
font-size: 11px;
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
text-transform: uppercase;
|
|
80
|
+
letter-spacing: 0.05em;
|
|
81
|
+
color: var(--figma-color-text-secondary);
|
|
82
|
+
padding: 8px 20px;
|
|
83
|
+
margin: 0 0 8px 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
nav .nav-links a {
|
|
87
|
+
display: block;
|
|
88
|
+
padding: 6px 12px;
|
|
89
|
+
margin: 0 8px;
|
|
90
|
+
color: var(--figma-color-text-secondary);
|
|
91
|
+
text-decoration: none;
|
|
92
|
+
font-size: 13px;
|
|
93
|
+
border-radius: var(--radius-medium);
|
|
94
|
+
transition: background 0.15s, color 0.15s;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
nav .nav-links a:hover {
|
|
98
|
+
color: var(--figma-color-text);
|
|
99
|
+
background: var(--figma-color-bg-hover);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
nav .nav-links a.active {
|
|
103
|
+
color: var(--figma-color-text-brand);
|
|
104
|
+
background: var(--figma-color-bg-selected);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
main {
|
|
108
|
+
margin-left: 180px;
|
|
109
|
+
padding: 24px 32px;
|
|
110
|
+
overflow-y: auto;
|
|
111
|
+
max-width: 800px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
section {
|
|
115
|
+
scroll-margin-top: 24px;
|
|
116
|
+
padding-bottom: 32px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
main>hr {
|
|
120
|
+
border: none;
|
|
121
|
+
border-top: 1px solid var(--figma-color-border);
|
|
122
|
+
margin: 0 0 32px 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
section h2 {
|
|
126
|
+
font-size: 18px;
|
|
127
|
+
font-weight: 600;
|
|
128
|
+
color: var(--figma-color-text);
|
|
129
|
+
margin: 0 0 8px 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
section>p.description {
|
|
133
|
+
font-size: 13px;
|
|
134
|
+
color: var(--figma-color-text-secondary);
|
|
135
|
+
margin: 0 0 24px 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
hstack {
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-wrap: wrap;
|
|
141
|
+
gap: 8px;
|
|
142
|
+
align-items: center;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
vstack {
|
|
146
|
+
display: flex;
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
gap: 8px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
code {
|
|
152
|
+
font-family: "SF Mono", Monaco, Consolas, monospace;
|
|
153
|
+
font-size: 11px;
|
|
154
|
+
background: var(--figma-color-bg-secondary);
|
|
155
|
+
padding: 2px 6px;
|
|
156
|
+
border-radius: 4px;
|
|
157
|
+
color: var(--figma-color-text);
|
|
158
|
+
}
|
|
159
|
+
</style>
|
|
160
|
+
</head>
|
|
161
|
+
|
|
162
|
+
<body>
|
|
163
|
+
<nav>
|
|
164
|
+
<div class="nav-links">
|
|
165
|
+
<h1>Components</h1>
|
|
166
|
+
<a href="#avatar">Avatar</a>
|
|
167
|
+
<a href="#button">Button</a>
|
|
168
|
+
<a href="#checkbox">Checkbox</a>
|
|
169
|
+
<a href="#chit">Chit</a>
|
|
170
|
+
<a href="#combo-input">Combo Input</a>
|
|
171
|
+
<a href="#dialog">Dialog</a>
|
|
172
|
+
<a href="#dropdown">Dropdown</a>
|
|
173
|
+
<a href="#field">Field</a>
|
|
174
|
+
<a href="#fill-picker">Fill Picker</a>
|
|
175
|
+
<a href="#header">Header</a>
|
|
176
|
+
<a href="#image">Image</a>
|
|
177
|
+
<a href="#input-angle">Input Angle</a>
|
|
178
|
+
<a href="#input-color">Input Color</a>
|
|
179
|
+
<a href="#input-fill">Input Fill</a>
|
|
180
|
+
<a href="#input-joystick">Input Joystick</a>
|
|
181
|
+
<a href="#input-number">Input Number</a>
|
|
182
|
+
<a href="#input-text">Input Text</a>
|
|
183
|
+
<a href="#layer">Layer</a>
|
|
184
|
+
<a href="#popover">Popover</a>
|
|
185
|
+
<a href="#radio">Radio</a>
|
|
186
|
+
<a href="#segmented-control">Segmented Control</a>
|
|
187
|
+
<a href="#shimmer">Shimmer</a>
|
|
188
|
+
<a href="#slider">Slider</a>
|
|
189
|
+
<a href="#spinner">Spinner</a>
|
|
190
|
+
<a href="#switch">Switch</a>
|
|
191
|
+
<a href="#tabs">Tabs</a>
|
|
192
|
+
<a href="#toast">Toast</a>
|
|
193
|
+
<a href="#tooltip">Tooltip</a>
|
|
194
|
+
<hr>
|
|
195
|
+
<h1>Basics</h1>
|
|
196
|
+
<a href="#icons">Icons</a>
|
|
197
|
+
<a href="#hstack">HStack</a>
|
|
198
|
+
<a href="#vstack">VStack</a>
|
|
199
|
+
<a href="#hr">HR</a>
|
|
200
|
+
<a href="#code">Code</a>
|
|
201
|
+
<a href="#details">Details</a>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="theme-switch">
|
|
204
|
+
<fig-button id="theme-light-btn"
|
|
205
|
+
variant="ghost"
|
|
206
|
+
icon>
|
|
207
|
+
<svg width="24"
|
|
208
|
+
height="24"
|
|
209
|
+
viewBox="0 0 24 24"
|
|
210
|
+
fill="none">
|
|
211
|
+
<path fill-rule="evenodd"
|
|
212
|
+
clip-rule="evenodd"
|
|
213
|
+
d="M12 5C12.2761 5 12.5 5.22386 12.5 5.5V6.5C12.5 6.77614 12.2761 7 12 7C11.7239 7 11.5 6.77614 11.5 6.5V5.5C11.5 5.22386 11.7239 5 12 5ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15ZM7.75687 7.05026C7.56161 6.85499 7.24503 6.85499 7.04977 7.05026C6.8545 7.24552 6.8545 7.5621 7.04977 7.75736L7.75687 8.46447C7.95214 8.65973 8.26872 8.65973 8.46398 8.46447C8.65924 8.26921 8.65924 7.95262 8.46398 7.75736L7.75687 7.05026ZM19 12C19 12.2761 18.7761 12.5 18.5 12.5H17.5C17.2239 12.5 17 12.2761 17 12C17 11.7239 17.2239 11.5 17.5 11.5H18.5C18.7761 11.5 19 11.7239 19 12ZM16.9502 7.75736C17.1455 7.5621 17.1455 7.24552 16.9502 7.05026C16.755 6.85499 16.4384 6.85499 16.2431 7.05026L15.536 7.75736C15.3408 7.95262 15.3408 8.26921 15.536 8.46447C15.7313 8.65973 16.0479 8.65973 16.2431 8.46447L16.9502 7.75736ZM12 17C12.2761 17 12.5 17.2239 12.5 17.5V18.5C12.5 18.7761 12.2761 19 12 19C11.7239 19 11.5 18.7761 11.5 18.5V17.5C11.5 17.2239 11.7239 17 12 17ZM16.2422 15.5356C16.047 15.3403 15.7304 15.3403 15.5351 15.5356C15.3399 15.7309 15.3399 16.0475 15.5351 16.2427L16.2422 16.9498C16.4375 17.1451 16.7541 17.1451 16.9493 16.9498C17.1446 16.7546 17.1446 16.438 16.9493 16.2427L16.2422 15.5356ZM7 12C7 12.2761 6.77614 12.5 6.5 12.5H5.5C5.22386 12.5 5 12.2761 5 12C5 11.7239 5.22386 11.5 5.5 11.5H6.5C6.77614 11.5 7 11.7239 7 12ZM8.46488 16.2427C8.66014 16.0475 8.66014 15.7309 8.46488 15.5356C8.26962 15.3403 7.95304 15.3403 7.75777 15.5356L7.05067 16.2427C6.85541 16.438 6.85541 16.7546 7.05067 16.9498C7.24593 17.1451 7.56251 17.1451 7.75777 16.9498L8.46488 16.2427Z"
|
|
214
|
+
fill="currentColor" />
|
|
215
|
+
</svg>
|
|
216
|
+
</fig-button>
|
|
217
|
+
<fig-switch id="theme-toggle"></fig-switch>
|
|
218
|
+
<fig-button id="theme-dark-btn"
|
|
219
|
+
variant="ghost"
|
|
220
|
+
icon>
|
|
221
|
+
<svg width="24"
|
|
222
|
+
height="24"
|
|
223
|
+
viewBox="0 0 24 24"
|
|
224
|
+
fill="none">
|
|
225
|
+
<path fill-rule="evenodd"
|
|
226
|
+
clip-rule="evenodd"
|
|
227
|
+
d="M15 14.9999C15.3647 14.9999 15.7224 14.9672 16.0703 14.9045C15.1624 16.1743 13.677 16.9997 12 16.9997C9.23858 16.9997 7 14.7611 7 11.9997C7 10.3226 7.82546 8.8371 9.09542 7.92923C9.03267 8.27722 9 8.63509 9 8.99986C9 12.3136 11.6863 14.9999 15 14.9999ZM17.3039 14.8075C17.6193 14.2129 16.8933 13.678 16.2412 13.8446C15.8443 13.946 15.4285 13.9999 15 13.9999C12.2386 13.9999 10 11.7613 10 8.99986C10 8.57132 10.0539 8.15537 10.1553 7.75842C10.3219 7.10631 9.78711 6.38032 9.19252 6.6957C7.29348 7.70298 6 9.70029 6 11.9997C6 15.3134 8.68629 17.9997 12 17.9997C14.2993 17.9997 16.2965 16.7064 17.3039 14.8075ZM16 7.49993C16 7.22379 15.7761 6.99993 15.5 6.99993C15.2239 6.99993 15 7.22379 15 7.49993V7.99993H14.5C14.2239 7.99993 14 8.22379 14 8.49993C14 8.77607 14.2239 8.99993 14.5 8.99993H15V9.49993C15 9.77607 15.2239 9.99993 15.5 9.99993C15.7761 9.99993 16 9.77607 16 9.49993V8.99993H16.5C16.7761 8.99993 17 8.77607 17 8.49993C17 8.22379 16.7761 7.99993 16.5 7.99993H16V7.49993Z"
|
|
228
|
+
fill="currentColor" />
|
|
229
|
+
</svg>
|
|
230
|
+
</fig-button>
|
|
231
|
+
</div>
|
|
232
|
+
</nav>
|
|
233
|
+
|
|
234
|
+
<main>
|
|
235
|
+
<!-- Avatar -->
|
|
236
|
+
<section id="avatar">
|
|
237
|
+
<h2>Avatar</h2>
|
|
238
|
+
<p class="description">Displays a user's profile image or initials.</p>
|
|
239
|
+
|
|
240
|
+
<h3>Sizes</h3>
|
|
241
|
+
<fig-field direction="horizontal">
|
|
242
|
+
<label>Default</label>
|
|
243
|
+
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
244
|
+
name="John Doe"></fig-avatar>
|
|
245
|
+
</fig-field>
|
|
246
|
+
<fig-field direction="horizontal">
|
|
247
|
+
<label>Large</label>
|
|
248
|
+
<fig-avatar size="large"
|
|
249
|
+
src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
250
|
+
name="John Doe"></fig-avatar>
|
|
251
|
+
</fig-field>
|
|
252
|
+
|
|
253
|
+
<h3>Fallback (Initials)</h3>
|
|
254
|
+
<fig-field direction="horizontal">
|
|
255
|
+
<label>No image</label>
|
|
256
|
+
<fig-avatar name="John Doe"></fig-avatar>
|
|
257
|
+
</fig-field>
|
|
258
|
+
<fig-field direction="horizontal">
|
|
259
|
+
<label>No image (large)</label>
|
|
260
|
+
<fig-avatar size="large"
|
|
261
|
+
name="Jane Smith"></fig-avatar>
|
|
262
|
+
</fig-field>
|
|
263
|
+
</section>
|
|
264
|
+
<hr>
|
|
265
|
+
|
|
266
|
+
<!-- Button -->
|
|
267
|
+
<section id="button">
|
|
268
|
+
<h2>Button</h2>
|
|
269
|
+
<p class="description">A custom button element supporting variants, types, sizes, and states.</p>
|
|
270
|
+
|
|
271
|
+
<h3>Variants</h3>
|
|
272
|
+
<fig-field direction="horizontal">
|
|
273
|
+
<label>Primary (default)</label>
|
|
274
|
+
<fig-button>Primary</fig-button>
|
|
275
|
+
</fig-field>
|
|
276
|
+
<fig-field direction="horizontal">
|
|
277
|
+
<label>Secondary</label>
|
|
278
|
+
<fig-button variant="secondary">Secondary</fig-button>
|
|
279
|
+
</fig-field>
|
|
280
|
+
<fig-field direction="horizontal">
|
|
281
|
+
<label>Ghost</label>
|
|
282
|
+
<fig-button variant="ghost">Ghost</fig-button>
|
|
283
|
+
</fig-field>
|
|
284
|
+
<fig-field direction="horizontal">
|
|
285
|
+
<label>Link</label>
|
|
286
|
+
<fig-button variant="link">Link Button</fig-button>
|
|
287
|
+
</fig-field>
|
|
288
|
+
|
|
289
|
+
<h3>Sizes</h3>
|
|
290
|
+
<fig-field direction="horizontal">
|
|
291
|
+
<label>Default</label>
|
|
292
|
+
<fig-button>Default Size</fig-button>
|
|
293
|
+
</fig-field>
|
|
294
|
+
<fig-field direction="horizontal">
|
|
295
|
+
<label>Large</label>
|
|
296
|
+
<fig-button size="large">Large Size</fig-button>
|
|
297
|
+
</fig-field>
|
|
298
|
+
<fig-field direction="horizontal">
|
|
299
|
+
<label>Compact</label>
|
|
300
|
+
<fig-button size="compact">Compact</fig-button>
|
|
301
|
+
</fig-field>
|
|
302
|
+
|
|
303
|
+
<h3>States</h3>
|
|
304
|
+
<fig-field direction="horizontal">
|
|
305
|
+
<label>Disabled (primary)</label>
|
|
306
|
+
<fig-button disabled>Disabled</fig-button>
|
|
307
|
+
</fig-field>
|
|
308
|
+
<fig-field direction="horizontal">
|
|
309
|
+
<label>Disabled (secondary)</label>
|
|
310
|
+
<fig-button variant="secondary"
|
|
311
|
+
disabled>Disabled</fig-button>
|
|
312
|
+
</fig-field>
|
|
313
|
+
<fig-field direction="horizontal">
|
|
314
|
+
<label>Disabled (ghost)</label>
|
|
315
|
+
<fig-button variant="ghost"
|
|
316
|
+
disabled>Disabled</fig-button>
|
|
317
|
+
</fig-field>
|
|
318
|
+
<fig-field direction="horizontal">
|
|
319
|
+
<label>Disabled (link)</label>
|
|
320
|
+
<fig-button variant="link"
|
|
321
|
+
disabled>Disabled</fig-button>
|
|
322
|
+
</fig-field>
|
|
323
|
+
|
|
324
|
+
<h3>Icon Buttons</h3>
|
|
325
|
+
<fig-field direction="horizontal">
|
|
326
|
+
<label>Icon only</label>
|
|
327
|
+
<fig-button icon="true">
|
|
328
|
+
<svg width="16"
|
|
329
|
+
height="16"
|
|
330
|
+
viewBox="0 0 16 16"
|
|
331
|
+
fill="none"
|
|
332
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
333
|
+
<path fill-rule="evenodd"
|
|
334
|
+
clip-rule="evenodd"
|
|
335
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
|
|
336
|
+
fill="currentColor" />
|
|
337
|
+
</svg>
|
|
338
|
+
</fig-button>
|
|
339
|
+
</fig-field>
|
|
340
|
+
<fig-field direction="horizontal">
|
|
341
|
+
<label>Icon (secondary)</label>
|
|
342
|
+
<fig-button variant="secondary"
|
|
343
|
+
icon="true">
|
|
344
|
+
<svg width="16"
|
|
345
|
+
height="16"
|
|
346
|
+
viewBox="0 0 16 16"
|
|
347
|
+
fill="none"
|
|
348
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
349
|
+
<path fill-rule="evenodd"
|
|
350
|
+
clip-rule="evenodd"
|
|
351
|
+
d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
|
|
352
|
+
fill="currentColor" />
|
|
353
|
+
</svg>
|
|
354
|
+
</fig-button>
|
|
355
|
+
</fig-field>
|
|
356
|
+
<fig-field direction="horizontal">
|
|
357
|
+
<label>Icon (ghost)</label>
|
|
358
|
+
<fig-button variant="ghost"
|
|
359
|
+
icon="true">
|
|
360
|
+
<svg width="16"
|
|
361
|
+
height="16"
|
|
362
|
+
viewBox="0 0 16 16"
|
|
363
|
+
fill="none"
|
|
364
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
365
|
+
<path fill-rule="evenodd"
|
|
366
|
+
clip-rule="evenodd"
|
|
367
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
|
|
368
|
+
fill="currentColor" />
|
|
369
|
+
</svg>
|
|
370
|
+
</fig-button>
|
|
371
|
+
</fig-field>
|
|
372
|
+
<fig-field direction="horizontal">
|
|
373
|
+
<label>Icon (link)</label>
|
|
374
|
+
<fig-button variant="link"
|
|
375
|
+
icon="true">
|
|
376
|
+
<svg width="16"
|
|
377
|
+
height="16"
|
|
378
|
+
viewBox="0 0 16 16"
|
|
379
|
+
fill="none"
|
|
380
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
381
|
+
<path fill-rule="evenodd"
|
|
382
|
+
clip-rule="evenodd"
|
|
383
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm7-3.5v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1z"
|
|
384
|
+
fill="currentColor" />
|
|
385
|
+
</svg>
|
|
386
|
+
</fig-button>
|
|
387
|
+
</fig-field>
|
|
388
|
+
<fig-field direction="horizontal">
|
|
389
|
+
<label>Icon disabled</label>
|
|
390
|
+
<fig-button variant="secondary"
|
|
391
|
+
icon="true"
|
|
392
|
+
disabled>
|
|
393
|
+
<svg width="16"
|
|
394
|
+
height="16"
|
|
395
|
+
viewBox="0 0 16 16"
|
|
396
|
+
fill="none"
|
|
397
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
398
|
+
<path fill-rule="evenodd"
|
|
399
|
+
clip-rule="evenodd"
|
|
400
|
+
d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
|
|
401
|
+
fill="currentColor" />
|
|
402
|
+
</svg>
|
|
403
|
+
</fig-button>
|
|
404
|
+
</fig-field>
|
|
405
|
+
|
|
406
|
+
<h3>Button Types</h3>
|
|
407
|
+
<fig-field direction="horizontal">
|
|
408
|
+
<label>Select (with dropdown)</label>
|
|
409
|
+
<fig-button type="select">
|
|
410
|
+
Select
|
|
411
|
+
<fig-dropdown>
|
|
412
|
+
<option>Option One</option>
|
|
413
|
+
<option>Option Two</option>
|
|
414
|
+
<option>Option Three</option>
|
|
415
|
+
</fig-dropdown>
|
|
416
|
+
</fig-button>
|
|
417
|
+
</fig-field>
|
|
418
|
+
<fig-field direction="horizontal">
|
|
419
|
+
<label>Toggle</label>
|
|
420
|
+
<fig-button variant="ghost"
|
|
421
|
+
type="toggle"
|
|
422
|
+
icon="true">
|
|
423
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
424
|
+
width="16"
|
|
425
|
+
height="16"
|
|
426
|
+
viewBox="0 0 16 16">
|
|
427
|
+
<path fill="currentColor"
|
|
428
|
+
fill-rule="evenodd"
|
|
429
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z" />
|
|
430
|
+
</svg>
|
|
431
|
+
</fig-button>
|
|
432
|
+
</fig-field>
|
|
433
|
+
<fig-field direction="horizontal">
|
|
434
|
+
<label>Toggle (selected)</label>
|
|
435
|
+
<fig-button variant="ghost"
|
|
436
|
+
type="toggle"
|
|
437
|
+
icon="true"
|
|
438
|
+
selected="true">
|
|
439
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
440
|
+
width="16"
|
|
441
|
+
height="16"
|
|
442
|
+
viewBox="0 0 16 16">
|
|
443
|
+
<path fill="currentColor"
|
|
444
|
+
fill-rule="evenodd"
|
|
445
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z" />
|
|
446
|
+
</svg>
|
|
447
|
+
</fig-button>
|
|
448
|
+
</fig-field>
|
|
449
|
+
<fig-field direction="horizontal">
|
|
450
|
+
<label>Upload</label>
|
|
451
|
+
<fig-button variant="secondary"
|
|
452
|
+
type="upload">
|
|
453
|
+
Upload
|
|
454
|
+
<input type="file" />
|
|
455
|
+
</fig-button>
|
|
456
|
+
</fig-field>
|
|
457
|
+
<fig-field direction="horizontal">
|
|
458
|
+
<label>Link</label>
|
|
459
|
+
<fig-button type="link"
|
|
460
|
+
href="https://www.figma.com"
|
|
461
|
+
target="_blank">Visit Figma</fig-button>
|
|
462
|
+
</fig-field>
|
|
463
|
+
|
|
464
|
+
<h3>Button Combo</h3>
|
|
465
|
+
<fig-field direction="horizontal">
|
|
466
|
+
<label>Primary combo</label>
|
|
467
|
+
<fig-button-combo>
|
|
468
|
+
<fig-button>Primary</fig-button>
|
|
469
|
+
<fig-button icon="true"
|
|
470
|
+
type="select"
|
|
471
|
+
size="compact">
|
|
472
|
+
<svg width="24"
|
|
473
|
+
height="24"
|
|
474
|
+
viewBox="0 0 24 24"
|
|
475
|
+
fill="none"
|
|
476
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
477
|
+
<path fill-rule="evenodd"
|
|
478
|
+
clip-rule="evenodd"
|
|
479
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
480
|
+
fill="currentColor"
|
|
481
|
+
fill-opacity="0.9" />
|
|
482
|
+
</svg>
|
|
483
|
+
<fig-dropdown>
|
|
484
|
+
<option>Option One</option>
|
|
485
|
+
<option>Option Two</option>
|
|
486
|
+
</fig-dropdown>
|
|
487
|
+
</fig-button>
|
|
488
|
+
</fig-button-combo>
|
|
489
|
+
</fig-field>
|
|
490
|
+
<fig-field direction="horizontal">
|
|
491
|
+
<label>Secondary combo</label>
|
|
492
|
+
<fig-button-combo>
|
|
493
|
+
<fig-button variant="secondary">Secondary</fig-button>
|
|
494
|
+
<fig-button variant="secondary"
|
|
495
|
+
icon="true"
|
|
496
|
+
type="select">
|
|
497
|
+
<svg width="24"
|
|
498
|
+
height="24"
|
|
499
|
+
viewBox="0 0 24 24"
|
|
500
|
+
fill="none"
|
|
501
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
502
|
+
<path fill-rule="evenodd"
|
|
503
|
+
clip-rule="evenodd"
|
|
504
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
505
|
+
fill="currentColor"
|
|
506
|
+
fill-opacity="0.9" />
|
|
507
|
+
</svg>
|
|
508
|
+
<fig-dropdown>
|
|
509
|
+
<option>Option One</option>
|
|
510
|
+
<option>Option Two</option>
|
|
511
|
+
</fig-dropdown>
|
|
512
|
+
</fig-button>
|
|
513
|
+
</fig-button-combo>
|
|
514
|
+
</fig-field>
|
|
515
|
+
<fig-field direction="horizontal">
|
|
516
|
+
<label>Disabled combo</label>
|
|
517
|
+
<fig-button-combo>
|
|
518
|
+
<fig-button disabled>Disabled</fig-button>
|
|
519
|
+
<fig-button disabled>Action</fig-button>
|
|
520
|
+
</fig-button-combo>
|
|
521
|
+
</fig-field>
|
|
522
|
+
</section>
|
|
523
|
+
<hr>
|
|
524
|
+
|
|
525
|
+
<!-- Checkbox -->
|
|
526
|
+
<section id="checkbox">
|
|
527
|
+
<h2>Checkbox</h2>
|
|
528
|
+
<p class="description">A checkbox input for boolean selections.</p>
|
|
529
|
+
|
|
530
|
+
<h3>States</h3>
|
|
531
|
+
<fig-field direction="horizontal">
|
|
532
|
+
<label>Unchecked</label>
|
|
533
|
+
<fig-checkbox label="Unchecked"></fig-checkbox>
|
|
534
|
+
</fig-field>
|
|
535
|
+
<fig-field direction="horizontal">
|
|
536
|
+
<label>Checked</label>
|
|
537
|
+
<fig-checkbox label="Checked"
|
|
538
|
+
checked="true"></fig-checkbox>
|
|
539
|
+
</fig-field>
|
|
540
|
+
<fig-field direction="horizontal">
|
|
541
|
+
<label>Disabled</label>
|
|
542
|
+
<fig-checkbox label="Disabled"
|
|
543
|
+
disabled></fig-checkbox>
|
|
544
|
+
</fig-field>
|
|
545
|
+
<fig-field direction="horizontal">
|
|
546
|
+
<label>Disabled checked</label>
|
|
547
|
+
<fig-checkbox label="Disabled checked"
|
|
548
|
+
checked="true"
|
|
549
|
+
disabled></fig-checkbox>
|
|
550
|
+
</fig-field>
|
|
551
|
+
</section>
|
|
552
|
+
<hr>
|
|
553
|
+
|
|
554
|
+
<!-- Chit -->
|
|
555
|
+
<section id="chit">
|
|
556
|
+
<h2>Chit</h2>
|
|
557
|
+
<p class="description">A small visual indicator for colors, gradients, or images.</p>
|
|
558
|
+
|
|
559
|
+
<h3>Types</h3>
|
|
560
|
+
<fig-field direction="horizontal">
|
|
561
|
+
<label>Color</label>
|
|
562
|
+
<hstack>
|
|
563
|
+
<fig-chit background="#FF0000"></fig-chit>
|
|
564
|
+
<fig-chit background="#00FF00"></fig-chit>
|
|
565
|
+
<fig-chit background="#0000FF"></fig-chit>
|
|
566
|
+
<fig-chit background="#000000"></fig-chit>
|
|
567
|
+
</hstack>
|
|
568
|
+
</fig-field>
|
|
569
|
+
<fig-field direction="horizontal">
|
|
570
|
+
<label>Color (50% opacity)</label>
|
|
571
|
+
<hstack>
|
|
572
|
+
<fig-chit background="#FF0000"
|
|
573
|
+
alpha="0.5"></fig-chit>
|
|
574
|
+
<fig-chit background="#00FF00"
|
|
575
|
+
alpha="0.5"></fig-chit>
|
|
576
|
+
<fig-chit background="#0000FF"
|
|
577
|
+
alpha="0.5"></fig-chit>
|
|
578
|
+
<fig-chit background="#000000"
|
|
579
|
+
alpha="0.5"></fig-chit>
|
|
580
|
+
</hstack>
|
|
581
|
+
</fig-field>
|
|
582
|
+
<fig-field direction="horizontal">
|
|
583
|
+
<label>Gradient (linear)</label>
|
|
584
|
+
<fig-chit background="linear-gradient(180deg, #ff90ff, #0000ff)"></fig-chit>
|
|
585
|
+
</fig-field>
|
|
586
|
+
<fig-field direction="horizontal">
|
|
587
|
+
<label>Gradient (angular)</label>
|
|
588
|
+
<fig-chit background="conic-gradient(from 180deg, #ff90ff, #0000ff)"></fig-chit>
|
|
589
|
+
</fig-field>
|
|
590
|
+
<fig-field direction="horizontal">
|
|
591
|
+
<label>Gradient (radial)</label>
|
|
592
|
+
<fig-chit background="radial-gradient(circle, #ff90ff, #0000ff)"></fig-chit>
|
|
593
|
+
</fig-field>
|
|
594
|
+
<fig-field direction="horizontal">
|
|
595
|
+
<label>Image</label>
|
|
596
|
+
<fig-chit background="url(https://avatars.githubusercontent.com/u/12345678?v=4)"></fig-chit>
|
|
597
|
+
</fig-field>
|
|
598
|
+
|
|
599
|
+
<h3>Sizes</h3>
|
|
600
|
+
<fig-field direction="horizontal">
|
|
601
|
+
<label>Default</label>
|
|
602
|
+
<fig-chit background="#9747FF"></fig-chit>
|
|
603
|
+
</fig-field>
|
|
604
|
+
<fig-field direction="horizontal">
|
|
605
|
+
<label>Large</label>
|
|
606
|
+
<fig-chit background="#9747FF"
|
|
607
|
+
size="large"></fig-chit>
|
|
608
|
+
</fig-field>
|
|
609
|
+
<fig-field direction="horizontal">
|
|
610
|
+
<label>Large (Gradient)</label>
|
|
611
|
+
<fig-chit background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
|
612
|
+
size="large"></fig-chit>
|
|
613
|
+
</fig-field>
|
|
614
|
+
<fig-field direction="horizontal">
|
|
615
|
+
<label>Large (Radial)</label>
|
|
616
|
+
<fig-chit background="radial-gradient(circle, #ff6b6b, #4ecdc4)"
|
|
617
|
+
size="large"></fig-chit>
|
|
618
|
+
</fig-field>
|
|
619
|
+
<fig-field direction="horizontal">
|
|
620
|
+
<label>Large (Angular)</label>
|
|
621
|
+
<fig-chit background="conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000)"
|
|
622
|
+
size="large"></fig-chit>
|
|
623
|
+
</fig-field>
|
|
624
|
+
<fig-field direction="horizontal">
|
|
625
|
+
<label>Large (Image)</label>
|
|
626
|
+
<fig-chit background="url(https://avatars.githubusercontent.com/u/12345678?v=4)"
|
|
627
|
+
size="large"></fig-chit>
|
|
628
|
+
</fig-field>
|
|
629
|
+
|
|
630
|
+
<h3>States</h3>
|
|
631
|
+
<fig-field direction="horizontal">
|
|
632
|
+
<label>Selected</label>
|
|
633
|
+
<fig-chit background="#0D99FF"
|
|
634
|
+
selected></fig-chit>
|
|
635
|
+
</fig-field>
|
|
636
|
+
<fig-field direction="horizontal">
|
|
637
|
+
<label>Disabled</label>
|
|
638
|
+
<fig-chit background="#0D99FF"
|
|
639
|
+
disabled></fig-chit>
|
|
640
|
+
</fig-field>
|
|
641
|
+
</section>
|
|
642
|
+
<hr>
|
|
643
|
+
|
|
644
|
+
<!-- Combo Input -->
|
|
645
|
+
<section id="combo-input">
|
|
646
|
+
<h2>Combo Input</h2>
|
|
647
|
+
<p class="description">A text input with autocomplete suggestions from a predefined list.</p>
|
|
648
|
+
|
|
649
|
+
<h3>Default</h3>
|
|
650
|
+
<fig-combo-input options="House, Apartment, Condo, Townhouse, Other"
|
|
651
|
+
placeholder="Type of residence"></fig-combo-input>
|
|
652
|
+
|
|
653
|
+
<h3>With Value</h3>
|
|
654
|
+
<fig-combo-input options="Red, Green, Blue, Yellow, Purple"
|
|
655
|
+
value="Blue"
|
|
656
|
+
placeholder="Select a color"></fig-combo-input>
|
|
657
|
+
</section>
|
|
658
|
+
<hr>
|
|
659
|
+
|
|
660
|
+
<!-- Dialog -->
|
|
661
|
+
<section id="dialog">
|
|
662
|
+
<h2>Dialog</h2>
|
|
663
|
+
<p class="description">A modal dialog window with optional dragging support.</p>
|
|
664
|
+
|
|
665
|
+
<h3>Open Dialog</h3>
|
|
666
|
+
<fig-button onclick="document.getElementById('example-dialog').showModal()">Open Dialog</fig-button>
|
|
667
|
+
|
|
668
|
+
<dialog id="example-dialog"
|
|
669
|
+
is="fig-dialog"
|
|
670
|
+
drag="true"
|
|
671
|
+
position="center center">
|
|
672
|
+
<fig-header>
|
|
673
|
+
<h3>Dialog Title</h3>
|
|
674
|
+
<fig-tooltip text="Close">
|
|
675
|
+
<fig-button variant="ghost"
|
|
676
|
+
icon="true"
|
|
677
|
+
close-dialog>
|
|
678
|
+
<span class="fig-mask-icon"
|
|
679
|
+
style="--icon: var(--icon-close)"></span>
|
|
680
|
+
</fig-button>
|
|
681
|
+
</fig-tooltip>
|
|
682
|
+
</fig-header>
|
|
683
|
+
<fig-content>
|
|
684
|
+
<p>This is a draggable dialog. You can drag it by the header.</p>
|
|
685
|
+
<fig-field direction="horizontal">
|
|
686
|
+
<label>Example Field</label>
|
|
687
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
688
|
+
</fig-field>
|
|
689
|
+
<details>
|
|
690
|
+
<summary>More options</summary>
|
|
691
|
+
<fig-field direction="horizontal">
|
|
692
|
+
<label>Advanced</label>
|
|
693
|
+
<fig-input-text placeholder="Advanced setting"></fig-input-text>
|
|
694
|
+
</fig-field>
|
|
695
|
+
</details>
|
|
696
|
+
</fig-content>
|
|
697
|
+
<footer>
|
|
698
|
+
<fig-button variant="secondary"
|
|
699
|
+
close-dialog>Cancel</fig-button>
|
|
700
|
+
<fig-button>Save</fig-button>
|
|
701
|
+
</footer>
|
|
702
|
+
</dialog>
|
|
703
|
+
|
|
704
|
+
<h3>Position Attribute</h3>
|
|
705
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
|
|
706
|
+
Use <code>position</code> attribute: <code>center center</code>, <code>top left</code>,
|
|
707
|
+
<code>top right</code>, <code>bottom left</code>, <code>bottom right</code>, or combinations.
|
|
708
|
+
</p>
|
|
709
|
+
<hstack>
|
|
710
|
+
<fig-button variant="secondary"
|
|
711
|
+
onclick="openPositionedDialog('center center')">Center</fig-button>
|
|
712
|
+
<fig-button variant="secondary"
|
|
713
|
+
onclick="openPositionedDialog('top left')">Top Left</fig-button>
|
|
714
|
+
<fig-button variant="secondary"
|
|
715
|
+
onclick="openPositionedDialog('top right')">Top Right</fig-button>
|
|
716
|
+
<fig-button variant="secondary"
|
|
717
|
+
onclick="openPositionedDialog('bottom left')">Bottom Left</fig-button>
|
|
718
|
+
<fig-button variant="secondary"
|
|
719
|
+
onclick="openPositionedDialog('bottom right')">Bottom Right</fig-button>
|
|
720
|
+
</hstack>
|
|
721
|
+
|
|
722
|
+
<dialog id="positioned-dialog"
|
|
723
|
+
is="fig-dialog"
|
|
724
|
+
drag="true">
|
|
725
|
+
<fig-header>
|
|
726
|
+
<h3>Positioned Dialog</h3>
|
|
727
|
+
<fig-tooltip text="Close">
|
|
728
|
+
<fig-button variant="ghost"
|
|
729
|
+
icon="true"
|
|
730
|
+
close-dialog>
|
|
731
|
+
<span class="fig-mask-icon"
|
|
732
|
+
style="--icon: var(--icon-close)"></span>
|
|
733
|
+
</fig-button>
|
|
734
|
+
</fig-tooltip>
|
|
735
|
+
</fig-header>
|
|
736
|
+
<fig-content>
|
|
737
|
+
<p>This dialog is positioned at a specific corner.</p>
|
|
738
|
+
</fig-content>
|
|
739
|
+
<footer>
|
|
740
|
+
<fig-button close-dialog>Close</fig-button>
|
|
741
|
+
</footer>
|
|
742
|
+
</dialog>
|
|
743
|
+
|
|
744
|
+
<h3>Handle Attribute</h3>
|
|
745
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
|
|
746
|
+
Use the <code>handle</code> attribute to restrict dragging to a specific element.
|
|
747
|
+
Pass a CSS selector like <code>handle="fig-header"</code>. Dragging will only work
|
|
748
|
+
when initiated from within that element. Interactive elements (buttons, inputs) within
|
|
749
|
+
the handle are still excluded from triggering drag.
|
|
750
|
+
</p>
|
|
751
|
+
<pre><code><dialog is="fig-dialog" drag="true" handle="fig-header">
|
|
752
|
+
<fig-header>Drag only here</fig-header>
|
|
753
|
+
<fig-content>Content won't trigger drag</fig-content>
|
|
754
|
+
</dialog></code></pre>
|
|
755
|
+
<fig-button onclick="document.getElementById('handle-demo-dialog').showModal()">Open Handle
|
|
756
|
+
Demo</fig-button>
|
|
757
|
+
|
|
758
|
+
<dialog id="handle-demo-dialog"
|
|
759
|
+
is="fig-dialog"
|
|
760
|
+
drag="true"
|
|
761
|
+
handle="fig-header"
|
|
762
|
+
position="center center">
|
|
763
|
+
<fig-header>
|
|
764
|
+
<h3>Drag Handle Demo</h3>
|
|
765
|
+
<fig-tooltip text="Close">
|
|
766
|
+
<fig-button variant="ghost"
|
|
767
|
+
icon="true"
|
|
768
|
+
close-dialog>
|
|
769
|
+
<span class="fig-mask-icon"
|
|
770
|
+
style="--icon: var(--icon-close)"></span>
|
|
771
|
+
</fig-button>
|
|
772
|
+
</fig-tooltip>
|
|
773
|
+
</fig-header>
|
|
774
|
+
<fig-content>
|
|
775
|
+
<p><strong>Try dragging from:</strong></p>
|
|
776
|
+
<ul style="font-size: 12px; margin: 8px 0; padding-left: 20px;">
|
|
777
|
+
<li>✓ The header area (works)</li>
|
|
778
|
+
<li>✗ This content area (won't drag)</li>
|
|
779
|
+
<li>✗ The footer below (won't drag)</li>
|
|
780
|
+
</ul>
|
|
781
|
+
<details>
|
|
782
|
+
<summary>More options</summary>
|
|
783
|
+
<fig-field direction="horizontal">
|
|
784
|
+
<label>Advanced</label>
|
|
785
|
+
<fig-input-text placeholder="Advanced setting"></fig-input-text>
|
|
786
|
+
</fig-field>
|
|
787
|
+
</details>
|
|
788
|
+
</fig-content>
|
|
789
|
+
<footer>
|
|
790
|
+
<fig-button close-dialog>Close</fig-button>
|
|
791
|
+
</footer>
|
|
792
|
+
</dialog>
|
|
793
|
+
</section>
|
|
794
|
+
<hr>
|
|
795
|
+
|
|
796
|
+
<!-- Dropdown -->
|
|
797
|
+
<section id="dropdown">
|
|
798
|
+
<h2>Dropdown</h2>
|
|
799
|
+
<p class="description">A select dropdown menu with options.</p>
|
|
800
|
+
|
|
801
|
+
<h3>Default</h3>
|
|
802
|
+
<fig-dropdown variant="neue">
|
|
803
|
+
<optgroup label="Numbers">
|
|
804
|
+
<option>One</option>
|
|
805
|
+
<option>Two</option>
|
|
806
|
+
<option>Three</option>
|
|
807
|
+
</optgroup>
|
|
808
|
+
<optgroup label="Fruits">
|
|
809
|
+
<option>Apple</option>
|
|
810
|
+
<option>Banana</option>
|
|
811
|
+
<option>Cherry</option>
|
|
812
|
+
</optgroup>
|
|
813
|
+
</fig-dropdown>
|
|
814
|
+
|
|
815
|
+
<h3>Full Width</h3>
|
|
816
|
+
<fig-dropdown full
|
|
817
|
+
variant="neue">
|
|
818
|
+
<option>Full Width Dropdown</option>
|
|
819
|
+
<option>Option Two</option>
|
|
820
|
+
<option>Option Three</option>
|
|
821
|
+
</fig-dropdown>
|
|
822
|
+
|
|
823
|
+
<h3>Dropdown Neue Variant (with many options)</h3>
|
|
824
|
+
<fig-dropdown variant="neue"
|
|
825
|
+
type="dropdown"
|
|
826
|
+
label="Choose">
|
|
827
|
+
<optgroup label="North America">
|
|
828
|
+
<option value="us">United States</option>
|
|
829
|
+
<option value="ca">Canada</option>
|
|
830
|
+
<option value="mx">Mexico</option>
|
|
831
|
+
<option value="gt">Guatemala</option>
|
|
832
|
+
<option value="cu">Cuba</option>
|
|
833
|
+
<option value="jm">Jamaica</option>
|
|
834
|
+
<option value="ht">Haiti</option>
|
|
835
|
+
<option value="do">Dominican Republic</option>
|
|
836
|
+
</optgroup>
|
|
837
|
+
<optgroup label="South America">
|
|
838
|
+
<option value="br">Brazil</option>
|
|
839
|
+
<option value="ar">Argentina</option>
|
|
840
|
+
<option value="co">Colombia</option>
|
|
841
|
+
<option value="pe">Peru</option>
|
|
842
|
+
<option value="ve">Venezuela</option>
|
|
843
|
+
<option value="cl">Chile</option>
|
|
844
|
+
<option value="ec">Ecuador</option>
|
|
845
|
+
<option value="bo">Bolivia</option>
|
|
846
|
+
<option value="py">Paraguay</option>
|
|
847
|
+
<option value="uy">Uruguay</option>
|
|
848
|
+
</optgroup>
|
|
849
|
+
<optgroup label="Europe">
|
|
850
|
+
<option value="gb">United Kingdom</option>
|
|
851
|
+
<option value="de">Germany</option>
|
|
852
|
+
<option value="fr">France</option>
|
|
853
|
+
<option value="it">Italy</option>
|
|
854
|
+
<option value="es">Spain</option>
|
|
855
|
+
<option value="pt">Portugal</option>
|
|
856
|
+
<option value="nl">Netherlands</option>
|
|
857
|
+
<option value="be">Belgium</option>
|
|
858
|
+
<option value="se">Sweden</option>
|
|
859
|
+
<option value="no">Norway</option>
|
|
860
|
+
<option value="dk">Denmark</option>
|
|
861
|
+
<option value="fi">Finland</option>
|
|
862
|
+
<option value="pl">Poland</option>
|
|
863
|
+
<option value="at">Austria</option>
|
|
864
|
+
<option value="ch">Switzerland</option>
|
|
865
|
+
<option value="ie">Ireland</option>
|
|
866
|
+
<option value="gr">Greece</option>
|
|
867
|
+
<option value="cz">Czech Republic</option>
|
|
868
|
+
</optgroup>
|
|
869
|
+
<optgroup label="Asia">
|
|
870
|
+
<option value="cn">China</option>
|
|
871
|
+
<option value="jp">Japan</option>
|
|
872
|
+
<option value="kr">South Korea</option>
|
|
873
|
+
<option value="in">India</option>
|
|
874
|
+
<option value="id">Indonesia</option>
|
|
875
|
+
<option value="th">Thailand</option>
|
|
876
|
+
<option value="vn">Vietnam</option>
|
|
877
|
+
<option value="ph">Philippines</option>
|
|
878
|
+
<option value="my">Malaysia</option>
|
|
879
|
+
<option value="sg">Singapore</option>
|
|
880
|
+
<option value="pk">Pakistan</option>
|
|
881
|
+
<option value="bd">Bangladesh</option>
|
|
882
|
+
<option value="tw">Taiwan</option>
|
|
883
|
+
<option value="hk">Hong Kong</option>
|
|
884
|
+
</optgroup>
|
|
885
|
+
<optgroup label="Middle East">
|
|
886
|
+
<option value="ae">United Arab Emirates</option>
|
|
887
|
+
<option value="sa">Saudi Arabia</option>
|
|
888
|
+
<option value="il">Israel</option>
|
|
889
|
+
<option value="tr">Turkey</option>
|
|
890
|
+
<option value="eg">Egypt</option>
|
|
891
|
+
<option value="ir">Iran</option>
|
|
892
|
+
<option value="iq">Iraq</option>
|
|
893
|
+
<option value="jo">Jordan</option>
|
|
894
|
+
<option value="lb">Lebanon</option>
|
|
895
|
+
<option value="qa">Qatar</option>
|
|
896
|
+
</optgroup>
|
|
897
|
+
<optgroup label="Africa">
|
|
898
|
+
<option value="za">South Africa</option>
|
|
899
|
+
<option value="ng">Nigeria</option>
|
|
900
|
+
<option value="ke">Kenya</option>
|
|
901
|
+
<option value="gh">Ghana</option>
|
|
902
|
+
<option value="et">Ethiopia</option>
|
|
903
|
+
<option value="tz">Tanzania</option>
|
|
904
|
+
<option value="ug">Uganda</option>
|
|
905
|
+
<option value="ma">Morocco</option>
|
|
906
|
+
<option value="dz">Algeria</option>
|
|
907
|
+
<option value="tn">Tunisia</option>
|
|
908
|
+
<option value="sn">Senegal</option>
|
|
909
|
+
<option value="ci">Ivory Coast</option>
|
|
910
|
+
</optgroup>
|
|
911
|
+
<optgroup label="Oceania">
|
|
912
|
+
<option value="au">Australia</option>
|
|
913
|
+
<option value="nz">New Zealand</option>
|
|
914
|
+
<option value="fj">Fiji</option>
|
|
915
|
+
<option value="pg">Papua New Guinea</option>
|
|
916
|
+
<option value="ws">Samoa</option>
|
|
917
|
+
<option value="to">Tonga</option>
|
|
918
|
+
<option value="vu">Vanuatu</option>
|
|
919
|
+
<option value="sb">Solomon Islands</option>
|
|
920
|
+
</optgroup>
|
|
921
|
+
<optgroup label="Programming Languages">
|
|
922
|
+
<option value="js">JavaScript</option>
|
|
923
|
+
<option value="ts">TypeScript</option>
|
|
924
|
+
<option value="py">Python</option>
|
|
925
|
+
<option value="rb">Ruby</option>
|
|
926
|
+
<option value="go">Go</option>
|
|
927
|
+
<option value="rs">Rust</option>
|
|
928
|
+
<option value="java">Java</option>
|
|
929
|
+
<option value="kt">Kotlin</option>
|
|
930
|
+
<option value="swift">Swift</option>
|
|
931
|
+
<option value="cpp">C++</option>
|
|
932
|
+
<option value="cs">C#</option>
|
|
933
|
+
<option value="php">PHP</option>
|
|
934
|
+
<option value="r">R</option>
|
|
935
|
+
<option value="scala">Scala</option>
|
|
936
|
+
<option value="elixir">Elixir</option>
|
|
937
|
+
<option value="clj">Clojure</option>
|
|
938
|
+
<option value="hs">Haskell</option>
|
|
939
|
+
<option value="lua">Lua</option>
|
|
940
|
+
</optgroup>
|
|
941
|
+
<optgroup label="Design Tools">
|
|
942
|
+
<option value="figma">Figma</option>
|
|
943
|
+
<option value="sketch">Sketch</option>
|
|
944
|
+
<option value="xd">Adobe XD</option>
|
|
945
|
+
<option value="ps">Photoshop</option>
|
|
946
|
+
<option value="ai">Illustrator</option>
|
|
947
|
+
<option value="ae">After Effects</option>
|
|
948
|
+
<option value="framer">Framer</option>
|
|
949
|
+
<option value="principle">Principle</option>
|
|
950
|
+
<option value="invision">InVision</option>
|
|
951
|
+
<option value="zeplin">Zeplin</option>
|
|
952
|
+
</optgroup>
|
|
953
|
+
</fig-dropdown>
|
|
954
|
+
|
|
955
|
+
<h3>Select Neue Variant (with many options)</h3>
|
|
956
|
+
|
|
957
|
+
<fig-dropdown variant="neue">
|
|
958
|
+
<optgroup label="North America">
|
|
959
|
+
<option value="us">United States</option>
|
|
960
|
+
<option value="ca">Canada</option>
|
|
961
|
+
<option value="mx">Mexico</option>
|
|
962
|
+
<option value="gt">Guatemala</option>
|
|
963
|
+
<option value="cu">Cuba</option>
|
|
964
|
+
<option value="jm">Jamaica</option>
|
|
965
|
+
<option value="ht">Haiti</option>
|
|
966
|
+
<option value="do">Dominican Republic</option>
|
|
967
|
+
</optgroup>
|
|
968
|
+
<optgroup label="South America">
|
|
969
|
+
<option value="br">Brazil</option>
|
|
970
|
+
<option value="ar">Argentina</option>
|
|
971
|
+
<option value="co">Colombia</option>
|
|
972
|
+
<option value="pe">Peru</option>
|
|
973
|
+
<option value="ve">Venezuela</option>
|
|
974
|
+
<option value="cl">Chile</option>
|
|
975
|
+
<option value="ec">Ecuador</option>
|
|
976
|
+
<option value="bo">Bolivia</option>
|
|
977
|
+
<option value="py">Paraguay</option>
|
|
978
|
+
<option value="uy">Uruguay</option>
|
|
979
|
+
</optgroup>
|
|
980
|
+
<optgroup label="Europe">
|
|
981
|
+
<option value="gb">United Kingdom</option>
|
|
982
|
+
<option value="de">Germany</option>
|
|
983
|
+
<option value="fr">France</option>
|
|
984
|
+
<option value="it">Italy</option>
|
|
985
|
+
<option value="es">Spain</option>
|
|
986
|
+
<option value="pt">Portugal</option>
|
|
987
|
+
<option value="nl">Netherlands</option>
|
|
988
|
+
<option value="be">Belgium</option>
|
|
989
|
+
<option value="se">Sweden</option>
|
|
990
|
+
<option value="no">Norway</option>
|
|
991
|
+
<option value="dk">Denmark</option>
|
|
992
|
+
<option value="fi">Finland</option>
|
|
993
|
+
<option value="pl">Poland</option>
|
|
994
|
+
<option value="at">Austria</option>
|
|
995
|
+
<option value="ch">Switzerland</option>
|
|
996
|
+
<option value="ie">Ireland</option>
|
|
997
|
+
<option value="gr">Greece</option>
|
|
998
|
+
<option value="cz">Czech Republic</option>
|
|
999
|
+
</optgroup>
|
|
1000
|
+
<optgroup label="Asia">
|
|
1001
|
+
<option value="cn">China</option>
|
|
1002
|
+
<option value="jp">Japan</option>
|
|
1003
|
+
<option value="kr">South Korea</option>
|
|
1004
|
+
<option value="in">India</option>
|
|
1005
|
+
<option value="id">Indonesia</option>
|
|
1006
|
+
<option value="th">Thailand</option>
|
|
1007
|
+
<option value="vn">Vietnam</option>
|
|
1008
|
+
<option value="ph">Philippines</option>
|
|
1009
|
+
<option value="my">Malaysia</option>
|
|
1010
|
+
<option value="sg">Singapore</option>
|
|
1011
|
+
<option value="pk">Pakistan</option>
|
|
1012
|
+
<option value="bd">Bangladesh</option>
|
|
1013
|
+
<option value="tw">Taiwan</option>
|
|
1014
|
+
<option value="hk">Hong Kong</option>
|
|
1015
|
+
</optgroup>
|
|
1016
|
+
<optgroup label="Middle East">
|
|
1017
|
+
<option value="ae">United Arab Emirates</option>
|
|
1018
|
+
<option value="sa">Saudi Arabia</option>
|
|
1019
|
+
<option value="il">Israel</option>
|
|
1020
|
+
<option value="tr">Turkey</option>
|
|
1021
|
+
<option value="eg">Egypt</option>
|
|
1022
|
+
<option value="ir">Iran</option>
|
|
1023
|
+
<option value="iq">Iraq</option>
|
|
1024
|
+
<option value="jo">Jordan</option>
|
|
1025
|
+
<option value="lb">Lebanon</option>
|
|
1026
|
+
<option value="qa">Qatar</option>
|
|
1027
|
+
</optgroup>
|
|
1028
|
+
<optgroup label="Africa">
|
|
1029
|
+
<option value="za">South Africa</option>
|
|
1030
|
+
<option value="ng">Nigeria</option>
|
|
1031
|
+
<option value="ke">Kenya</option>
|
|
1032
|
+
<option value="gh">Ghana</option>
|
|
1033
|
+
<option value="et">Ethiopia</option>
|
|
1034
|
+
<option value="tz">Tanzania</option>
|
|
1035
|
+
<option value="ug">Uganda</option>
|
|
1036
|
+
<option value="ma">Morocco</option>
|
|
1037
|
+
<option value="dz">Algeria</option>
|
|
1038
|
+
<option value="tn">Tunisia</option>
|
|
1039
|
+
<option value="sn">Senegal</option>
|
|
1040
|
+
<option value="ci">Ivory Coast</option>
|
|
1041
|
+
</optgroup>
|
|
1042
|
+
<optgroup label="Oceania">
|
|
1043
|
+
<option value="au">Australia</option>
|
|
1044
|
+
<option value="nz">New Zealand</option>
|
|
1045
|
+
<option value="fj">Fiji</option>
|
|
1046
|
+
<option value="pg">Papua New Guinea</option>
|
|
1047
|
+
<option value="ws">Samoa</option>
|
|
1048
|
+
<option value="to">Tonga</option>
|
|
1049
|
+
<option value="vu">Vanuatu</option>
|
|
1050
|
+
<option value="sb">Solomon Islands</option>
|
|
1051
|
+
</optgroup>
|
|
1052
|
+
<optgroup label="Programming Languages">
|
|
1053
|
+
<option value="js">JavaScript</option>
|
|
1054
|
+
<option value="ts">TypeScript</option>
|
|
1055
|
+
<option value="py">Python</option>
|
|
1056
|
+
<option value="rb">Ruby</option>
|
|
1057
|
+
<option value="go">Go</option>
|
|
1058
|
+
<option value="rs">Rust</option>
|
|
1059
|
+
<option value="java">Java</option>
|
|
1060
|
+
<option value="kt">Kotlin</option>
|
|
1061
|
+
<option value="swift">Swift</option>
|
|
1062
|
+
<option value="cpp">C++</option>
|
|
1063
|
+
<option value="cs">C#</option>
|
|
1064
|
+
<option value="php">PHP</option>
|
|
1065
|
+
<option value="r">R</option>
|
|
1066
|
+
<option value="scala">Scala</option>
|
|
1067
|
+
<option value="elixir">Elixir</option>
|
|
1068
|
+
<option value="clj">Clojure</option>
|
|
1069
|
+
<option value="hs">Haskell</option>
|
|
1070
|
+
<option value="lua">Lua</option>
|
|
1071
|
+
</optgroup>
|
|
1072
|
+
<optgroup label="Design Tools">
|
|
1073
|
+
<option value="figma">Figma</option>
|
|
1074
|
+
<option value="sketch">Sketch</option>
|
|
1075
|
+
<option value="xd">Adobe XD</option>
|
|
1076
|
+
<option value="ps">Photoshop</option>
|
|
1077
|
+
<option value="ai">Illustrator</option>
|
|
1078
|
+
<option value="ae">After Effects</option>
|
|
1079
|
+
<option value="framer">Framer</option>
|
|
1080
|
+
<option value="principle">Principle</option>
|
|
1081
|
+
<option value="invision">InVision</option>
|
|
1082
|
+
<option value="zeplin">Zeplin</option>
|
|
1083
|
+
</optgroup>
|
|
1084
|
+
</fig-dropdown>
|
|
1085
|
+
</section>
|
|
1086
|
+
<hr>
|
|
1087
|
+
|
|
1088
|
+
<!-- Field -->
|
|
1089
|
+
<section id="field">
|
|
1090
|
+
<h2>Field</h2>
|
|
1091
|
+
<p class="description">A form field container with label support.</p>
|
|
1092
|
+
|
|
1093
|
+
<h3>Directions</h3>
|
|
1094
|
+
<fig-field direction="horizontal">
|
|
1095
|
+
<label>Vertical (default)</label>
|
|
1096
|
+
</fig-field>
|
|
1097
|
+
<fig-field>
|
|
1098
|
+
<label>Field Label</label>
|
|
1099
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
1100
|
+
</fig-field>
|
|
1101
|
+
|
|
1102
|
+
<fig-field direction="horizontal"
|
|
1103
|
+
style="margin-top: 24px;">
|
|
1104
|
+
<label>Horizontal</label>
|
|
1105
|
+
</fig-field>
|
|
1106
|
+
<fig-field direction="horizontal"
|
|
1107
|
+
style="width: 240px;">
|
|
1108
|
+
<label>Field Label</label>
|
|
1109
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
1110
|
+
</fig-field>
|
|
1111
|
+
|
|
1112
|
+
<h3>Horizontal Fields with Different Inputs</h3>
|
|
1113
|
+
<fig-field direction="horizontal"
|
|
1114
|
+
style="width: 240px;">
|
|
1115
|
+
<label>Text Input</label>
|
|
1116
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
1117
|
+
</fig-field>
|
|
1118
|
+
<fig-field direction="horizontal"
|
|
1119
|
+
style="width: 240px;">
|
|
1120
|
+
<label>Number Input</label>
|
|
1121
|
+
<fig-input-number value="100"
|
|
1122
|
+
units="px"></fig-input-number>
|
|
1123
|
+
</fig-field>
|
|
1124
|
+
<fig-field direction="horizontal"
|
|
1125
|
+
style="width: 240px;">
|
|
1126
|
+
<label>Dropdown</label>
|
|
1127
|
+
<fig-dropdown>
|
|
1128
|
+
<option>Option One</option>
|
|
1129
|
+
<option>Option Two</option>
|
|
1130
|
+
<option>Option Three</option>
|
|
1131
|
+
</fig-dropdown>
|
|
1132
|
+
</fig-field>
|
|
1133
|
+
<fig-field direction="horizontal"
|
|
1134
|
+
style="width: 240px;">
|
|
1135
|
+
<label>Slider</label>
|
|
1136
|
+
<fig-slider value="50"
|
|
1137
|
+
text="true"></fig-slider>
|
|
1138
|
+
</fig-field>
|
|
1139
|
+
<fig-field direction="horizontal"
|
|
1140
|
+
style="width: 240px;">
|
|
1141
|
+
<label>Color</label>
|
|
1142
|
+
<fig-input-color value="#0D99FF"
|
|
1143
|
+
text="true"></fig-input-color>
|
|
1144
|
+
</fig-field>
|
|
1145
|
+
<fig-field direction="horizontal"
|
|
1146
|
+
style="width: 240px;">
|
|
1147
|
+
<label>Angle</label>
|
|
1148
|
+
<fig-input-angle value="45"
|
|
1149
|
+
text="true"></fig-input-angle>
|
|
1150
|
+
</fig-field>
|
|
1151
|
+
<fig-field direction="horizontal"
|
|
1152
|
+
style="width: 240px;">
|
|
1153
|
+
<label>Joystick</label>
|
|
1154
|
+
<fig-input-joystick text="true"
|
|
1155
|
+
value="50,50"></fig-input-joystick>
|
|
1156
|
+
</fig-field>
|
|
1157
|
+
<fig-field direction="horizontal"
|
|
1158
|
+
style="width: 240px;">
|
|
1159
|
+
<label>Switch</label>
|
|
1160
|
+
<fig-switch></fig-switch>
|
|
1161
|
+
</fig-field>
|
|
1162
|
+
<fig-field direction="horizontal"
|
|
1163
|
+
style="width: 240px;">
|
|
1164
|
+
<label>Checkbox</label>
|
|
1165
|
+
<fig-checkbox></fig-checkbox>
|
|
1166
|
+
</fig-field>
|
|
1167
|
+
<fig-field direction="horizontal"
|
|
1168
|
+
style="width: 240px;">
|
|
1169
|
+
<label>Segmented</label>
|
|
1170
|
+
<fig-segmented-control>
|
|
1171
|
+
<fig-segment value="left">Left</fig-segment>
|
|
1172
|
+
<fig-segment value="center">Center</fig-segment>
|
|
1173
|
+
<fig-segment value="right">Right</fig-segment>
|
|
1174
|
+
</fig-segmented-control>
|
|
1175
|
+
</fig-field>
|
|
1176
|
+
</section>
|
|
1177
|
+
<hr>
|
|
1178
|
+
|
|
1179
|
+
<!-- Fill Picker -->
|
|
1180
|
+
<section id="fill-picker">
|
|
1181
|
+
<h2>Fill Picker</h2>
|
|
1182
|
+
<p class="description">A comprehensive fill picker supporting solid colors, gradients, images, video, and
|
|
1183
|
+
webcam.</p>
|
|
1184
|
+
|
|
1185
|
+
<h3>Default (Auto-creates fig-chit)</h3>
|
|
1186
|
+
<fig-fill-picker></fig-fill-picker>
|
|
1187
|
+
|
|
1188
|
+
<h3>With Initial Color</h3>
|
|
1189
|
+
<fig-fill-picker value='{"type":"solid","color":"#FF6B6B"}'></fig-fill-picker>
|
|
1190
|
+
|
|
1191
|
+
<h3>With Gradient</h3>
|
|
1192
|
+
<fig-fill-picker
|
|
1193
|
+
value='{"type":"gradient","gradient":{"type":"linear","angle":90,"stops":[{"position":0,"color":"#667eea","opacity":100},{"position":100,"color":"#764ba2","opacity":100}]}}'></fig-fill-picker>
|
|
1194
|
+
|
|
1195
|
+
<h3>With fig-chit Child</h3>
|
|
1196
|
+
<fig-fill-picker value='{"type":"solid","color":"#4ECDC4"}'>
|
|
1197
|
+
<fig-chit background="#4ECDC4"></fig-chit>
|
|
1198
|
+
</fig-fill-picker>
|
|
1199
|
+
|
|
1200
|
+
<h3>Custom Trigger</h3>
|
|
1201
|
+
<fig-fill-picker value='{"type":"solid","color":"#95E1D3"}'>
|
|
1202
|
+
<fig-button>Edit Fill</fig-button>
|
|
1203
|
+
</fig-fill-picker>
|
|
1204
|
+
|
|
1205
|
+
<h3>Without Alpha</h3>
|
|
1206
|
+
<fig-fill-picker alpha="false"
|
|
1207
|
+
value='{"type":"solid","color":"#F38181"}'></fig-fill-picker>
|
|
1208
|
+
|
|
1209
|
+
<h3>Disabled</h3>
|
|
1210
|
+
<fig-fill-picker disabled
|
|
1211
|
+
value='{"type":"solid","color":"#AA96DA"}'></fig-fill-picker>
|
|
1212
|
+
|
|
1213
|
+
<h3>Mode Lockdown</h3>
|
|
1214
|
+
<p class="description">Use the <code>mode</code> attribute to lock the picker to a single fill type. The
|
|
1215
|
+
dropdown is replaced with a label and tab switching is disabled.</p>
|
|
1216
|
+
|
|
1217
|
+
<h4>Solid Only</h4>
|
|
1218
|
+
<fig-fill-picker mode="solid"></fig-fill-picker>
|
|
1219
|
+
|
|
1220
|
+
<h4>Gradient Only</h4>
|
|
1221
|
+
<fig-fill-picker mode="gradient"></fig-fill-picker>
|
|
1222
|
+
|
|
1223
|
+
<h4>Image Only</h4>
|
|
1224
|
+
<fig-fill-picker mode="image"></fig-fill-picker>
|
|
1225
|
+
|
|
1226
|
+
<h3>Event Listening</h3>
|
|
1227
|
+
<fig-fill-picker id="fill-picker-events"
|
|
1228
|
+
value='{"type":"solid","color":"#FCBAD3"}'></fig-fill-picker>
|
|
1229
|
+
<p class="description"
|
|
1230
|
+
id="fill-picker-output">Click the swatch above and change the color to see events.</p>
|
|
1231
|
+
<script>
|
|
1232
|
+
document.getElementById('fill-picker-events').addEventListener('input', (e) => {
|
|
1233
|
+
document.getElementById('fill-picker-output').textContent = 'Input: ' + JSON.stringify(e.detail);
|
|
1234
|
+
});
|
|
1235
|
+
document.getElementById('fill-picker-events').addEventListener('change', (e) => {
|
|
1236
|
+
document.getElementById('fill-picker-output').textContent = 'Change: ' + JSON.stringify(e.detail);
|
|
1237
|
+
});
|
|
1238
|
+
</script>
|
|
1239
|
+
</section>
|
|
1240
|
+
<hr>
|
|
1241
|
+
|
|
1242
|
+
<!-- Header -->
|
|
1243
|
+
<section id="header">
|
|
1244
|
+
<h2>Header</h2>
|
|
1245
|
+
<p class="description">A header component for sections or panels.</p>
|
|
1246
|
+
|
|
1247
|
+
<h3>Default</h3>
|
|
1248
|
+
<fig-header>
|
|
1249
|
+
<h2>Section Title</h2>
|
|
1250
|
+
</fig-header>
|
|
1251
|
+
|
|
1252
|
+
<h3>With Subtitle</h3>
|
|
1253
|
+
<fig-header>
|
|
1254
|
+
<h2><label>Category/</label>Section Title</h2>
|
|
1255
|
+
</fig-header>
|
|
1256
|
+
|
|
1257
|
+
<h3>With Actions</h3>
|
|
1258
|
+
<fig-header>
|
|
1259
|
+
<h2>Settings</h2>
|
|
1260
|
+
<fig-button variant="ghost"
|
|
1261
|
+
icon="true"
|
|
1262
|
+
style="position: absolute; right: 0;">
|
|
1263
|
+
<svg width="16"
|
|
1264
|
+
height="16"
|
|
1265
|
+
viewBox="0 0 16 16"
|
|
1266
|
+
fill="none"
|
|
1267
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
1268
|
+
<path fill-rule="evenodd"
|
|
1269
|
+
clip-rule="evenodd"
|
|
1270
|
+
d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
|
|
1271
|
+
fill="currentColor" />
|
|
1272
|
+
</svg>
|
|
1273
|
+
</fig-button>
|
|
1274
|
+
</fig-header>
|
|
1275
|
+
|
|
1276
|
+
<h3>With Spinner</h3>
|
|
1277
|
+
<fig-header>
|
|
1278
|
+
<h2>Loading...</h2>
|
|
1279
|
+
<fig-spinner></fig-spinner>
|
|
1280
|
+
</fig-header>
|
|
1281
|
+
</section>
|
|
1282
|
+
<hr>
|
|
1283
|
+
|
|
1284
|
+
<!-- Image -->
|
|
1285
|
+
<section id="image">
|
|
1286
|
+
<h2>Image</h2>
|
|
1287
|
+
<p class="description">An image component with upload and download capabilities.</p>
|
|
1288
|
+
|
|
1289
|
+
<h3>Sizes</h3>
|
|
1290
|
+
<fig-field direction="horizontal">
|
|
1291
|
+
<label>Default</label>
|
|
1292
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
|
|
1293
|
+
</fig-field>
|
|
1294
|
+
<fig-field direction="horizontal">
|
|
1295
|
+
<label>Medium</label>
|
|
1296
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
1297
|
+
size="medium"></fig-image>
|
|
1298
|
+
</fig-field>
|
|
1299
|
+
<fig-field direction="horizontal">
|
|
1300
|
+
<label>Large</label>
|
|
1301
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
1302
|
+
size="large"></fig-image>
|
|
1303
|
+
</fig-field>
|
|
1304
|
+
|
|
1305
|
+
<h3>With Upload</h3>
|
|
1306
|
+
<fig-image upload="true"
|
|
1307
|
+
label="Upload image"
|
|
1308
|
+
size="large"></fig-image>
|
|
1309
|
+
|
|
1310
|
+
<h3>With Download</h3>
|
|
1311
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
1312
|
+
download="true"
|
|
1313
|
+
size="large"></fig-image>
|
|
1314
|
+
</section>
|
|
1315
|
+
<hr>
|
|
1316
|
+
|
|
1317
|
+
<!-- Input Angle -->
|
|
1318
|
+
<section id="input-angle">
|
|
1319
|
+
<h2>Input Angle</h2>
|
|
1320
|
+
<p class="description">An angle input with a circular dial interface.</p>
|
|
1321
|
+
|
|
1322
|
+
<h3>Default</h3>
|
|
1323
|
+
<fig-input-angle value="0"></fig-input-angle>
|
|
1324
|
+
|
|
1325
|
+
<h3>With Text Display</h3>
|
|
1326
|
+
<fig-input-angle text="true"
|
|
1327
|
+
value="45"></fig-input-angle>
|
|
1328
|
+
|
|
1329
|
+
<h3>Different Values</h3>
|
|
1330
|
+
<hstack>
|
|
1331
|
+
<fig-input-angle text="true"
|
|
1332
|
+
value="0"></fig-input-angle>
|
|
1333
|
+
<fig-input-angle text="true"
|
|
1334
|
+
value="90"></fig-input-angle>
|
|
1335
|
+
<fig-input-angle text="true"
|
|
1336
|
+
value="180"></fig-input-angle>
|
|
1337
|
+
<fig-input-angle text="true"
|
|
1338
|
+
value="270"></fig-input-angle>
|
|
1339
|
+
</hstack>
|
|
1340
|
+
|
|
1341
|
+
<h3>Unbounded (no min/max — supports winding)</h3>
|
|
1342
|
+
<hstack>
|
|
1343
|
+
<fig-input-angle text="true"
|
|
1344
|
+
value="0"></fig-input-angle>
|
|
1345
|
+
<fig-input-angle text="true"
|
|
1346
|
+
value="720"></fig-input-angle>
|
|
1347
|
+
<fig-input-angle text="true"
|
|
1348
|
+
value="-90"></fig-input-angle>
|
|
1349
|
+
</hstack>
|
|
1350
|
+
|
|
1351
|
+
<h3>Show Rotations (unbounded with rotation count)</h3>
|
|
1352
|
+
<hstack>
|
|
1353
|
+
<fig-input-angle text="true"
|
|
1354
|
+
show-rotations="true"
|
|
1355
|
+
value="0"></fig-input-angle>
|
|
1356
|
+
<fig-input-angle text="true"
|
|
1357
|
+
show-rotations="true"
|
|
1358
|
+
value="720"></fig-input-angle>
|
|
1359
|
+
<fig-input-angle text="true"
|
|
1360
|
+
show-rotations="true"
|
|
1361
|
+
value="1080"></fig-input-angle>
|
|
1362
|
+
</hstack>
|
|
1363
|
+
|
|
1364
|
+
<h3>Clamped (min/max)</h3>
|
|
1365
|
+
<hstack>
|
|
1366
|
+
<fig-input-angle text="true"
|
|
1367
|
+
value="90"
|
|
1368
|
+
min="0"
|
|
1369
|
+
max="180"></fig-input-angle>
|
|
1370
|
+
<fig-input-angle text="true"
|
|
1371
|
+
value="45"
|
|
1372
|
+
min="0"
|
|
1373
|
+
max="360"></fig-input-angle>
|
|
1374
|
+
</hstack>
|
|
1375
|
+
|
|
1376
|
+
<h3>Radians</h3>
|
|
1377
|
+
<hstack>
|
|
1378
|
+
<fig-input-angle text="true"
|
|
1379
|
+
units="rad"
|
|
1380
|
+
value="3.14159"></fig-input-angle>
|
|
1381
|
+
<fig-input-angle text="true"
|
|
1382
|
+
units="rad"
|
|
1383
|
+
value="1.5708"></fig-input-angle>
|
|
1384
|
+
</hstack>
|
|
1385
|
+
|
|
1386
|
+
<h3>Turns</h3>
|
|
1387
|
+
<hstack>
|
|
1388
|
+
<fig-input-angle text="true"
|
|
1389
|
+
units="turn"
|
|
1390
|
+
value="0.5"></fig-input-angle>
|
|
1391
|
+
<fig-input-angle text="true"
|
|
1392
|
+
units="turn"
|
|
1393
|
+
value="2.5"></fig-input-angle>
|
|
1394
|
+
</hstack>
|
|
1395
|
+
|
|
1396
|
+
<h3>Width Test (Resizable)</h3>
|
|
1397
|
+
<p class="description">Drag the right edge to test at different widths.</p>
|
|
1398
|
+
<div class="resize-test"
|
|
1399
|
+
style="width: 240px;">
|
|
1400
|
+
<fig-field direction="horizontal">
|
|
1401
|
+
<label>Angle</label>
|
|
1402
|
+
<fig-input-angle text="true"
|
|
1403
|
+
value="45"></fig-input-angle>
|
|
1404
|
+
</fig-field>
|
|
1405
|
+
</div>
|
|
1406
|
+
</section>
|
|
1407
|
+
<hr>
|
|
1408
|
+
|
|
1409
|
+
<!-- Input Color -->
|
|
1410
|
+
<section id="input-color">
|
|
1411
|
+
<h2>Input Color</h2>
|
|
1412
|
+
<p class="description">A color picker input with optional text and alpha controls.</p>
|
|
1413
|
+
|
|
1414
|
+
<h3>Swatch Only</h3>
|
|
1415
|
+
<fig-input-color value="#FF0000"></fig-input-color>
|
|
1416
|
+
|
|
1417
|
+
<h3>With Text</h3>
|
|
1418
|
+
<fig-input-color value="#00FF00"
|
|
1419
|
+
text="true"></fig-input-color>
|
|
1420
|
+
|
|
1421
|
+
<h3>With Alpha</h3>
|
|
1422
|
+
<fig-input-color value="#0000FF"
|
|
1423
|
+
alpha="true"
|
|
1424
|
+
text="true"></fig-input-color>
|
|
1425
|
+
|
|
1426
|
+
<h3>Full Width</h3>
|
|
1427
|
+
<fig-input-color value="#9747FF"
|
|
1428
|
+
alpha="true"
|
|
1429
|
+
text="true"
|
|
1430
|
+
full></fig-input-color>
|
|
1431
|
+
|
|
1432
|
+
<h3>Various Colors</h3>
|
|
1433
|
+
<hstack>
|
|
1434
|
+
<fig-input-color value="#FF000066"></fig-input-color>
|
|
1435
|
+
<fig-input-color value="#00FF0099"></fig-input-color>
|
|
1436
|
+
<fig-input-color value="#0000FFCC"></fig-input-color>
|
|
1437
|
+
<fig-input-color value="#FFFF00"></fig-input-color>
|
|
1438
|
+
<fig-input-color value="#FF00FF"></fig-input-color>
|
|
1439
|
+
<fig-input-color value="#00FFFF"></fig-input-color>
|
|
1440
|
+
</hstack>
|
|
1441
|
+
|
|
1442
|
+
<h3>Picker Attribute</h3>
|
|
1443
|
+
<p class="description">Use <code>picker="figma"</code> to use the FigFillPicker instead of the native color
|
|
1444
|
+
picker. Default is <code>picker="native"</code>.</p>
|
|
1445
|
+
|
|
1446
|
+
<h4>Native Picker (default)</h4>
|
|
1447
|
+
<fig-input-color value="#9747FF"
|
|
1448
|
+
text="true"></fig-input-color>
|
|
1449
|
+
|
|
1450
|
+
<h4>Figma Picker</h4>
|
|
1451
|
+
<fig-input-color value="#9747FF"
|
|
1452
|
+
text="true"
|
|
1453
|
+
picker="figma"></fig-input-color>
|
|
1454
|
+
|
|
1455
|
+
<h4>Figma Picker with Alpha</h4>
|
|
1456
|
+
<fig-input-color value="#9747FF"
|
|
1457
|
+
text="true"
|
|
1458
|
+
alpha="true"
|
|
1459
|
+
picker="figma"></fig-input-color>
|
|
1460
|
+
|
|
1461
|
+
<h4>No Picker (text input only)</h4>
|
|
1462
|
+
<fig-input-color value="#9747FF"
|
|
1463
|
+
text="true"
|
|
1464
|
+
picker="false"></fig-input-color>
|
|
1465
|
+
|
|
1466
|
+
<h4>No Picker with Alpha</h4>
|
|
1467
|
+
<fig-input-color value="#9747FF"
|
|
1468
|
+
text="true"
|
|
1469
|
+
alpha="true"
|
|
1470
|
+
picker="false"></fig-input-color>
|
|
1471
|
+
|
|
1472
|
+
<h3>Width Test (Resizable)</h3>
|
|
1473
|
+
<p class="description">Drag the right edge of each container to test at different widths.</p>
|
|
1474
|
+
|
|
1475
|
+
<style>
|
|
1476
|
+
.resize-test {
|
|
1477
|
+
resize: horizontal;
|
|
1478
|
+
overflow: hidden;
|
|
1479
|
+
border: 1px dashed var(--figma-color-border);
|
|
1480
|
+
padding: 0.5rem;
|
|
1481
|
+
margin-bottom: 0.75rem;
|
|
1482
|
+
min-width: 60px;
|
|
1483
|
+
max-width: 100%;
|
|
1484
|
+
width: 200px;
|
|
1485
|
+
border-radius: 4px;
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.resize-test fig-input-color {
|
|
1489
|
+
width: 100%;
|
|
1490
|
+
}
|
|
1491
|
+
|
|
1492
|
+
.resize-test-label {
|
|
1493
|
+
font-size: 0.7rem;
|
|
1494
|
+
color: var(--figma-color-text-tertiary);
|
|
1495
|
+
margin-bottom: 0.25rem;
|
|
1496
|
+
font-family: monospace;
|
|
1497
|
+
}
|
|
1498
|
+
</style>
|
|
1499
|
+
|
|
1500
|
+
<h4>Swatch Only</h4>
|
|
1501
|
+
<div class="resize-test">
|
|
1502
|
+
<div class="resize-test-label">value="#FF5733"</div>
|
|
1503
|
+
<fig-input-color value="#FF5733"></fig-input-color>
|
|
1504
|
+
</div>
|
|
1505
|
+
|
|
1506
|
+
<h4>Text Only</h4>
|
|
1507
|
+
<div class="resize-test">
|
|
1508
|
+
<div class="resize-test-label">text="true"</div>
|
|
1509
|
+
<fig-input-color value="#33FF57"
|
|
1510
|
+
text="true"></fig-input-color>
|
|
1511
|
+
</div>
|
|
1512
|
+
|
|
1513
|
+
<h4>Text + Alpha</h4>
|
|
1514
|
+
<div class="resize-test">
|
|
1515
|
+
<div class="resize-test-label">text="true" alpha="true"</div>
|
|
1516
|
+
<fig-input-color value="#3357FF"
|
|
1517
|
+
text="true"
|
|
1518
|
+
alpha="true"></fig-input-color>
|
|
1519
|
+
</div>
|
|
1520
|
+
|
|
1521
|
+
<h4>Picker="figma"</h4>
|
|
1522
|
+
<div class="resize-test">
|
|
1523
|
+
<div class="resize-test-label">picker="figma"</div>
|
|
1524
|
+
<fig-input-color value="#FF33A1"
|
|
1525
|
+
picker="figma"></fig-input-color>
|
|
1526
|
+
</div>
|
|
1527
|
+
|
|
1528
|
+
<h4>Picker="figma" + Text</h4>
|
|
1529
|
+
<div class="resize-test">
|
|
1530
|
+
<div class="resize-test-label">picker="figma" text="true"</div>
|
|
1531
|
+
<fig-input-color value="#A133FF"
|
|
1532
|
+
picker="figma"
|
|
1533
|
+
text="true"></fig-input-color>
|
|
1534
|
+
</div>
|
|
1535
|
+
|
|
1536
|
+
<h4>Picker="figma" + Text + Alpha</h4>
|
|
1537
|
+
<div class="resize-test">
|
|
1538
|
+
<div class="resize-test-label">picker="figma" text="true" alpha="true"</div>
|
|
1539
|
+
<fig-input-color value="#33FFA1"
|
|
1540
|
+
picker="figma"
|
|
1541
|
+
text="true"
|
|
1542
|
+
alpha="true"></fig-input-color>
|
|
1543
|
+
</div>
|
|
1544
|
+
|
|
1545
|
+
<h4>Picker="false" + Text</h4>
|
|
1546
|
+
<div class="resize-test">
|
|
1547
|
+
<div class="resize-test-label">picker="false" text="true"</div>
|
|
1548
|
+
<fig-input-color value="#FFD700"
|
|
1549
|
+
picker="false"
|
|
1550
|
+
text="true"></fig-input-color>
|
|
1551
|
+
</div>
|
|
1552
|
+
|
|
1553
|
+
<h4>Picker="false" + Text + Alpha</h4>
|
|
1554
|
+
<div class="resize-test">
|
|
1555
|
+
<div class="resize-test-label">picker="false" text="true" alpha="true"</div>
|
|
1556
|
+
<fig-input-color value="#00CED1"
|
|
1557
|
+
picker="false"
|
|
1558
|
+
text="true"
|
|
1559
|
+
alpha="true"></fig-input-color>
|
|
1560
|
+
</div>
|
|
1561
|
+
|
|
1562
|
+
<h4>Full Attribute</h4>
|
|
1563
|
+
<div class="resize-test">
|
|
1564
|
+
<div class="resize-test-label">text="true" alpha="true" full</div>
|
|
1565
|
+
<fig-input-color value="#DC143C"
|
|
1566
|
+
text="true"
|
|
1567
|
+
alpha="true"
|
|
1568
|
+
full></fig-input-color>
|
|
1569
|
+
</div>
|
|
1570
|
+
|
|
1571
|
+
<h4>With Alpha in Value (#RRGGBBAA)</h4>
|
|
1572
|
+
<div class="resize-test">
|
|
1573
|
+
<div class="resize-test-label">value="#8B008B80" text="true" alpha="true"</div>
|
|
1574
|
+
<fig-input-color value="#8B008B80"
|
|
1575
|
+
text="true"
|
|
1576
|
+
alpha="true"></fig-input-color>
|
|
1577
|
+
</div>
|
|
1578
|
+
|
|
1579
|
+
<h4>Picker="native" + Text + Alpha</h4>
|
|
1580
|
+
<div class="resize-test">
|
|
1581
|
+
<div class="resize-test-label">picker="native" text="true" alpha="true"</div>
|
|
1582
|
+
<fig-input-color value="#20B2AA"
|
|
1583
|
+
picker="native"
|
|
1584
|
+
text="true"
|
|
1585
|
+
alpha="true"></fig-input-color>
|
|
1586
|
+
</div>
|
|
1587
|
+
|
|
1588
|
+
<h3>Event Listening</h3>
|
|
1589
|
+
<fig-input-color id="input-color-events"
|
|
1590
|
+
value="#FF6B6B"
|
|
1591
|
+
text="true"
|
|
1592
|
+
alpha="true"
|
|
1593
|
+
picker="figma"></fig-input-color>
|
|
1594
|
+
<p class="description"
|
|
1595
|
+
id="input-color-output">Change the color above to see events.</p>
|
|
1596
|
+
<script>
|
|
1597
|
+
document.getElementById('input-color-events').addEventListener('input', (e) => {
|
|
1598
|
+
const el = e.target;
|
|
1599
|
+
document.getElementById('input-color-output').textContent =
|
|
1600
|
+
`Input: ${el.value} | Hex: ${el.hexOpaque} | Alpha: ${el.alpha}%`;
|
|
1601
|
+
});
|
|
1602
|
+
document.getElementById('input-color-events').addEventListener('change', (e) => {
|
|
1603
|
+
const el = e.target;
|
|
1604
|
+
document.getElementById('input-color-output').textContent =
|
|
1605
|
+
`Change: ${el.value} | Hex: ${el.hexOpaque} | Alpha: ${el.alpha}%`;
|
|
1606
|
+
});
|
|
1607
|
+
</script>
|
|
1608
|
+
</section>
|
|
1609
|
+
<hr>
|
|
1610
|
+
|
|
1611
|
+
<!-- Input Fill -->
|
|
1612
|
+
<section id="input-fill">
|
|
1613
|
+
<h2>Input Fill</h2>
|
|
1614
|
+
<p class="description">A fill input that supports solid colors, gradients, images, and videos. The UI adapts
|
|
1615
|
+
based on the fill type.</p>
|
|
1616
|
+
|
|
1617
|
+
<h3>Solid Color (default)</h3>
|
|
1618
|
+
<fig-input-fill value='{"type":"solid","color":"#9747FF","alpha":1}'></fig-input-fill>
|
|
1619
|
+
|
|
1620
|
+
<h3>Solid Color with 50% Opacity</h3>
|
|
1621
|
+
<fig-input-fill value='{"type":"solid","color":"#FF6B6B","alpha":0.5}'></fig-input-fill>
|
|
1622
|
+
|
|
1623
|
+
<h3>Linear Gradient</h3>
|
|
1624
|
+
<fig-input-fill
|
|
1625
|
+
value='{"type":"gradient","gradient":{"type":"linear","angle":180,"stops":[{"position":0,"color":"#667eea","opacity":100},{"position":100,"color":"#764ba2","opacity":100}]}}'></fig-input-fill>
|
|
1626
|
+
|
|
1627
|
+
<h3>Radial Gradient</h3>
|
|
1628
|
+
<fig-input-fill
|
|
1629
|
+
value='{"type":"gradient","gradient":{"type":"radial","centerX":50,"centerY":50,"stops":[{"position":0,"color":"#ff6b6b","opacity":100},{"position":100,"color":"#4ecdc4","opacity":100}]}}'></fig-input-fill>
|
|
1630
|
+
|
|
1631
|
+
<h3>Angular Gradient</h3>
|
|
1632
|
+
<fig-input-fill
|
|
1633
|
+
value='{"type":"gradient","gradient":{"type":"angular","stops":[{"position":0,"color":"#ff0000","opacity":100},{"position":50,"color":"#00ff00","opacity":100},{"position":100,"color":"#0000ff","opacity":100}]}}'></fig-input-fill>
|
|
1634
|
+
|
|
1635
|
+
<h3>Image Fill</h3>
|
|
1636
|
+
<fig-input-fill
|
|
1637
|
+
value='{"type":"image","image":{"url":"https://avatars.githubusercontent.com/u/12345678?v=4","scaleMode":"fill","scale":50,"opacity":1}}'></fig-input-fill>
|
|
1638
|
+
|
|
1639
|
+
<h3>Image Fill (50% Opacity)</h3>
|
|
1640
|
+
<fig-input-fill
|
|
1641
|
+
value='{"type":"image","image":{"url":"https://avatars.githubusercontent.com/u/12345678?v=4","scaleMode":"fill","scale":50,"opacity":0.5}}'></fig-input-fill>
|
|
1642
|
+
|
|
1643
|
+
<h3>Video Fill</h3>
|
|
1644
|
+
<fig-input-fill
|
|
1645
|
+
value='{"type":"video","video":{"url":null,"scaleMode":"fill","opacity":1}}'></fig-input-fill>
|
|
1646
|
+
|
|
1647
|
+
<h3>Webcam Fill</h3>
|
|
1648
|
+
<fig-input-fill value='{"type":"webcam","webcam":{"opacity":1}}'></fig-input-fill>
|
|
1649
|
+
|
|
1650
|
+
<h3>Disabled</h3>
|
|
1651
|
+
<fig-input-fill disabled
|
|
1652
|
+
value='{"type":"solid","color":"#AA96DA","alpha":1}'></fig-input-fill>
|
|
1653
|
+
|
|
1654
|
+
<h3>Event Listening</h3>
|
|
1655
|
+
<fig-input-fill id="input-fill-events"
|
|
1656
|
+
value='{"type":"solid","color":"#4ECDC4","alpha":1}'></fig-input-fill>
|
|
1657
|
+
<p class="description"
|
|
1658
|
+
id="input-fill-output">Change the fill above to see events.</p>
|
|
1659
|
+
<script>
|
|
1660
|
+
document.getElementById('input-fill-events').addEventListener('input', (e) => {
|
|
1661
|
+
document.getElementById('input-fill-output').textContent =
|
|
1662
|
+
`Input: ${JSON.stringify(e.detail)}`;
|
|
1663
|
+
});
|
|
1664
|
+
document.getElementById('input-fill-events').addEventListener('change', (e) => {
|
|
1665
|
+
document.getElementById('input-fill-output').textContent =
|
|
1666
|
+
`Change: ${JSON.stringify(e.detail)}`;
|
|
1667
|
+
});
|
|
1668
|
+
</script>
|
|
1669
|
+
</section>
|
|
1670
|
+
<hr>
|
|
1671
|
+
|
|
1672
|
+
<!-- Input Joystick -->
|
|
1673
|
+
<section id="input-joystick">
|
|
1674
|
+
<h2>Input Joystick</h2>
|
|
1675
|
+
<p class="description">A 2D joystick input for X/Y coordinate values.</p>
|
|
1676
|
+
|
|
1677
|
+
<h3>Default (centered)</h3>
|
|
1678
|
+
<fig-input-joystick value="50,50"></fig-input-joystick>
|
|
1679
|
+
|
|
1680
|
+
<h3>With Text Display</h3>
|
|
1681
|
+
<fig-input-joystick text="true"
|
|
1682
|
+
value="0,0"></fig-input-joystick>
|
|
1683
|
+
|
|
1684
|
+
<h3>With Initial Value (25%, 75%)</h3>
|
|
1685
|
+
<fig-input-joystick text="true"
|
|
1686
|
+
value="25,75"></fig-input-joystick>
|
|
1687
|
+
|
|
1688
|
+
<h3>Screen Coordinates (default: 0,0 = top-left)</h3>
|
|
1689
|
+
<fig-input-joystick text="true"
|
|
1690
|
+
coordinates="screen"
|
|
1691
|
+
value="0,0"></fig-input-joystick>
|
|
1692
|
+
|
|
1693
|
+
<h3>Math Coordinates (0,0 = bottom-left)</h3>
|
|
1694
|
+
<fig-input-joystick text="true"
|
|
1695
|
+
coordinates="math"
|
|
1696
|
+
value="0,0"></fig-input-joystick>
|
|
1697
|
+
|
|
1698
|
+
<h3>With Field Label</h3>
|
|
1699
|
+
<fig-field direction="horizontal"
|
|
1700
|
+
style="width: 240px;">
|
|
1701
|
+
<label>Origin</label>
|
|
1702
|
+
<fig-input-joystick text="true"
|
|
1703
|
+
value="50,50"></fig-input-joystick>
|
|
1704
|
+
</fig-field>
|
|
1705
|
+
</section>
|
|
1706
|
+
<hr>
|
|
1707
|
+
|
|
1708
|
+
<!-- Input Number -->
|
|
1709
|
+
<section id="input-number">
|
|
1710
|
+
<h2>Input Number</h2>
|
|
1711
|
+
<p class="description">A numeric input with optional units and constraints.</p>
|
|
1712
|
+
|
|
1713
|
+
<h3>Basic</h3>
|
|
1714
|
+
<fig-input-number value="100"></fig-input-number>
|
|
1715
|
+
|
|
1716
|
+
<h3>With Units</h3>
|
|
1717
|
+
<fig-field direction="horizontal">
|
|
1718
|
+
<label>Percentage</label>
|
|
1719
|
+
<fig-input-number value="50"
|
|
1720
|
+
units="%"></fig-input-number>
|
|
1721
|
+
</fig-field>
|
|
1722
|
+
<fig-field direction="horizontal">
|
|
1723
|
+
<label>Degrees</label>
|
|
1724
|
+
<fig-input-number value="45"
|
|
1725
|
+
units="°"
|
|
1726
|
+
min="0"
|
|
1727
|
+
max="360"></fig-input-number>
|
|
1728
|
+
</fig-field>
|
|
1729
|
+
<fig-field direction="horizontal">
|
|
1730
|
+
<label>Pixels</label>
|
|
1731
|
+
<fig-input-number value="24"
|
|
1732
|
+
units="px"
|
|
1733
|
+
min="0"
|
|
1734
|
+
max="1000"></fig-input-number>
|
|
1735
|
+
</fig-field>
|
|
1736
|
+
<fig-field direction="horizontal">
|
|
1737
|
+
<label>Currency (prefix)</label>
|
|
1738
|
+
<fig-input-number value="99.99"
|
|
1739
|
+
units="$"
|
|
1740
|
+
unit-position="prefix"
|
|
1741
|
+
step="0.01"></fig-input-number>
|
|
1742
|
+
</fig-field>
|
|
1743
|
+
|
|
1744
|
+
<h3>With Transform</h3>
|
|
1745
|
+
<fig-input-number value="0.5"
|
|
1746
|
+
units="%"
|
|
1747
|
+
transform="100"
|
|
1748
|
+
min="0"
|
|
1749
|
+
max="1"
|
|
1750
|
+
step="0.01"></fig-input-number>
|
|
1751
|
+
|
|
1752
|
+
<h3>With Constraints</h3>
|
|
1753
|
+
<fig-input-number value="25"
|
|
1754
|
+
units="px"
|
|
1755
|
+
min="0"
|
|
1756
|
+
max="100"
|
|
1757
|
+
step="5"></fig-input-number>
|
|
1758
|
+
|
|
1759
|
+
<h3>With Steppers</h3>
|
|
1760
|
+
<fig-field direction="horizontal">
|
|
1761
|
+
<label>Basic</label>
|
|
1762
|
+
<fig-input-number value="10"
|
|
1763
|
+
steppers="true"></fig-input-number>
|
|
1764
|
+
</fig-field>
|
|
1765
|
+
<fig-field direction="horizontal">
|
|
1766
|
+
<label>With constraints</label>
|
|
1767
|
+
<fig-input-number value="50"
|
|
1768
|
+
units="%"
|
|
1769
|
+
min="0"
|
|
1770
|
+
max="100"
|
|
1771
|
+
step="5"
|
|
1772
|
+
steppers="true"></fig-input-number>
|
|
1773
|
+
</fig-field>
|
|
1774
|
+
|
|
1775
|
+
<h3>States</h3>
|
|
1776
|
+
<fig-field direction="horizontal">
|
|
1777
|
+
<label>Disabled</label>
|
|
1778
|
+
<fig-input-number value="75"
|
|
1779
|
+
units="%"
|
|
1780
|
+
disabled></fig-input-number>
|
|
1781
|
+
</fig-field>
|
|
1782
|
+
<fig-field direction="horizontal">
|
|
1783
|
+
<label>With placeholder</label>
|
|
1784
|
+
<fig-input-number placeholder="Enter value"
|
|
1785
|
+
units="%"></fig-input-number>
|
|
1786
|
+
</fig-field>
|
|
1787
|
+
|
|
1788
|
+
<h3>With Slots</h3>
|
|
1789
|
+
<fig-field direction="horizontal">
|
|
1790
|
+
<label>Append slot</label>
|
|
1791
|
+
<fig-input-number value="50"
|
|
1792
|
+
min="0"
|
|
1793
|
+
max="100">
|
|
1794
|
+
<span slot="append">%</span>
|
|
1795
|
+
</fig-input-number>
|
|
1796
|
+
</fig-field>
|
|
1797
|
+
<fig-field direction="horizontal">
|
|
1798
|
+
<label>Prepend slot</label>
|
|
1799
|
+
<fig-input-number value="100">
|
|
1800
|
+
<span slot="prepend">X</span>
|
|
1801
|
+
</fig-input-number>
|
|
1802
|
+
</fig-field>
|
|
1803
|
+
</section>
|
|
1804
|
+
<hr>
|
|
1805
|
+
|
|
1806
|
+
<!-- Input Text -->
|
|
1807
|
+
<section id="input-text">
|
|
1808
|
+
<h2>Input Text</h2>
|
|
1809
|
+
<p class="description">A text input with various types and configurations.</p>
|
|
1810
|
+
|
|
1811
|
+
<h3>Basic</h3>
|
|
1812
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
1813
|
+
|
|
1814
|
+
<h3>With Value</h3>
|
|
1815
|
+
<fig-input-text value="Hello World"></fig-input-text>
|
|
1816
|
+
|
|
1817
|
+
<h3>Types</h3>
|
|
1818
|
+
<fig-field direction="horizontal">
|
|
1819
|
+
<label>Text (default)</label>
|
|
1820
|
+
<fig-input-text placeholder="Text input"></fig-input-text>
|
|
1821
|
+
</fig-field>
|
|
1822
|
+
<fig-field direction="horizontal">
|
|
1823
|
+
<label>Password</label>
|
|
1824
|
+
<fig-input-text type="password"
|
|
1825
|
+
placeholder="Password"></fig-input-text>
|
|
1826
|
+
</fig-field>
|
|
1827
|
+
<fig-field direction="horizontal">
|
|
1828
|
+
<label>Number</label>
|
|
1829
|
+
<fig-input-text type="number"
|
|
1830
|
+
placeholder="Number"
|
|
1831
|
+
steppers="true"></fig-input-text>
|
|
1832
|
+
</fig-field>
|
|
1833
|
+
|
|
1834
|
+
<h3>Multiline</h3>
|
|
1835
|
+
<fig-input-text multiline="true"
|
|
1836
|
+
placeholder="Enter multiple lines..."
|
|
1837
|
+
autoresize="true"
|
|
1838
|
+
resizable="true"></fig-input-text>
|
|
1839
|
+
|
|
1840
|
+
<h3>States</h3>
|
|
1841
|
+
<fig-field direction="horizontal">
|
|
1842
|
+
<label>Disabled</label>
|
|
1843
|
+
<fig-input-text value="Disabled"
|
|
1844
|
+
disabled></fig-input-text>
|
|
1845
|
+
</fig-field>
|
|
1846
|
+
|
|
1847
|
+
<h3>With Slots</h3>
|
|
1848
|
+
<fig-field direction="horizontal">
|
|
1849
|
+
<label>Append</label>
|
|
1850
|
+
<fig-input-text value="90">
|
|
1851
|
+
<span slot="append">°</span>
|
|
1852
|
+
</fig-input-text>
|
|
1853
|
+
</fig-field>
|
|
1854
|
+
<fig-field direction="horizontal">
|
|
1855
|
+
<label>Prepend</label>
|
|
1856
|
+
<fig-input-text placeholder="Search">
|
|
1857
|
+
<span slot="prepend">🔍</span>
|
|
1858
|
+
</fig-input-text>
|
|
1859
|
+
</fig-field>
|
|
1860
|
+
|
|
1861
|
+
<h3>Full Width</h3>
|
|
1862
|
+
<fig-input-text placeholder="Full width input"
|
|
1863
|
+
full></fig-input-text>
|
|
1864
|
+
</section>
|
|
1865
|
+
<hr>
|
|
1866
|
+
|
|
1867
|
+
<!-- Layer -->
|
|
1868
|
+
<section id="layer">
|
|
1869
|
+
<h2>Layer</h2>
|
|
1870
|
+
<p class="description">A hierarchical layer component for displaying nested content with expand/collapse and
|
|
1871
|
+
visibility states.</p>
|
|
1872
|
+
|
|
1873
|
+
<h3>Single Layer</h3>
|
|
1874
|
+
<fig-layer>
|
|
1875
|
+
<div class="fig-layer-row">
|
|
1876
|
+
<svg class="fig-layer-icon"
|
|
1877
|
+
width="16"
|
|
1878
|
+
height="16"
|
|
1879
|
+
viewBox="0 0 16 16"
|
|
1880
|
+
fill="none">
|
|
1881
|
+
<rect x="4"
|
|
1882
|
+
y="4"
|
|
1883
|
+
width="8"
|
|
1884
|
+
height="8"
|
|
1885
|
+
rx="1"
|
|
1886
|
+
stroke="currentColor"
|
|
1887
|
+
stroke-width="1.25" />
|
|
1888
|
+
</svg>
|
|
1889
|
+
<label>Rectangle</label>
|
|
1890
|
+
</div>
|
|
1891
|
+
</fig-layer>
|
|
1892
|
+
|
|
1893
|
+
<h3>Without Icon</h3>
|
|
1894
|
+
<fig-layer>
|
|
1895
|
+
<div class="fig-layer-row">
|
|
1896
|
+
<label>Layer with no icon</label>
|
|
1897
|
+
</div>
|
|
1898
|
+
</fig-layer>
|
|
1899
|
+
|
|
1900
|
+
<h3>Nested Layers (Expanded)</h3>
|
|
1901
|
+
<fig-layer open>
|
|
1902
|
+
<div class="fig-layer-row">
|
|
1903
|
+
<svg class="fig-layer-icon"
|
|
1904
|
+
width="16"
|
|
1905
|
+
height="16"
|
|
1906
|
+
viewBox="0 0 16 16"
|
|
1907
|
+
fill="none">
|
|
1908
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
1909
|
+
stroke="currentColor"
|
|
1910
|
+
stroke-width="1.25" />
|
|
1911
|
+
</svg>
|
|
1912
|
+
<label>Frame</label>
|
|
1913
|
+
</div>
|
|
1914
|
+
<fig-layer>
|
|
1915
|
+
<div class="fig-layer-row">
|
|
1916
|
+
<svg class="fig-layer-icon"
|
|
1917
|
+
width="16"
|
|
1918
|
+
height="16"
|
|
1919
|
+
viewBox="0 0 16 16"
|
|
1920
|
+
fill="none">
|
|
1921
|
+
<rect x="4"
|
|
1922
|
+
y="4"
|
|
1923
|
+
width="8"
|
|
1924
|
+
height="8"
|
|
1925
|
+
rx="1"
|
|
1926
|
+
stroke="currentColor"
|
|
1927
|
+
stroke-width="1.25" />
|
|
1928
|
+
</svg>
|
|
1929
|
+
<label>Rectangle</label>
|
|
1930
|
+
</div>
|
|
1931
|
+
</fig-layer>
|
|
1932
|
+
<fig-layer>
|
|
1933
|
+
<div class="fig-layer-row">
|
|
1934
|
+
<svg class="fig-layer-icon"
|
|
1935
|
+
width="16"
|
|
1936
|
+
height="16"
|
|
1937
|
+
viewBox="0 0 16 16"
|
|
1938
|
+
fill="none">
|
|
1939
|
+
<circle cx="8"
|
|
1940
|
+
cy="8"
|
|
1941
|
+
r="4"
|
|
1942
|
+
stroke="currentColor"
|
|
1943
|
+
stroke-width="1.25" />
|
|
1944
|
+
</svg>
|
|
1945
|
+
<label>Ellipse</label>
|
|
1946
|
+
</div>
|
|
1947
|
+
</fig-layer>
|
|
1948
|
+
</fig-layer>
|
|
1949
|
+
|
|
1950
|
+
<h3>Collapsed Layers</h3>
|
|
1951
|
+
<fig-layer open="false">
|
|
1952
|
+
<div class="fig-layer-row">
|
|
1953
|
+
<svg class="fig-layer-icon"
|
|
1954
|
+
width="16"
|
|
1955
|
+
height="16"
|
|
1956
|
+
viewBox="0 0 16 16"
|
|
1957
|
+
fill="none">
|
|
1958
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
1959
|
+
stroke="currentColor"
|
|
1960
|
+
stroke-width="1.25" />
|
|
1961
|
+
</svg>
|
|
1962
|
+
<label>Group (collapsed - click chevron to expand)</label>
|
|
1963
|
+
</div>
|
|
1964
|
+
<fig-layer>
|
|
1965
|
+
<div class="fig-layer-row">
|
|
1966
|
+
<svg class="fig-layer-icon"
|
|
1967
|
+
width="16"
|
|
1968
|
+
height="16"
|
|
1969
|
+
viewBox="0 0 16 16"
|
|
1970
|
+
fill="none">
|
|
1971
|
+
<rect x="4"
|
|
1972
|
+
y="4"
|
|
1973
|
+
width="8"
|
|
1974
|
+
height="8"
|
|
1975
|
+
rx="1"
|
|
1976
|
+
stroke="currentColor"
|
|
1977
|
+
stroke-width="1.25" />
|
|
1978
|
+
</svg>
|
|
1979
|
+
<label>Hidden Child</label>
|
|
1980
|
+
</div>
|
|
1981
|
+
</fig-layer>
|
|
1982
|
+
</fig-layer>
|
|
1983
|
+
|
|
1984
|
+
<h3>Hidden Layer (Dimmed)</h3>
|
|
1985
|
+
<fig-layer visible="false">
|
|
1986
|
+
<div class="fig-layer-row">
|
|
1987
|
+
<svg class="fig-layer-icon"
|
|
1988
|
+
width="16"
|
|
1989
|
+
height="16"
|
|
1990
|
+
viewBox="0 0 16 16"
|
|
1991
|
+
fill="none">
|
|
1992
|
+
<rect x="4"
|
|
1993
|
+
y="4"
|
|
1994
|
+
width="8"
|
|
1995
|
+
height="8"
|
|
1996
|
+
rx="1"
|
|
1997
|
+
stroke="currentColor"
|
|
1998
|
+
stroke-width="1.25" />
|
|
1999
|
+
</svg>
|
|
2000
|
+
<label>Hidden Rectangle</label>
|
|
2001
|
+
</div>
|
|
2002
|
+
</fig-layer>
|
|
2003
|
+
|
|
2004
|
+
<h3>With Action Buttons</h3>
|
|
2005
|
+
<fig-layer>
|
|
2006
|
+
<div class="fig-layer-row">
|
|
2007
|
+
<svg class="fig-layer-icon"
|
|
2008
|
+
width="16"
|
|
2009
|
+
height="16"
|
|
2010
|
+
viewBox="0 0 16 16"
|
|
2011
|
+
fill="none">
|
|
2012
|
+
<rect x="4"
|
|
2013
|
+
y="4"
|
|
2014
|
+
width="8"
|
|
2015
|
+
height="8"
|
|
2016
|
+
rx="1"
|
|
2017
|
+
stroke="currentColor"
|
|
2018
|
+
stroke-width="1.25" />
|
|
2019
|
+
</svg>
|
|
2020
|
+
<label>Layer with actions (hover to see)</label>
|
|
2021
|
+
<div class="fig-layer-actions">
|
|
2022
|
+
<fig-button variant="ghost"
|
|
2023
|
+
type="toggle"
|
|
2024
|
+
icon>
|
|
2025
|
+
<svg width="16"
|
|
2026
|
+
height="16"
|
|
2027
|
+
viewBox="0 0 16 16"
|
|
2028
|
+
fill="none">
|
|
2029
|
+
<path d="M8 3V8M8 8V13M8 8H13M8 8H3"
|
|
2030
|
+
stroke="currentColor"
|
|
2031
|
+
stroke-width="1.5"
|
|
2032
|
+
stroke-linecap="round" />
|
|
2033
|
+
</svg>
|
|
2034
|
+
</fig-button>
|
|
2035
|
+
<fig-button variant="ghost"
|
|
2036
|
+
type="toggle"
|
|
2037
|
+
icon>
|
|
2038
|
+
<svg width="16"
|
|
2039
|
+
height="16"
|
|
2040
|
+
viewBox="0 0 16 16"
|
|
2041
|
+
fill="none">
|
|
2042
|
+
<path d="M4 8H12"
|
|
2043
|
+
stroke="currentColor"
|
|
2044
|
+
stroke-width="1.5"
|
|
2045
|
+
stroke-linecap="round" />
|
|
2046
|
+
</svg>
|
|
2047
|
+
</fig-button>
|
|
2048
|
+
</div>
|
|
2049
|
+
</div>
|
|
2050
|
+
</fig-layer>
|
|
2051
|
+
|
|
2052
|
+
<h3>Deep Nesting</h3>
|
|
2053
|
+
<fig-layer open>
|
|
2054
|
+
<div class="fig-layer-row">
|
|
2055
|
+
<svg class="fig-layer-icon"
|
|
2056
|
+
width="16"
|
|
2057
|
+
height="16"
|
|
2058
|
+
viewBox="0 0 16 16"
|
|
2059
|
+
fill="none">
|
|
2060
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
2061
|
+
stroke="currentColor"
|
|
2062
|
+
stroke-width="1.25" />
|
|
2063
|
+
</svg>
|
|
2064
|
+
<label>Page</label>
|
|
2065
|
+
</div>
|
|
2066
|
+
<fig-layer open>
|
|
2067
|
+
<div class="fig-layer-row">
|
|
2068
|
+
<svg class="fig-layer-icon"
|
|
2069
|
+
width="16"
|
|
2070
|
+
height="16"
|
|
2071
|
+
viewBox="0 0 16 16"
|
|
2072
|
+
fill="none">
|
|
2073
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
2074
|
+
stroke="currentColor"
|
|
2075
|
+
stroke-width="1.25" />
|
|
2076
|
+
</svg>
|
|
2077
|
+
<label>Frame</label>
|
|
2078
|
+
</div>
|
|
2079
|
+
<fig-layer>
|
|
2080
|
+
<div class="fig-layer-row">
|
|
2081
|
+
<svg class="fig-layer-icon"
|
|
2082
|
+
width="16"
|
|
2083
|
+
height="16"
|
|
2084
|
+
viewBox="0 0 16 16"
|
|
2085
|
+
fill="none">
|
|
2086
|
+
<rect x="4"
|
|
2087
|
+
y="4"
|
|
2088
|
+
width="8"
|
|
2089
|
+
height="8"
|
|
2090
|
+
rx="1"
|
|
2091
|
+
stroke="currentColor"
|
|
2092
|
+
stroke-width="1.25" />
|
|
2093
|
+
</svg>
|
|
2094
|
+
<label>Button</label>
|
|
2095
|
+
</div>
|
|
2096
|
+
</fig-layer>
|
|
2097
|
+
<fig-layer>
|
|
2098
|
+
<div class="fig-layer-row">
|
|
2099
|
+
<svg class="fig-layer-icon"
|
|
2100
|
+
width="16"
|
|
2101
|
+
height="16"
|
|
2102
|
+
viewBox="0 0 16 16"
|
|
2103
|
+
fill="none">
|
|
2104
|
+
<path d="M3 5H13M3 8H13M3 11H10"
|
|
2105
|
+
stroke="currentColor"
|
|
2106
|
+
stroke-width="1.25"
|
|
2107
|
+
stroke-linecap="round" />
|
|
2108
|
+
</svg>
|
|
2109
|
+
<label>Text</label>
|
|
2110
|
+
</div>
|
|
2111
|
+
</fig-layer>
|
|
2112
|
+
</fig-layer>
|
|
2113
|
+
</fig-layer>
|
|
2114
|
+
|
|
2115
|
+
<h2>Selected Layers</h2>
|
|
2116
|
+
|
|
2117
|
+
<h3>Single Layer (Selected)</h3>
|
|
2118
|
+
<fig-layer selected>
|
|
2119
|
+
<div class="fig-layer-row">
|
|
2120
|
+
<svg class="fig-layer-icon"
|
|
2121
|
+
width="16"
|
|
2122
|
+
height="16"
|
|
2123
|
+
viewBox="0 0 16 16"
|
|
2124
|
+
fill="none">
|
|
2125
|
+
<rect x="4"
|
|
2126
|
+
y="4"
|
|
2127
|
+
width="8"
|
|
2128
|
+
height="8"
|
|
2129
|
+
rx="1"
|
|
2130
|
+
stroke="currentColor"
|
|
2131
|
+
stroke-width="1.25" />
|
|
2132
|
+
</svg>
|
|
2133
|
+
<label>Rectangle</label>
|
|
2134
|
+
</div>
|
|
2135
|
+
</fig-layer>
|
|
2136
|
+
|
|
2137
|
+
<h3>Without Icon (Selected)</h3>
|
|
2138
|
+
<fig-layer selected>
|
|
2139
|
+
<div class="fig-layer-row">
|
|
2140
|
+
<label>Layer with no icon</label>
|
|
2141
|
+
</div>
|
|
2142
|
+
</fig-layer>
|
|
2143
|
+
|
|
2144
|
+
<h3>Nested Layers (Selected Parent)</h3>
|
|
2145
|
+
<fig-layer open
|
|
2146
|
+
selected>
|
|
2147
|
+
<div class="fig-layer-row">
|
|
2148
|
+
<svg class="fig-layer-icon"
|
|
2149
|
+
width="16"
|
|
2150
|
+
height="16"
|
|
2151
|
+
viewBox="0 0 16 16"
|
|
2152
|
+
fill="none">
|
|
2153
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
2154
|
+
stroke="currentColor"
|
|
2155
|
+
stroke-width="1.25" />
|
|
2156
|
+
</svg>
|
|
2157
|
+
<label>Frame</label>
|
|
2158
|
+
</div>
|
|
2159
|
+
<fig-layer>
|
|
2160
|
+
<div class="fig-layer-row">
|
|
2161
|
+
<svg class="fig-layer-icon"
|
|
2162
|
+
width="16"
|
|
2163
|
+
height="16"
|
|
2164
|
+
viewBox="0 0 16 16"
|
|
2165
|
+
fill="none">
|
|
2166
|
+
<rect x="4"
|
|
2167
|
+
y="4"
|
|
2168
|
+
width="8"
|
|
2169
|
+
height="8"
|
|
2170
|
+
rx="1"
|
|
2171
|
+
stroke="currentColor"
|
|
2172
|
+
stroke-width="1.25" />
|
|
2173
|
+
</svg>
|
|
2174
|
+
<label>Rectangle</label>
|
|
2175
|
+
</div>
|
|
2176
|
+
</fig-layer>
|
|
2177
|
+
<fig-layer>
|
|
2178
|
+
<div class="fig-layer-row">
|
|
2179
|
+
<svg class="fig-layer-icon"
|
|
2180
|
+
width="16"
|
|
2181
|
+
height="16"
|
|
2182
|
+
viewBox="0 0 16 16"
|
|
2183
|
+
fill="none">
|
|
2184
|
+
<circle cx="8"
|
|
2185
|
+
cy="8"
|
|
2186
|
+
r="4"
|
|
2187
|
+
stroke="currentColor"
|
|
2188
|
+
stroke-width="1.25" />
|
|
2189
|
+
</svg>
|
|
2190
|
+
<label>Ellipse</label>
|
|
2191
|
+
</div>
|
|
2192
|
+
</fig-layer>
|
|
2193
|
+
</fig-layer>
|
|
2194
|
+
|
|
2195
|
+
<h3>Collapsed Layers (Selected)</h3>
|
|
2196
|
+
<fig-layer open="false"
|
|
2197
|
+
selected>
|
|
2198
|
+
<div class="fig-layer-row">
|
|
2199
|
+
<svg class="fig-layer-icon"
|
|
2200
|
+
width="16"
|
|
2201
|
+
height="16"
|
|
2202
|
+
viewBox="0 0 16 16"
|
|
2203
|
+
fill="none">
|
|
2204
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
2205
|
+
stroke="currentColor"
|
|
2206
|
+
stroke-width="1.25" />
|
|
2207
|
+
</svg>
|
|
2208
|
+
<label>Group (collapsed - click chevron to expand)</label>
|
|
2209
|
+
</div>
|
|
2210
|
+
<fig-layer>
|
|
2211
|
+
<div class="fig-layer-row">
|
|
2212
|
+
<svg class="fig-layer-icon"
|
|
2213
|
+
width="16"
|
|
2214
|
+
height="16"
|
|
2215
|
+
viewBox="0 0 16 16"
|
|
2216
|
+
fill="none">
|
|
2217
|
+
<rect x="4"
|
|
2218
|
+
y="4"
|
|
2219
|
+
width="8"
|
|
2220
|
+
height="8"
|
|
2221
|
+
rx="1"
|
|
2222
|
+
stroke="currentColor"
|
|
2223
|
+
stroke-width="1.25" />
|
|
2224
|
+
</svg>
|
|
2225
|
+
<label>Hidden Child</label>
|
|
2226
|
+
</div>
|
|
2227
|
+
</fig-layer>
|
|
2228
|
+
</fig-layer>
|
|
2229
|
+
|
|
2230
|
+
<h3>Hidden Layer (Selected)</h3>
|
|
2231
|
+
<fig-layer visible="false"
|
|
2232
|
+
selected>
|
|
2233
|
+
<div class="fig-layer-row">
|
|
2234
|
+
<svg class="fig-layer-icon"
|
|
2235
|
+
width="16"
|
|
2236
|
+
height="16"
|
|
2237
|
+
viewBox="0 0 16 16"
|
|
2238
|
+
fill="none">
|
|
2239
|
+
<rect x="4"
|
|
2240
|
+
y="4"
|
|
2241
|
+
width="8"
|
|
2242
|
+
height="8"
|
|
2243
|
+
rx="1"
|
|
2244
|
+
stroke="currentColor"
|
|
2245
|
+
stroke-width="1.25" />
|
|
2246
|
+
</svg>
|
|
2247
|
+
<label>Hidden Rectangle</label>
|
|
2248
|
+
</div>
|
|
2249
|
+
</fig-layer>
|
|
2250
|
+
|
|
2251
|
+
<h3>With Action Buttons (Selected)</h3>
|
|
2252
|
+
<fig-layer selected>
|
|
2253
|
+
<div class="fig-layer-row">
|
|
2254
|
+
<svg class="fig-layer-icon"
|
|
2255
|
+
width="16"
|
|
2256
|
+
height="16"
|
|
2257
|
+
viewBox="0 0 16 16"
|
|
2258
|
+
fill="none">
|
|
2259
|
+
<rect x="4"
|
|
2260
|
+
y="4"
|
|
2261
|
+
width="8"
|
|
2262
|
+
height="8"
|
|
2263
|
+
rx="1"
|
|
2264
|
+
stroke="currentColor"
|
|
2265
|
+
stroke-width="1.25" />
|
|
2266
|
+
</svg>
|
|
2267
|
+
<label>Layer with actions (hover to see)</label>
|
|
2268
|
+
<div class="fig-layer-actions">
|
|
2269
|
+
<fig-button variant="ghost"
|
|
2270
|
+
type="toggle"
|
|
2271
|
+
icon>
|
|
2272
|
+
<svg width="16"
|
|
2273
|
+
height="16"
|
|
2274
|
+
viewBox="0 0 16 16"
|
|
2275
|
+
fill="none">
|
|
2276
|
+
<path d="M8 3V8M8 8V13M8 8H13M8 8H3"
|
|
2277
|
+
stroke="currentColor"
|
|
2278
|
+
stroke-width="1.5"
|
|
2279
|
+
stroke-linecap="round" />
|
|
2280
|
+
</svg>
|
|
2281
|
+
</fig-button>
|
|
2282
|
+
<fig-button variant="ghost"
|
|
2283
|
+
type="toggle"
|
|
2284
|
+
icon>
|
|
2285
|
+
<svg width="16"
|
|
2286
|
+
height="16"
|
|
2287
|
+
viewBox="0 0 16 16"
|
|
2288
|
+
fill="none">
|
|
2289
|
+
<path d="M4 8H12"
|
|
2290
|
+
stroke="currentColor"
|
|
2291
|
+
stroke-width="1.5"
|
|
2292
|
+
stroke-linecap="round" />
|
|
2293
|
+
</svg>
|
|
2294
|
+
</fig-button>
|
|
2295
|
+
</div>
|
|
2296
|
+
</div>
|
|
2297
|
+
</fig-layer>
|
|
2298
|
+
|
|
2299
|
+
<h3>Deep Nesting (Selected Child)</h3>
|
|
2300
|
+
<fig-layer open>
|
|
2301
|
+
<div class="fig-layer-row">
|
|
2302
|
+
<svg class="fig-layer-icon"
|
|
2303
|
+
width="16"
|
|
2304
|
+
height="16"
|
|
2305
|
+
viewBox="0 0 16 16"
|
|
2306
|
+
fill="none">
|
|
2307
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
2308
|
+
stroke="currentColor"
|
|
2309
|
+
stroke-width="1.25" />
|
|
2310
|
+
</svg>
|
|
2311
|
+
<label>Page</label>
|
|
2312
|
+
</div>
|
|
2313
|
+
<fig-layer open>
|
|
2314
|
+
<div class="fig-layer-row">
|
|
2315
|
+
<svg class="fig-layer-icon"
|
|
2316
|
+
width="16"
|
|
2317
|
+
height="16"
|
|
2318
|
+
viewBox="0 0 16 16"
|
|
2319
|
+
fill="none">
|
|
2320
|
+
<path d="M2 5C2 3.89543 2.89543 3 4 3H12C13.1046 3 14 3.89543 14 5V11C14 12.1046 13.1046 13 12 13H4C2.89543 13 2 12.1046 2 11V5Z"
|
|
2321
|
+
stroke="currentColor"
|
|
2322
|
+
stroke-width="1.25" />
|
|
2323
|
+
</svg>
|
|
2324
|
+
<label>Frame</label>
|
|
2325
|
+
</div>
|
|
2326
|
+
<fig-layer selected
|
|
2327
|
+
open>
|
|
2328
|
+
<div class="fig-layer-row">
|
|
2329
|
+
<svg class="fig-layer-icon"
|
|
2330
|
+
width="16"
|
|
2331
|
+
height="16"
|
|
2332
|
+
viewBox="0 0 16 16"
|
|
2333
|
+
fill="none">
|
|
2334
|
+
<rect x="4"
|
|
2335
|
+
y="4"
|
|
2336
|
+
width="8"
|
|
2337
|
+
height="8"
|
|
2338
|
+
rx="1"
|
|
2339
|
+
stroke="currentColor"
|
|
2340
|
+
stroke-width="1.25" />
|
|
2341
|
+
</svg>
|
|
2342
|
+
<label>Button</label>
|
|
2343
|
+
</div>
|
|
2344
|
+
<fig-layer>
|
|
2345
|
+
<div class="fig-layer-row">
|
|
2346
|
+
<svg class="fig-layer-icon"
|
|
2347
|
+
width="16"
|
|
2348
|
+
height="16"
|
|
2349
|
+
viewBox="0 0 16 16"
|
|
2350
|
+
fill="none">
|
|
2351
|
+
<path d="M3 5H13M3 8H13M3 11H10"
|
|
2352
|
+
stroke="currentColor"
|
|
2353
|
+
stroke-width="1.25"
|
|
2354
|
+
stroke-linecap="round" />
|
|
2355
|
+
</svg>
|
|
2356
|
+
<label>Text</label>
|
|
2357
|
+
</div>
|
|
2358
|
+
</fig-layer>
|
|
2359
|
+
</fig-layer>
|
|
2360
|
+
|
|
2361
|
+
</fig-layer>
|
|
2362
|
+
</fig-layer>
|
|
2363
|
+
</section>
|
|
2364
|
+
<hr>
|
|
2365
|
+
|
|
2366
|
+
<!-- Popover -->
|
|
2367
|
+
<section id="popover">
|
|
2368
|
+
<h2>Popover</h2>
|
|
2369
|
+
<p class="description">A floating panel that appears on hover or click.</p>
|
|
2370
|
+
|
|
2371
|
+
<h3>Hover Trigger</h3>
|
|
2372
|
+
<fig-popover action="hover">
|
|
2373
|
+
<fig-button>Hover me</fig-button>
|
|
2374
|
+
<div popover>
|
|
2375
|
+
<fig-header>
|
|
2376
|
+
<h3>Quick Info</h3>
|
|
2377
|
+
</fig-header>
|
|
2378
|
+
<fig-content>
|
|
2379
|
+
<fig-field direction="horizontal">
|
|
2380
|
+
<label>Status</label>
|
|
2381
|
+
<span style="color: var(--figma-color-text-success)">Active</span>
|
|
2382
|
+
</fig-field>
|
|
2383
|
+
<fig-field direction="horizontal">
|
|
2384
|
+
<label>Type</label>
|
|
2385
|
+
<span>Component</span>
|
|
2386
|
+
</fig-field>
|
|
2387
|
+
</fig-content>
|
|
2388
|
+
</div>
|
|
2389
|
+
</fig-popover>
|
|
2390
|
+
|
|
2391
|
+
<h3>Click Trigger</h3>
|
|
2392
|
+
<fig-popover action="click">
|
|
2393
|
+
<fig-button>Click me</fig-button>
|
|
2394
|
+
<div popover>
|
|
2395
|
+
<fig-header>
|
|
2396
|
+
<h3>Popover Title</h3>
|
|
2397
|
+
</fig-header>
|
|
2398
|
+
<fig-content>
|
|
2399
|
+
<fig-field direction="horizontal">
|
|
2400
|
+
<label>Name</label>
|
|
2401
|
+
<fig-input-text placeholder="Enter name"></fig-input-text>
|
|
2402
|
+
</fig-field>
|
|
2403
|
+
<fig-field direction="horizontal">
|
|
2404
|
+
<label>Enabled</label>
|
|
2405
|
+
<fig-switch></fig-switch>
|
|
2406
|
+
</fig-field>
|
|
2407
|
+
</fig-content>
|
|
2408
|
+
</div>
|
|
2409
|
+
</fig-popover>
|
|
2410
|
+
|
|
2411
|
+
<h3>With Form Content</h3>
|
|
2412
|
+
<fig-popover action="manual"
|
|
2413
|
+
size="large">
|
|
2414
|
+
<fig-button>Settings</fig-button>
|
|
2415
|
+
<div popover>
|
|
2416
|
+
<fig-header>
|
|
2417
|
+
<h3>Settings</h3>
|
|
2418
|
+
</fig-header>
|
|
2419
|
+
<fig-content>
|
|
2420
|
+
<fig-field direction="horizontal">
|
|
2421
|
+
<label>Opacity</label>
|
|
2422
|
+
<fig-slider min="0"
|
|
2423
|
+
max="100"
|
|
2424
|
+
value="50"
|
|
2425
|
+
text="true"
|
|
2426
|
+
units="%"></fig-slider>
|
|
2427
|
+
</fig-field>
|
|
2428
|
+
<fig-field direction="horizontal">
|
|
2429
|
+
<label>Mode</label>
|
|
2430
|
+
<fig-dropdown>
|
|
2431
|
+
<option>Normal</option>
|
|
2432
|
+
<option>Multiply</option>
|
|
2433
|
+
<option>Screen</option>
|
|
2434
|
+
</fig-dropdown>
|
|
2435
|
+
</fig-field>
|
|
2436
|
+
</fig-content>
|
|
2437
|
+
</div>
|
|
2438
|
+
</fig-popover>
|
|
2439
|
+
</section>
|
|
2440
|
+
<hr>
|
|
2441
|
+
|
|
2442
|
+
<!-- Radio -->
|
|
2443
|
+
<section id="radio">
|
|
2444
|
+
<h2>Radio</h2>
|
|
2445
|
+
<p class="description">Radio buttons for single selection from a group.</p>
|
|
2446
|
+
|
|
2447
|
+
<h3>Radio Group</h3>
|
|
2448
|
+
<vstack>
|
|
2449
|
+
<fig-radio label="Option One"
|
|
2450
|
+
name="radio-group-1"
|
|
2451
|
+
checked="true"></fig-radio>
|
|
2452
|
+
<fig-radio label="Option Two"
|
|
2453
|
+
name="radio-group-1"></fig-radio>
|
|
2454
|
+
<fig-radio label="Option Three"
|
|
2455
|
+
name="radio-group-1"></fig-radio>
|
|
2456
|
+
</vstack>
|
|
2457
|
+
|
|
2458
|
+
<h3>Another Group</h3>
|
|
2459
|
+
<vstack>
|
|
2460
|
+
<fig-radio label="Small"
|
|
2461
|
+
name="size-group"></fig-radio>
|
|
2462
|
+
<fig-radio label="Medium"
|
|
2463
|
+
name="size-group"
|
|
2464
|
+
checked="true"></fig-radio>
|
|
2465
|
+
<fig-radio label="Large"
|
|
2466
|
+
name="size-group"></fig-radio>
|
|
2467
|
+
</vstack>
|
|
2468
|
+
|
|
2469
|
+
<h3>Disabled</h3>
|
|
2470
|
+
<vstack>
|
|
2471
|
+
<fig-radio label="Disabled unchecked"
|
|
2472
|
+
name="disabled-group"
|
|
2473
|
+
disabled></fig-radio>
|
|
2474
|
+
<fig-radio label="Disabled checked"
|
|
2475
|
+
name="disabled-group-2"
|
|
2476
|
+
checked="true"
|
|
2477
|
+
disabled></fig-radio>
|
|
2478
|
+
</vstack>
|
|
2479
|
+
</section>
|
|
2480
|
+
<hr>
|
|
2481
|
+
|
|
2482
|
+
<!-- Segmented Control -->
|
|
2483
|
+
<section id="segmented-control">
|
|
2484
|
+
<h2>Segmented Control</h2>
|
|
2485
|
+
<p class="description">A group of mutually exclusive options displayed as segments.</p>
|
|
2486
|
+
|
|
2487
|
+
<h3>Default</h3>
|
|
2488
|
+
<fig-segmented-control>
|
|
2489
|
+
<fig-segment selected>One</fig-segment>
|
|
2490
|
+
<fig-segment>Two</fig-segment>
|
|
2491
|
+
<fig-segment>Three</fig-segment>
|
|
2492
|
+
</fig-segmented-control>
|
|
2493
|
+
|
|
2494
|
+
<h3>Two Options</h3>
|
|
2495
|
+
<fig-segmented-control>
|
|
2496
|
+
<fig-segment selected>Left</fig-segment>
|
|
2497
|
+
<fig-segment>Right</fig-segment>
|
|
2498
|
+
</fig-segmented-control>
|
|
2499
|
+
|
|
2500
|
+
<h3>Many Options</h3>
|
|
2501
|
+
<fig-segmented-control>
|
|
2502
|
+
<fig-segment>XS</fig-segment>
|
|
2503
|
+
<fig-segment>S</fig-segment>
|
|
2504
|
+
<fig-segment selected>M</fig-segment>
|
|
2505
|
+
<fig-segment>L</fig-segment>
|
|
2506
|
+
<fig-segment>XL</fig-segment>
|
|
2507
|
+
</fig-segmented-control>
|
|
2508
|
+
</section>
|
|
2509
|
+
<hr>
|
|
2510
|
+
|
|
2511
|
+
<!-- Shimmer -->
|
|
2512
|
+
<section id="shimmer">
|
|
2513
|
+
<h2>Shimmer</h2>
|
|
2514
|
+
<p class="description">An animated gradient text effect for loading states or visual emphasis.</p>
|
|
2515
|
+
|
|
2516
|
+
<h3>Horizontal (Default)</h3>
|
|
2517
|
+
<fig-shimmer>
|
|
2518
|
+
<span>Loading content...</span>
|
|
2519
|
+
</fig-shimmer>
|
|
2520
|
+
|
|
2521
|
+
<h3>Vertical</h3>
|
|
2522
|
+
<fig-shimmer direction="vertical">
|
|
2523
|
+
<span>Loading content...</span>
|
|
2524
|
+
</fig-shimmer>
|
|
2525
|
+
|
|
2526
|
+
<h3>Diagonal</h3>
|
|
2527
|
+
<fig-shimmer direction="diagonal">
|
|
2528
|
+
<span>Loading content...</span>
|
|
2529
|
+
</fig-shimmer>
|
|
2530
|
+
|
|
2531
|
+
<h3>Custom Duration (3s)</h3>
|
|
2532
|
+
<fig-shimmer duration="3s">
|
|
2533
|
+
<span>Slow shimmer effect</span>
|
|
2534
|
+
</fig-shimmer>
|
|
2535
|
+
|
|
2536
|
+
<h3>Paused</h3>
|
|
2537
|
+
<fig-shimmer playing="false">
|
|
2538
|
+
<span>No animation</span>
|
|
2539
|
+
</fig-shimmer>
|
|
2540
|
+
</section>
|
|
2541
|
+
<hr>
|
|
2542
|
+
|
|
2543
|
+
<!-- Slider -->
|
|
2544
|
+
<section id="slider">
|
|
2545
|
+
<h2>Slider</h2>
|
|
2546
|
+
<p class="description">A range slider with various types and configurations.</p>
|
|
2547
|
+
|
|
2548
|
+
<h3>Default</h3>
|
|
2549
|
+
<fig-slider min="0"
|
|
2550
|
+
max="100"
|
|
2551
|
+
value="50"></fig-slider>
|
|
2552
|
+
|
|
2553
|
+
<h3>With Text Input</h3>
|
|
2554
|
+
<fig-slider min="0"
|
|
2555
|
+
max="100"
|
|
2556
|
+
value="50"
|
|
2557
|
+
text="true"></fig-slider>
|
|
2558
|
+
|
|
2559
|
+
<h3>With Units</h3>
|
|
2560
|
+
<fig-slider min="0"
|
|
2561
|
+
max="100"
|
|
2562
|
+
value="75"
|
|
2563
|
+
text="true"
|
|
2564
|
+
units="%"></fig-slider>
|
|
2565
|
+
|
|
2566
|
+
<h3>Variants</h3>
|
|
2567
|
+
<fig-field direction="horizontal">
|
|
2568
|
+
<label>Default</label>
|
|
2569
|
+
<fig-slider min="0"
|
|
2570
|
+
max="100"
|
|
2571
|
+
value="50"
|
|
2572
|
+
text="true"></fig-slider>
|
|
2573
|
+
</fig-field>
|
|
2574
|
+
<fig-field direction="horizontal">
|
|
2575
|
+
<label>Neue</label>
|
|
2576
|
+
<fig-slider min="0"
|
|
2577
|
+
max="100"
|
|
2578
|
+
value="50"
|
|
2579
|
+
text="true"
|
|
2580
|
+
variant="neue"></fig-slider>
|
|
2581
|
+
</fig-field>
|
|
2582
|
+
<fig-field direction="horizontal">
|
|
2583
|
+
<label>Minimal</label>
|
|
2584
|
+
<fig-slider min="0"
|
|
2585
|
+
max="100"
|
|
2586
|
+
value="50"
|
|
2587
|
+
text="true"
|
|
2588
|
+
variant="minimal"></fig-slider>
|
|
2589
|
+
</fig-field>
|
|
2590
|
+
|
|
2591
|
+
<h3>Opacity Type</h3>
|
|
2592
|
+
<fig-field direction="horizontal">
|
|
2593
|
+
<label>Default</label>
|
|
2594
|
+
<fig-slider type="opacity"
|
|
2595
|
+
value="0.75"
|
|
2596
|
+
color="#ff0000"
|
|
2597
|
+
units="%"
|
|
2598
|
+
text="true"></fig-slider>
|
|
2599
|
+
</fig-field>
|
|
2600
|
+
<fig-field direction="horizontal">
|
|
2601
|
+
<label>Neue</label>
|
|
2602
|
+
<fig-slider type="opacity"
|
|
2603
|
+
value="0.75"
|
|
2604
|
+
color="#ff0000"
|
|
2605
|
+
units="%"
|
|
2606
|
+
text="true"
|
|
2607
|
+
variant="neue"></fig-slider>
|
|
2608
|
+
</fig-field>
|
|
2609
|
+
<fig-field direction="horizontal">
|
|
2610
|
+
<label>Minimal</label>
|
|
2611
|
+
<fig-slider type="opacity"
|
|
2612
|
+
value="0.75"
|
|
2613
|
+
color="#ff0000"
|
|
2614
|
+
units="%"
|
|
2615
|
+
text="true"
|
|
2616
|
+
variant="minimal"></fig-slider>
|
|
2617
|
+
</fig-field>
|
|
2618
|
+
|
|
2619
|
+
<h3>Hue Type</h3>
|
|
2620
|
+
<fig-field direction="horizontal">
|
|
2621
|
+
<label>Default</label>
|
|
2622
|
+
<fig-slider type="hue"
|
|
2623
|
+
value="180"
|
|
2624
|
+
text="true"></fig-slider>
|
|
2625
|
+
</fig-field>
|
|
2626
|
+
<fig-field direction="horizontal">
|
|
2627
|
+
<label>Neue</label>
|
|
2628
|
+
<fig-slider type="hue"
|
|
2629
|
+
value="180"
|
|
2630
|
+
text="true"
|
|
2631
|
+
variant="neue"></fig-slider>
|
|
2632
|
+
</fig-field>
|
|
2633
|
+
<fig-field direction="horizontal">
|
|
2634
|
+
<label>Minimal</label>
|
|
2635
|
+
<fig-slider type="hue"
|
|
2636
|
+
value="180"
|
|
2637
|
+
text="true"
|
|
2638
|
+
variant="minimal"></fig-slider>
|
|
2639
|
+
</fig-field>
|
|
2640
|
+
|
|
2641
|
+
<h3>Stepper Type</h3>
|
|
2642
|
+
<fig-field direction="horizontal">
|
|
2643
|
+
<label>Default</label>
|
|
2644
|
+
<fig-slider type="stepper"
|
|
2645
|
+
value="50"
|
|
2646
|
+
step="25"
|
|
2647
|
+
text="true">
|
|
2648
|
+
<datalist>
|
|
2649
|
+
<option value="0"></option>
|
|
2650
|
+
<option value="25"></option>
|
|
2651
|
+
<option value="50"></option>
|
|
2652
|
+
<option value="75"></option>
|
|
2653
|
+
<option value="100"></option>
|
|
2654
|
+
</datalist>
|
|
2655
|
+
</fig-slider>
|
|
2656
|
+
</fig-field>
|
|
2657
|
+
<fig-field direction="horizontal">
|
|
2658
|
+
<label>Neue</label>
|
|
2659
|
+
<fig-slider type="stepper"
|
|
2660
|
+
value="50"
|
|
2661
|
+
step="25"
|
|
2662
|
+
text="true"
|
|
2663
|
+
variant="neue">
|
|
2664
|
+
<datalist>
|
|
2665
|
+
<option value="0"></option>
|
|
2666
|
+
<option value="25"></option>
|
|
2667
|
+
<option value="50"></option>
|
|
2668
|
+
<option value="75"></option>
|
|
2669
|
+
<option value="100"></option>
|
|
2670
|
+
</datalist>
|
|
2671
|
+
</fig-slider>
|
|
2672
|
+
</fig-field>
|
|
2673
|
+
<fig-field direction="horizontal">
|
|
2674
|
+
<label>Minimal</label>
|
|
2675
|
+
<fig-slider type="stepper"
|
|
2676
|
+
value="50"
|
|
2677
|
+
step="25"
|
|
2678
|
+
text="true"
|
|
2679
|
+
variant="minimal">
|
|
2680
|
+
<datalist>
|
|
2681
|
+
<option value="0"></option>
|
|
2682
|
+
<option value="25"></option>
|
|
2683
|
+
<option value="50"></option>
|
|
2684
|
+
<option value="75"></option>
|
|
2685
|
+
<option value="100"></option>
|
|
2686
|
+
</datalist>
|
|
2687
|
+
</fig-slider>
|
|
2688
|
+
</fig-field>
|
|
2689
|
+
|
|
2690
|
+
<h3>Delta Type</h3>
|
|
2691
|
+
<fig-field direction="horizontal">
|
|
2692
|
+
<label>Default</label>
|
|
2693
|
+
<fig-slider type="delta"
|
|
2694
|
+
value="0"
|
|
2695
|
+
default="0"
|
|
2696
|
+
step="0.25"
|
|
2697
|
+
min="-5"
|
|
2698
|
+
max="5"
|
|
2699
|
+
text="true">
|
|
2700
|
+
<datalist>
|
|
2701
|
+
<option value="0"></option>
|
|
2702
|
+
</datalist>
|
|
2703
|
+
</fig-slider>
|
|
2704
|
+
</fig-field>
|
|
2705
|
+
<fig-field direction="horizontal">
|
|
2706
|
+
<label>Neue</label>
|
|
2707
|
+
<fig-slider type="delta"
|
|
2708
|
+
value="0"
|
|
2709
|
+
default="0"
|
|
2710
|
+
step="0.25"
|
|
2711
|
+
min="-5"
|
|
2712
|
+
max="5"
|
|
2713
|
+
text="true"
|
|
2714
|
+
variant="neue">
|
|
2715
|
+
<datalist>
|
|
2716
|
+
<option value="0"></option>
|
|
2717
|
+
</datalist>
|
|
2718
|
+
</fig-slider>
|
|
2719
|
+
</fig-field>
|
|
2720
|
+
<fig-field direction="horizontal">
|
|
2721
|
+
<label>Minimal</label>
|
|
2722
|
+
<fig-slider type="delta"
|
|
2723
|
+
value="0"
|
|
2724
|
+
default="0"
|
|
2725
|
+
step="0.25"
|
|
2726
|
+
min="-5"
|
|
2727
|
+
max="5"
|
|
2728
|
+
text="true"
|
|
2729
|
+
variant="minimal">
|
|
2730
|
+
<datalist>
|
|
2731
|
+
<option value="0"></option>
|
|
2732
|
+
</datalist>
|
|
2733
|
+
</fig-slider>
|
|
2734
|
+
</fig-field>
|
|
2735
|
+
|
|
2736
|
+
<h3>With Transform</h3>
|
|
2737
|
+
<fig-slider min="0"
|
|
2738
|
+
max="1"
|
|
2739
|
+
value="0.5"
|
|
2740
|
+
step="0.01"
|
|
2741
|
+
transform="100"
|
|
2742
|
+
text="true"
|
|
2743
|
+
units="%"></fig-slider>
|
|
2744
|
+
|
|
2745
|
+
<h3>Full Width</h3>
|
|
2746
|
+
<fig-slider min="0"
|
|
2747
|
+
max="100"
|
|
2748
|
+
value="50"
|
|
2749
|
+
text="true"
|
|
2750
|
+
full></fig-slider>
|
|
2751
|
+
</section>
|
|
2752
|
+
<hr>
|
|
2753
|
+
|
|
2754
|
+
<!-- Spinner -->
|
|
2755
|
+
<section id="spinner">
|
|
2756
|
+
<h2>Spinner</h2>
|
|
2757
|
+
<p class="description">A loading spinner indicator.</p>
|
|
2758
|
+
|
|
2759
|
+
<h3>Default</h3>
|
|
2760
|
+
<fig-spinner></fig-spinner>
|
|
2761
|
+
|
|
2762
|
+
<h3>In Context</h3>
|
|
2763
|
+
<hstack>
|
|
2764
|
+
<fig-spinner></fig-spinner>
|
|
2765
|
+
<span style="font-size: 13px; color: var(--figma-color-text-secondary);">Loading...</span>
|
|
2766
|
+
</hstack>
|
|
2767
|
+
</section>
|
|
2768
|
+
<hr>
|
|
2769
|
+
|
|
2770
|
+
<!-- Switch -->
|
|
2771
|
+
<section id="switch">
|
|
2772
|
+
<h2>Switch</h2>
|
|
2773
|
+
<p class="description">A toggle switch for on/off states.</p>
|
|
2774
|
+
|
|
2775
|
+
<h3>States</h3>
|
|
2776
|
+
<fig-field direction="horizontal">
|
|
2777
|
+
<label>Off</label>
|
|
2778
|
+
<fig-switch label="Off"
|
|
2779
|
+
checked="false"></fig-switch>
|
|
2780
|
+
</fig-field>
|
|
2781
|
+
<fig-field direction="horizontal">
|
|
2782
|
+
<label>On</label>
|
|
2783
|
+
<fig-switch label="On"
|
|
2784
|
+
checked="true"></fig-switch>
|
|
2785
|
+
</fig-field>
|
|
2786
|
+
<fig-field direction="horizontal">
|
|
2787
|
+
<label>Indeterminate</label>
|
|
2788
|
+
<fig-switch label="Indeterminate"
|
|
2789
|
+
indeterminate="true"></fig-switch>
|
|
2790
|
+
</fig-field>
|
|
2791
|
+
<fig-field direction="horizontal">
|
|
2792
|
+
<label>Disabled</label>
|
|
2793
|
+
<fig-switch label="Disabled"
|
|
2794
|
+
disabled></fig-switch>
|
|
2795
|
+
</fig-field>
|
|
2796
|
+
<fig-field direction="horizontal">
|
|
2797
|
+
<label>Disabled (on)</label>
|
|
2798
|
+
<fig-switch label="Disabled On"
|
|
2799
|
+
checked="true"
|
|
2800
|
+
disabled></fig-switch>
|
|
2801
|
+
</fig-field>
|
|
2802
|
+
|
|
2803
|
+
<h3>Without Labels</h3>
|
|
2804
|
+
<fig-field direction="horizontal">
|
|
2805
|
+
<label>Off</label>
|
|
2806
|
+
<fig-switch checked="false"></fig-switch>
|
|
2807
|
+
</fig-field>
|
|
2808
|
+
<fig-field direction="horizontal">
|
|
2809
|
+
<label>On</label>
|
|
2810
|
+
<fig-switch checked="true"></fig-switch>
|
|
2811
|
+
</fig-field>
|
|
2812
|
+
<fig-field direction="horizontal">
|
|
2813
|
+
<label>Disabled</label>
|
|
2814
|
+
<fig-switch disabled></fig-switch>
|
|
2815
|
+
</fig-field>
|
|
2816
|
+
</section>
|
|
2817
|
+
<hr>
|
|
2818
|
+
|
|
2819
|
+
<!-- Tabs -->
|
|
2820
|
+
<section id="tabs">
|
|
2821
|
+
<h2>Tabs</h2>
|
|
2822
|
+
<p class="description">A tabbed interface for organizing content.</p>
|
|
2823
|
+
|
|
2824
|
+
<h3>Default</h3>
|
|
2825
|
+
<fig-tabs>
|
|
2826
|
+
<fig-tab selected
|
|
2827
|
+
content="#tab-content-1">Tab One</fig-tab>
|
|
2828
|
+
<fig-tab content="#tab-content-2">Tab Two</fig-tab>
|
|
2829
|
+
<fig-tab content="#tab-content-3">Tab Three</fig-tab>
|
|
2830
|
+
</fig-tabs>
|
|
2831
|
+
<fig-tab-content id="tab-content-1">
|
|
2832
|
+
<p>Content for Tab One. This is the default selected tab.</p>
|
|
2833
|
+
</fig-tab-content>
|
|
2834
|
+
<fig-tab-content id="tab-content-2">
|
|
2835
|
+
<p>Content for Tab Two. Click the tab to see this content.</p>
|
|
2836
|
+
</fig-tab-content>
|
|
2837
|
+
<fig-tab-content id="tab-content-3">
|
|
2838
|
+
<p>Content for Tab Three. Each tab can have different content.</p>
|
|
2839
|
+
</fig-tab-content>
|
|
2840
|
+
|
|
2841
|
+
<h3>Two Tabs</h3>
|
|
2842
|
+
<fig-tabs>
|
|
2843
|
+
<fig-tab selected
|
|
2844
|
+
content="#two-tab-1">First</fig-tab>
|
|
2845
|
+
<fig-tab content="#two-tab-2">Second</fig-tab>
|
|
2846
|
+
</fig-tabs>
|
|
2847
|
+
<fig-tab-content id="two-tab-1">First tab content</fig-tab-content>
|
|
2848
|
+
<fig-tab-content id="two-tab-2">Second tab content</fig-tab-content>
|
|
2849
|
+
</section>
|
|
2850
|
+
<hr>
|
|
2851
|
+
|
|
2852
|
+
<!-- Toast -->
|
|
2853
|
+
<section id="toast">
|
|
2854
|
+
<h2>Toast</h2>
|
|
2855
|
+
<p class="description">A non-modal, time-based notification that appears at the bottom center of the screen.
|
|
2856
|
+
</p>
|
|
2857
|
+
|
|
2858
|
+
<h3>Basic Toast</h3>
|
|
2859
|
+
<fig-button onclick="document.getElementById('basic-toast').showToast()">Show Toast</fig-button>
|
|
2860
|
+
<dialog id="basic-toast"
|
|
2861
|
+
is="fig-toast">
|
|
2862
|
+
<p>Your changes have been saved.</p>
|
|
2863
|
+
</dialog>
|
|
2864
|
+
|
|
2865
|
+
<h3>With Dismiss Button</h3>
|
|
2866
|
+
<fig-button onclick="document.getElementById('dismiss-toast').showToast()">Show Toast with
|
|
2867
|
+
Dismiss</fig-button>
|
|
2868
|
+
<dialog id="dismiss-toast"
|
|
2869
|
+
is="fig-toast">
|
|
2870
|
+
<p>File uploaded successfully.</p>
|
|
2871
|
+
<hr vertical />
|
|
2872
|
+
<fig-button variant="ghost"
|
|
2873
|
+
icon="true"
|
|
2874
|
+
close-toast>
|
|
2875
|
+
<span class="fig-mask-icon"
|
|
2876
|
+
style="--icon: var(--icon-close)"></span>
|
|
2877
|
+
</fig-button>
|
|
2878
|
+
</dialog>
|
|
2879
|
+
|
|
2880
|
+
<h3>With Action</h3>
|
|
2881
|
+
<fig-button onclick="document.getElementById('action-toast').showToast()">Show Toast with
|
|
2882
|
+
Action</fig-button>
|
|
2883
|
+
<dialog id="action-toast"
|
|
2884
|
+
is="fig-toast">
|
|
2885
|
+
<p>Item moved to trash.</p>
|
|
2886
|
+
<fig-button variant="link"
|
|
2887
|
+
close-toast>Undo</fig-button>
|
|
2888
|
+
</dialog>
|
|
2889
|
+
|
|
2890
|
+
<h3>No Auto-Dismiss</h3>
|
|
2891
|
+
<fig-button onclick="document.getElementById('persistent-toast').showToast()">Show Persistent
|
|
2892
|
+
Toast</fig-button>
|
|
2893
|
+
<dialog id="persistent-toast"
|
|
2894
|
+
is="fig-toast"
|
|
2895
|
+
duration="0">
|
|
2896
|
+
<p>This toast won't auto-dismiss.</p>
|
|
2897
|
+
<fig-button variant="ghost"
|
|
2898
|
+
close-toast>Close</fig-button>
|
|
2899
|
+
</dialog>
|
|
2900
|
+
|
|
2901
|
+
<h3>Custom Duration (2 seconds)</h3>
|
|
2902
|
+
<fig-button onclick="document.getElementById('short-toast').showToast()">Show Short Toast</fig-button>
|
|
2903
|
+
<dialog id="short-toast"
|
|
2904
|
+
is="fig-toast"
|
|
2905
|
+
duration="2000">
|
|
2906
|
+
<p>This disappears quickly!</p>
|
|
2907
|
+
</dialog>
|
|
2908
|
+
|
|
2909
|
+
<h3>Custom Offset (64px)</h3>
|
|
2910
|
+
<fig-button onclick="document.getElementById('offset-toast').showToast()">Show Offset Toast</fig-button>
|
|
2911
|
+
<dialog id="offset-toast"
|
|
2912
|
+
is="fig-toast"
|
|
2913
|
+
offset="64">
|
|
2914
|
+
<p>This toast is 64px from the bottom.</p>
|
|
2915
|
+
</dialog>
|
|
2916
|
+
|
|
2917
|
+
<h3>Themes</h3>
|
|
2918
|
+
<hstack>
|
|
2919
|
+
<fig-button onclick="document.getElementById('dark-toast').showToast()">Dark (default)</fig-button>
|
|
2920
|
+
<fig-button onclick="document.getElementById('light-toast').showToast()">Light</fig-button>
|
|
2921
|
+
<fig-button onclick="document.getElementById('danger-toast').showToast()">Danger</fig-button>
|
|
2922
|
+
<fig-button onclick="document.getElementById('brand-toast').showToast()">Brand</fig-button>
|
|
2923
|
+
</hstack>
|
|
2924
|
+
<dialog id="dark-toast"
|
|
2925
|
+
is="fig-toast"
|
|
2926
|
+
theme="dark">
|
|
2927
|
+
<p>Dark theme toast message.</p>
|
|
2928
|
+
</dialog>
|
|
2929
|
+
<dialog id="light-toast"
|
|
2930
|
+
is="fig-toast"
|
|
2931
|
+
theme="light">
|
|
2932
|
+
<p>Light theme toast message.</p>
|
|
2933
|
+
</dialog>
|
|
2934
|
+
<dialog id="danger-toast"
|
|
2935
|
+
is="fig-toast"
|
|
2936
|
+
theme="danger">
|
|
2937
|
+
<p>Danger theme toast message.</p>
|
|
2938
|
+
</dialog>
|
|
2939
|
+
<dialog id="brand-toast"
|
|
2940
|
+
is="fig-toast"
|
|
2941
|
+
theme="brand">
|
|
2942
|
+
<p>Brand theme toast message.</p>
|
|
2943
|
+
</dialog>
|
|
2944
|
+
</section>
|
|
2945
|
+
<hr>
|
|
2946
|
+
|
|
2947
|
+
<!-- Tooltip -->
|
|
2948
|
+
<section id="tooltip">
|
|
2949
|
+
<h2>Tooltip</h2>
|
|
2950
|
+
<p class="description">A small popup that appears on hover to provide additional information.</p>
|
|
2951
|
+
|
|
2952
|
+
<h3>Default</h3>
|
|
2953
|
+
<fig-tooltip text="This is a tooltip">
|
|
2954
|
+
<fig-button>Hover me</fig-button>
|
|
2955
|
+
</fig-tooltip>
|
|
2956
|
+
|
|
2957
|
+
<h3>On Different Elements</h3>
|
|
2958
|
+
<hstack>
|
|
2959
|
+
<fig-tooltip text="Button tooltip">
|
|
2960
|
+
<fig-button variant="secondary">Button</fig-button>
|
|
2961
|
+
</fig-tooltip>
|
|
2962
|
+
<fig-tooltip text="Icon tooltip">
|
|
2963
|
+
<fig-button variant="ghost"
|
|
2964
|
+
icon="true">
|
|
2965
|
+
<svg width="16"
|
|
2966
|
+
height="16"
|
|
2967
|
+
viewBox="0 0 16 16"
|
|
2968
|
+
fill="none"
|
|
2969
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
2970
|
+
<path fill-rule="evenodd"
|
|
2971
|
+
clip-rule="evenodd"
|
|
2972
|
+
d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm6-2.5v-1h1v1h-1zm0 1v4h1v-4h-1z"
|
|
2973
|
+
fill="currentColor" />
|
|
2974
|
+
</svg>
|
|
2975
|
+
</fig-button>
|
|
2976
|
+
</fig-tooltip>
|
|
2977
|
+
<fig-tooltip text="Text tooltip">
|
|
2978
|
+
<em style="cursor: help;">Hover this text</em>
|
|
2979
|
+
</fig-tooltip>
|
|
2980
|
+
</hstack>
|
|
2981
|
+
|
|
2982
|
+
<h3>Instant (No Delay)</h3>
|
|
2983
|
+
<fig-tooltip text="Instant tooltip"
|
|
2984
|
+
delay="0">
|
|
2985
|
+
<fig-button>No delay</fig-button>
|
|
2986
|
+
</fig-tooltip>
|
|
2987
|
+
|
|
2988
|
+
<h3>Long Text</h3>
|
|
2989
|
+
<fig-tooltip text="This is a much longer tooltip that contains more detailed information about the element">
|
|
2990
|
+
<fig-button variant="secondary">Long tooltip</fig-button>
|
|
2991
|
+
</fig-tooltip>
|
|
2992
|
+
|
|
2993
|
+
<h3>Inline Usage</h3>
|
|
2994
|
+
<p style="font-size: 13px;">
|
|
2995
|
+
Some paragraph text with a
|
|
2996
|
+
<fig-tooltip text="Additional context">
|
|
2997
|
+
<em style="cursor: help; text-decoration: underline dotted;">tooltip</em>
|
|
2998
|
+
</fig-tooltip>
|
|
2999
|
+
for more information.
|
|
3000
|
+
</p>
|
|
3001
|
+
|
|
3002
|
+
<h3>On a Draggable Element</h3>
|
|
3003
|
+
<fig-tooltip text="Drag me around"
|
|
3004
|
+
delay="0">
|
|
3005
|
+
<div style="
|
|
3006
|
+
width: 64px;
|
|
3007
|
+
height: 64px;
|
|
3008
|
+
border-radius: 8px;
|
|
3009
|
+
background: var(--figma-color-bg-brand);
|
|
3010
|
+
display: flex;
|
|
3011
|
+
align-items: center;
|
|
3012
|
+
justify-content: center;
|
|
3013
|
+
color: var(--figma-color-text-onbrand);
|
|
3014
|
+
font-size: 11px;
|
|
3015
|
+
font-weight: 600;
|
|
3016
|
+
cursor: grab;
|
|
3017
|
+
user-select: none;
|
|
3018
|
+
position: relative;
|
|
3019
|
+
"
|
|
3020
|
+
draggable-box>
|
|
3021
|
+
Drag me
|
|
3022
|
+
</div>
|
|
3023
|
+
</fig-tooltip>
|
|
3024
|
+
|
|
3025
|
+
<script>
|
|
3026
|
+
{
|
|
3027
|
+
const box = document.querySelector('[draggable-box]');
|
|
3028
|
+
let isDragging = false;
|
|
3029
|
+
let startX, startY, initialLeft, initialTop;
|
|
3030
|
+
|
|
3031
|
+
// Ensure positioned
|
|
3032
|
+
box.style.position = 'relative';
|
|
3033
|
+
box.style.left = '0px';
|
|
3034
|
+
box.style.top = '0px';
|
|
3035
|
+
|
|
3036
|
+
box.addEventListener('mousedown', (e) => {
|
|
3037
|
+
isDragging = true;
|
|
3038
|
+
startX = e.clientX;
|
|
3039
|
+
startY = e.clientY;
|
|
3040
|
+
initialLeft = parseInt(box.style.left) || 0;
|
|
3041
|
+
initialTop = parseInt(box.style.top) || 0;
|
|
3042
|
+
box.style.cursor = 'grabbing';
|
|
3043
|
+
e.preventDefault();
|
|
3044
|
+
});
|
|
3045
|
+
|
|
3046
|
+
window.addEventListener('mousemove', (e) => {
|
|
3047
|
+
if (!isDragging) return;
|
|
3048
|
+
box.style.left = (initialLeft + e.clientX - startX) + 'px';
|
|
3049
|
+
box.style.top = (initialTop + e.clientY - startY) + 'px';
|
|
3050
|
+
});
|
|
3051
|
+
|
|
3052
|
+
window.addEventListener('mouseup', () => {
|
|
3053
|
+
if (!isDragging) return;
|
|
3054
|
+
isDragging = false;
|
|
3055
|
+
box.style.cursor = 'grab';
|
|
3056
|
+
});
|
|
3057
|
+
}
|
|
3058
|
+
</script>
|
|
3059
|
+
</section>
|
|
3060
|
+
<hr>
|
|
3061
|
+
|
|
3062
|
+
<!-- Icons -->
|
|
3063
|
+
<section id="icons">
|
|
3064
|
+
<h2>Icons</h2>
|
|
3065
|
+
<p class="description">CSS mask-based icons using the <code>.fig-mask-icon</code> utility class. Icons
|
|
3066
|
+
inherit <code>currentColor</code> and can be sized with the <code>--size</code> variable.</p>
|
|
3067
|
+
|
|
3068
|
+
<h3>Usage</h3>
|
|
3069
|
+
<p class="description">Set the <code>--icon</code> CSS variable to any icon variable. Icons use
|
|
3070
|
+
<code>currentColor</code> so they inherit text color.
|
|
3071
|
+
</p>
|
|
3072
|
+
|
|
3073
|
+
<pre><code><span class="fig-mask-icon" style="--icon: var(--icon-add)"></span></code></pre>
|
|
3074
|
+
|
|
3075
|
+
<h3>Available Icons</h3>
|
|
3076
|
+
<hstack style="gap: 16px; flex-wrap: wrap;">
|
|
3077
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3078
|
+
<span class="fig-mask-icon"
|
|
3079
|
+
style="--icon: var(--icon-add)"></span>
|
|
3080
|
+
<code>--icon-add</code>
|
|
3081
|
+
</vstack>
|
|
3082
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3083
|
+
<span class="fig-mask-icon"
|
|
3084
|
+
style="--icon: var(--icon-minus)"></span>
|
|
3085
|
+
<code>--icon-minus</code>
|
|
3086
|
+
</vstack>
|
|
3087
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3088
|
+
<span class="fig-mask-icon"
|
|
3089
|
+
style="--icon: var(--icon-back)"></span>
|
|
3090
|
+
<code>--icon-back</code>
|
|
3091
|
+
</vstack>
|
|
3092
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3093
|
+
<span class="fig-mask-icon"
|
|
3094
|
+
style="--icon: var(--icon-forward)"></span>
|
|
3095
|
+
<code>--icon-forward</code>
|
|
3096
|
+
</vstack>
|
|
3097
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3098
|
+
<span class="fig-mask-icon"
|
|
3099
|
+
style="--icon: var(--icon-close)"></span>
|
|
3100
|
+
<code>--icon-close</code>
|
|
3101
|
+
</vstack>
|
|
3102
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3103
|
+
<span class="fig-mask-icon"
|
|
3104
|
+
style="--icon: var(--icon-rotate)"></span>
|
|
3105
|
+
<code>--icon-rotate</code>
|
|
3106
|
+
</vstack>
|
|
3107
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3108
|
+
<span class="fig-mask-icon"
|
|
3109
|
+
style="--icon: var(--icon-swap)"></span>
|
|
3110
|
+
<code>--icon-swap</code>
|
|
3111
|
+
</vstack>
|
|
3112
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3113
|
+
<span class="fig-mask-icon"
|
|
3114
|
+
style="--icon: var(--icon-checkmark)"></span>
|
|
3115
|
+
<code>--icon-checkmark</code>
|
|
3116
|
+
</vstack>
|
|
3117
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3118
|
+
<span class="fig-mask-icon"
|
|
3119
|
+
style="--icon: var(--icon-eyedropper); --size: 1.5rem"></span>
|
|
3120
|
+
<code>--icon-eyedropper</code>
|
|
3121
|
+
</vstack>
|
|
3122
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3123
|
+
<span class="fig-mask-icon"
|
|
3124
|
+
style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
|
|
3125
|
+
<code>--icon-steppers</code>
|
|
3126
|
+
</vstack>
|
|
3127
|
+
</hstack>
|
|
3128
|
+
|
|
3129
|
+
<h3>Custom Size</h3>
|
|
3130
|
+
<p class="description">Use the <code>--size</code> variable to adjust icon dimensions.</p>
|
|
3131
|
+
<hstack style="gap: 16px; align-items: end;">
|
|
3132
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3133
|
+
<span class="fig-mask-icon"
|
|
3134
|
+
style="--icon: var(--icon-add); --size: 12px"></span>
|
|
3135
|
+
<code>12px</code>
|
|
3136
|
+
</vstack>
|
|
3137
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3138
|
+
<span class="fig-mask-icon"
|
|
3139
|
+
style="--icon: var(--icon-add); --size: 16px"></span>
|
|
3140
|
+
<code>16px</code>
|
|
3141
|
+
</vstack>
|
|
3142
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3143
|
+
<span class="fig-mask-icon"
|
|
3144
|
+
style="--icon: var(--icon-add); --size: 24px"></span>
|
|
3145
|
+
<code>24px</code>
|
|
3146
|
+
</vstack>
|
|
3147
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3148
|
+
<span class="fig-mask-icon"
|
|
3149
|
+
style="--icon: var(--icon-add); --size: 32px"></span>
|
|
3150
|
+
<code>32px</code>
|
|
3151
|
+
</vstack>
|
|
3152
|
+
</hstack>
|
|
3153
|
+
|
|
3154
|
+
<h3>Color Inheritance</h3>
|
|
3155
|
+
<p class="description">Icons inherit <code>currentColor</code>, so they match the parent's text color.</p>
|
|
3156
|
+
<hstack style="gap: 16px;">
|
|
3157
|
+
<span class="fig-mask-icon"
|
|
3158
|
+
style="--icon: var(--icon-add); color: var(--figma-color-text)"></span>
|
|
3159
|
+
<span class="fig-mask-icon"
|
|
3160
|
+
style="--icon: var(--icon-add); color: var(--figma-color-text-secondary)"></span>
|
|
3161
|
+
<span class="fig-mask-icon"
|
|
3162
|
+
style="--icon: var(--icon-add); color: var(--figma-color-text-brand)"></span>
|
|
3163
|
+
<span class="fig-mask-icon"
|
|
3164
|
+
style="--icon: var(--icon-add); color: var(--figma-color-text-danger)"></span>
|
|
3165
|
+
<span class="fig-mask-icon"
|
|
3166
|
+
style="--icon: var(--icon-add); color: var(--figma-color-text-success)"></span>
|
|
3167
|
+
<span class="fig-mask-icon"
|
|
3168
|
+
style="--icon: var(--icon-add); color: var(--figma-color-text-warning)"></span>
|
|
3169
|
+
</hstack>
|
|
3170
|
+
|
|
3171
|
+
<h3>Inside Buttons</h3>
|
|
3172
|
+
<hstack>
|
|
3173
|
+
<fig-button icon
|
|
3174
|
+
variant="ghost">
|
|
3175
|
+
<span class="fig-mask-icon"
|
|
3176
|
+
style="--icon: var(--icon-add)"></span>
|
|
3177
|
+
</fig-button>
|
|
3178
|
+
<fig-button icon
|
|
3179
|
+
variant="ghost">
|
|
3180
|
+
<span class="fig-mask-icon"
|
|
3181
|
+
style="--icon: var(--icon-minus)"></span>
|
|
3182
|
+
</fig-button>
|
|
3183
|
+
<fig-button>
|
|
3184
|
+
<span class="fig-mask-icon"
|
|
3185
|
+
style="--icon: var(--icon-add)"></span>
|
|
3186
|
+
Add Item
|
|
3187
|
+
</fig-button>
|
|
3188
|
+
</hstack>
|
|
3189
|
+
</section>
|
|
3190
|
+
<hr>
|
|
3191
|
+
|
|
3192
|
+
<!-- HStack -->
|
|
3193
|
+
<section id="hstack">
|
|
3194
|
+
<h2>HStack</h2>
|
|
3195
|
+
<p class="description">A horizontal flex container for laying out elements in a row.</p>
|
|
3196
|
+
|
|
3197
|
+
<h3>Basic Usage</h3>
|
|
3198
|
+
<hstack>
|
|
3199
|
+
<fig-button>Button 1</fig-button>
|
|
3200
|
+
<fig-button>Button 2</fig-button>
|
|
3201
|
+
<fig-button>Button 3</fig-button>
|
|
3202
|
+
</hstack>
|
|
3203
|
+
|
|
3204
|
+
<h3>Mixed Elements</h3>
|
|
3205
|
+
<hstack>
|
|
3206
|
+
<fig-avatar name="John Doe"></fig-avatar>
|
|
3207
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">John Doe</span>
|
|
3208
|
+
<fig-button variant="secondary"
|
|
3209
|
+
size="small">Follow</fig-button>
|
|
3210
|
+
</hstack>
|
|
3211
|
+
|
|
3212
|
+
<h3>Form Controls</h3>
|
|
3213
|
+
<hstack>
|
|
3214
|
+
<fig-input-text placeholder="Enter value"
|
|
3215
|
+
style="width: 120px;"></fig-input-text>
|
|
3216
|
+
<fig-dropdown style="width: 100px;">
|
|
3217
|
+
<option>px</option>
|
|
3218
|
+
<option>%</option>
|
|
3219
|
+
<option>em</option>
|
|
3220
|
+
</fig-dropdown>
|
|
3221
|
+
<fig-button variant="primary">Apply</fig-button>
|
|
3222
|
+
</hstack>
|
|
3223
|
+
|
|
3224
|
+
<h3>With Chips/Chits</h3>
|
|
3225
|
+
<hstack>
|
|
3226
|
+
<fig-chit background="#FF5733"></fig-chit>
|
|
3227
|
+
<fig-chit background="#33FF57"></fig-chit>
|
|
3228
|
+
<fig-chit background="#3357FF"></fig-chit>
|
|
3229
|
+
<fig-chit background="#FF33F5"></fig-chit>
|
|
3230
|
+
</hstack>
|
|
3231
|
+
</section>
|
|
3232
|
+
<hr>
|
|
3233
|
+
|
|
3234
|
+
<!-- VStack -->
|
|
3235
|
+
<section id="vstack">
|
|
3236
|
+
<h2>VStack</h2>
|
|
3237
|
+
<p class="description">A vertical flex container for laying out elements in a column.</p>
|
|
3238
|
+
|
|
3239
|
+
<h3>Basic Usage</h3>
|
|
3240
|
+
<vstack style="max-width: 200px;">
|
|
3241
|
+
<fig-button>Button 1</fig-button>
|
|
3242
|
+
<fig-button>Button 2</fig-button>
|
|
3243
|
+
<fig-button>Button 3</fig-button>
|
|
3244
|
+
</vstack>
|
|
3245
|
+
|
|
3246
|
+
<h3>Form Layout</h3>
|
|
3247
|
+
<vstack style="max-width: 280px;">
|
|
3248
|
+
<fig-input-text label="Name"
|
|
3249
|
+
placeholder="Enter your name"></fig-input-text>
|
|
3250
|
+
<fig-input-text label="Email"
|
|
3251
|
+
placeholder="Enter your email"></fig-input-text>
|
|
3252
|
+
<fig-input-text label="Password"
|
|
3253
|
+
type="password"
|
|
3254
|
+
placeholder="Enter password"></fig-input-text>
|
|
3255
|
+
<fig-button variant="primary"
|
|
3256
|
+
style="align-self: flex-end;">Submit</fig-button>
|
|
3257
|
+
</vstack>
|
|
3258
|
+
|
|
3259
|
+
<h3>Settings Panel</h3>
|
|
3260
|
+
<vstack style="max-width: 280px;">
|
|
3261
|
+
<fig-switch label="Enable notifications"></fig-switch>
|
|
3262
|
+
<fig-switch label="Dark mode"></fig-switch>
|
|
3263
|
+
<fig-switch label="Auto-save"></fig-switch>
|
|
3264
|
+
<fig-checkbox label="Remember my preferences"></fig-checkbox>
|
|
3265
|
+
</vstack>
|
|
3266
|
+
|
|
3267
|
+
<h3>Nested Stacks</h3>
|
|
3268
|
+
<vstack style="max-width: 300px;">
|
|
3269
|
+
<hstack>
|
|
3270
|
+
<fig-avatar name="Alice"></fig-avatar>
|
|
3271
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Alice Johnson</span>
|
|
3272
|
+
</hstack>
|
|
3273
|
+
<hstack>
|
|
3274
|
+
<fig-avatar name="Bob"></fig-avatar>
|
|
3275
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Bob Smith</span>
|
|
3276
|
+
</hstack>
|
|
3277
|
+
<hstack>
|
|
3278
|
+
<fig-avatar name="Carol"></fig-avatar>
|
|
3279
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Carol Williams</span>
|
|
3280
|
+
</hstack>
|
|
3281
|
+
</vstack>
|
|
3282
|
+
</section>
|
|
3283
|
+
<hr>
|
|
3284
|
+
|
|
3285
|
+
<!-- HR -->
|
|
3286
|
+
<section id="hr">
|
|
3287
|
+
<h2>HR</h2>
|
|
3288
|
+
<p class="description">A horizontal rule for visual separation of content.</p>
|
|
3289
|
+
|
|
3290
|
+
<h3>Default</h3>
|
|
3291
|
+
<div style="padding: 16px 0;">
|
|
3292
|
+
<p style="font-size: 13px; color: var(--figma-color-text); margin: 0 0 16px 0;">Content above the
|
|
3293
|
+
divider</p>
|
|
3294
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 0;">
|
|
3295
|
+
<p style="font-size: 13px; color: var(--figma-color-text); margin: 16px 0 0 0;">Content below the
|
|
3296
|
+
divider</p>
|
|
3297
|
+
</div>
|
|
3298
|
+
|
|
3299
|
+
<h3>In a List</h3>
|
|
3300
|
+
<vstack style="max-width: 280px;">
|
|
3301
|
+
<hstack>
|
|
3302
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Item One</span>
|
|
3303
|
+
</hstack>
|
|
3304
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 0; width: 100%;">
|
|
3305
|
+
<hstack>
|
|
3306
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Item Two</span>
|
|
3307
|
+
</hstack>
|
|
3308
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 0; width: 100%;">
|
|
3309
|
+
<hstack>
|
|
3310
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Item Three</span>
|
|
3311
|
+
</hstack>
|
|
3312
|
+
</vstack>
|
|
3313
|
+
|
|
3314
|
+
<h3>Section Separator</h3>
|
|
3315
|
+
<vstack style="max-width: 300px;">
|
|
3316
|
+
<h4 style="font-size: 13px; font-weight: 600; color: var(--figma-color-text); margin: 0;">Section A</h4>
|
|
3317
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin: 0;">Some content for
|
|
3318
|
+
section A.</p>
|
|
3319
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 8px 0; width: 100%;">
|
|
3320
|
+
<h4 style="font-size: 13px; font-weight: 600; color: var(--figma-color-text); margin: 0;">Section B</h4>
|
|
3321
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin: 0;">Some content for
|
|
3322
|
+
section B.</p>
|
|
3323
|
+
</vstack>
|
|
3324
|
+
</section>
|
|
3325
|
+
<hr>
|
|
3326
|
+
|
|
3327
|
+
<!-- Code -->
|
|
3328
|
+
<section id="code">
|
|
3329
|
+
<h2>Code</h2>
|
|
3330
|
+
<p class="description">Inline and block code formatting for displaying code snippets.</p>
|
|
3331
|
+
|
|
3332
|
+
<h3>Inline Code</h3>
|
|
3333
|
+
<p style="font-size: 13px; color: var(--figma-color-text);">
|
|
3334
|
+
Use the <code
|
|
3335
|
+
style="background: var(--figma-color-bg-secondary); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px;">fig-button</code>
|
|
3336
|
+
component for buttons.
|
|
3337
|
+
</p>
|
|
3338
|
+
|
|
3339
|
+
<h3>Code Block</h3>
|
|
3340
|
+
<pre
|
|
3341
|
+
style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);"><fig-button variant="primary">
|
|
3342
|
+
Click me
|
|
3343
|
+
</fig-button></code></pre>
|
|
3344
|
+
|
|
3345
|
+
<h3>Multiple Lines</h3>
|
|
3346
|
+
<pre
|
|
3347
|
+
style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">const button = document.querySelector('fig-button');
|
|
3348
|
+
button.addEventListener('click', () => {
|
|
3349
|
+
console.log('Button clicked!');
|
|
3350
|
+
});</code></pre>
|
|
3351
|
+
|
|
3352
|
+
<h3>CSS Example</h3>
|
|
3353
|
+
<pre
|
|
3354
|
+
style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">fig-button {
|
|
3355
|
+
--button-bg: var(--figma-color-bg-brand);
|
|
3356
|
+
--button-color: white;
|
|
3357
|
+
border-radius: 6px;
|
|
3358
|
+
}</code></pre>
|
|
3359
|
+
</section>
|
|
3360
|
+
<hr>
|
|
3361
|
+
|
|
3362
|
+
<!-- Details -->
|
|
3363
|
+
<section id="details">
|
|
3364
|
+
<h2>Details</h2>
|
|
3365
|
+
<p class="description">A disclosure widget for expandable/collapsible content.</p>
|
|
3366
|
+
|
|
3367
|
+
<h3>Default (Closed)</h3>
|
|
3368
|
+
<details>
|
|
3369
|
+
<summary>Click to expand</summary>
|
|
3370
|
+
<p>
|
|
3371
|
+
This is the hidden content that appears when the details element is expanded.
|
|
3372
|
+
</p>
|
|
3373
|
+
</details>
|
|
3374
|
+
|
|
3375
|
+
<h3>Default Open</h3>
|
|
3376
|
+
<details open>
|
|
3377
|
+
<summary style="cursor: pointer; padding: 8px 0;">Already expanded</summary>
|
|
3378
|
+
<p>
|
|
3379
|
+
This content is visible by default because of the <code>open</code> attribute.
|
|
3380
|
+
</p>
|
|
3381
|
+
</details>
|
|
3382
|
+
|
|
3383
|
+
<h3>Multiple Sections</h3>
|
|
3384
|
+
<vstack style="gap: 0;">
|
|
3385
|
+
<details>
|
|
3386
|
+
<summary style="cursor: pointer; padding: 8px 0;">Section One</summary>
|
|
3387
|
+
<p>
|
|
3388
|
+
Content for section one.
|
|
3389
|
+
</p>
|
|
3390
|
+
</details>
|
|
3391
|
+
<details>
|
|
3392
|
+
<summary style="cursor: pointer; padding: 8px 0;">Section Two</summary>
|
|
3393
|
+
<p>
|
|
3394
|
+
Content for section two.
|
|
3395
|
+
</p>
|
|
3396
|
+
</details>
|
|
3397
|
+
<details>
|
|
3398
|
+
<summary style="cursor: pointer; padding: 8px 0;">Section Three</summary>
|
|
3399
|
+
<p>
|
|
3400
|
+
Content for section three.
|
|
3401
|
+
</p>
|
|
3402
|
+
</details>
|
|
3403
|
+
</vstack>
|
|
3404
|
+
|
|
3405
|
+
<h3>With Rich Content</h3>
|
|
3406
|
+
<details>
|
|
3407
|
+
<summary style="cursor: pointer; padding: 8px 0;">Advanced Settings</summary>
|
|
3408
|
+
<vstack style="padding: 8px 0 8px 16px;">
|
|
3409
|
+
<fig-field direction="horizontal"
|
|
3410
|
+
style="width: 240px;">
|
|
3411
|
+
<label>Opacity</label>
|
|
3412
|
+
<fig-slider value="100"
|
|
3413
|
+
text="true"
|
|
3414
|
+
units="%"></fig-slider>
|
|
3415
|
+
</fig-field>
|
|
3416
|
+
<fig-field direction="horizontal"
|
|
3417
|
+
style="width: 240px;">
|
|
3418
|
+
<label>Blend Mode</label>
|
|
3419
|
+
<fig-dropdown>
|
|
3420
|
+
<option>Normal</option>
|
|
3421
|
+
<option>Multiply</option>
|
|
3422
|
+
<option>Screen</option>
|
|
3423
|
+
</fig-dropdown>
|
|
3424
|
+
</fig-field>
|
|
3425
|
+
<fig-checkbox label="Enable effects"></fig-checkbox>
|
|
3426
|
+
</vstack>
|
|
3427
|
+
</details>
|
|
3428
|
+
</section>
|
|
3429
|
+
</main>
|
|
3430
|
+
|
|
3431
|
+
<script>
|
|
3432
|
+
// Highlight nav item based on hash
|
|
3433
|
+
function updateActiveNav() {
|
|
3434
|
+
const hash = location.hash || '#avatar';
|
|
3435
|
+
document.querySelectorAll('nav .nav-links a').forEach(a => {
|
|
3436
|
+
a.classList.toggle('active', a.getAttribute('href') === hash);
|
|
3437
|
+
});
|
|
3438
|
+
}
|
|
3439
|
+
|
|
3440
|
+
// Track if we're in a click-initiated scroll
|
|
3441
|
+
let isClickScrolling = false;
|
|
3442
|
+
|
|
3443
|
+
// Update hash on scroll using IntersectionObserver
|
|
3444
|
+
const observer = new IntersectionObserver(entries => {
|
|
3445
|
+
if (isClickScrolling) return;
|
|
3446
|
+
|
|
3447
|
+
entries.forEach(entry => {
|
|
3448
|
+
if (entry.isIntersecting) {
|
|
3449
|
+
history.replaceState(null, '', '#' + entry.target.id);
|
|
3450
|
+
updateActiveNav();
|
|
3451
|
+
}
|
|
3452
|
+
});
|
|
3453
|
+
}, { threshold: 0.3 });
|
|
3454
|
+
|
|
3455
|
+
document.querySelectorAll('section[id]').forEach(s => observer.observe(s));
|
|
3456
|
+
|
|
3457
|
+
// Handle nav clicks - disable observer during scroll
|
|
3458
|
+
document.querySelectorAll('nav .nav-links a').forEach(a => {
|
|
3459
|
+
a.addEventListener('click', (e) => {
|
|
3460
|
+
e.preventDefault();
|
|
3461
|
+
const targetId = a.getAttribute('href');
|
|
3462
|
+
const target = document.querySelector(targetId);
|
|
3463
|
+
if (target) {
|
|
3464
|
+
isClickScrolling = true;
|
|
3465
|
+
history.pushState(null, '', targetId);
|
|
3466
|
+
updateActiveNav();
|
|
3467
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
3468
|
+
// Re-enable observer after scroll completes
|
|
3469
|
+
setTimeout(() => { isClickScrolling = false; }, 500);
|
|
3470
|
+
}
|
|
3471
|
+
});
|
|
3472
|
+
});
|
|
3473
|
+
|
|
3474
|
+
// Initial state
|
|
3475
|
+
window.addEventListener('load', () => {
|
|
3476
|
+
updateActiveNav();
|
|
3477
|
+
if (location.hash) {
|
|
3478
|
+
document.querySelector(location.hash)?.scrollIntoView();
|
|
3479
|
+
}
|
|
3480
|
+
});
|
|
3481
|
+
|
|
3482
|
+
window.addEventListener('hashchange', updateActiveNav);
|
|
3483
|
+
|
|
3484
|
+
// Dialog position helper
|
|
3485
|
+
function openPositionedDialog(position) {
|
|
3486
|
+
const dialog = document.getElementById('positioned-dialog');
|
|
3487
|
+
dialog.setAttribute('position', position);
|
|
3488
|
+
dialog.showModal();
|
|
3489
|
+
}
|
|
3490
|
+
|
|
3491
|
+
// Theme toggle
|
|
3492
|
+
const themeToggle = document.getElementById('theme-toggle');
|
|
3493
|
+
const themeLightBtn = document.getElementById('theme-light-btn');
|
|
3494
|
+
const themeDarkBtn = document.getElementById('theme-dark-btn');
|
|
3495
|
+
|
|
3496
|
+
function setTheme(isDark) {
|
|
3497
|
+
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
|
|
3498
|
+
document.documentElement.classList.toggle('figma-dark', isDark);
|
|
3499
|
+
document.documentElement.classList.toggle('figma-light', !isDark);
|
|
3500
|
+
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
3501
|
+
// Sync switch state
|
|
3502
|
+
if (isDark) {
|
|
3503
|
+
themeToggle.setAttribute('checked', 'true');
|
|
3504
|
+
} else {
|
|
3505
|
+
themeToggle.removeAttribute('checked');
|
|
3506
|
+
}
|
|
3507
|
+
}
|
|
3508
|
+
|
|
3509
|
+
// Initialize theme from localStorage or system preference
|
|
3510
|
+
const savedTheme = localStorage.getItem('theme');
|
|
3511
|
+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
3512
|
+
const isDark = savedTheme ? savedTheme === 'dark' : prefersDark;
|
|
3513
|
+
setTheme(isDark);
|
|
3514
|
+
|
|
3515
|
+
// Listen for toggle changes
|
|
3516
|
+
themeToggle.addEventListener('change', (e) => {
|
|
3517
|
+
setTheme(e.target.checked);
|
|
3518
|
+
});
|
|
3519
|
+
|
|
3520
|
+
// Light button clicks - set to light mode
|
|
3521
|
+
themeLightBtn.addEventListener('click', () => {
|
|
3522
|
+
setTheme(false);
|
|
3523
|
+
});
|
|
3524
|
+
|
|
3525
|
+
// Dark button clicks - set to dark mode
|
|
3526
|
+
themeDarkBtn.addEventListener('click', () => {
|
|
3527
|
+
setTheme(true);
|
|
3528
|
+
});
|
|
3529
|
+
|
|
3530
|
+
// Listen for system preference changes
|
|
3531
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
3532
|
+
if (!localStorage.getItem('theme')) {
|
|
3533
|
+
setTheme(e.matches);
|
|
3534
|
+
}
|
|
3535
|
+
});
|
|
3536
|
+
</script>
|
|
3537
|
+
</body>
|
|
3538
|
+
|
|
3539
|
+
</html>
|