@rogieking/figui3 1.9.7 → 2.0.1
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/base.css +13 -0
- package/components.css +346 -383
- package/example.html +1906 -1052
- package/fig.js +209 -43
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -11,1148 +11,2002 @@
|
|
|
11
11
|
href="fig.css">
|
|
12
12
|
<script src="fig.js"></script>
|
|
13
13
|
<style>
|
|
14
|
+
* {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
body {
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
margin: 0;
|
|
20
|
+
min-height: 100vh;
|
|
21
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
17
22
|
}
|
|
18
|
-
</style>
|
|
19
|
-
</head>
|
|
20
23
|
|
|
21
|
-
|
|
24
|
+
nav {
|
|
25
|
+
position: fixed;
|
|
26
|
+
width: 180px;
|
|
27
|
+
height: 100vh;
|
|
28
|
+
overflow-y: auto;
|
|
29
|
+
background: var(--figma-color-bg-secondary);
|
|
30
|
+
border-right: 1px solid var(--figma-color-border);
|
|
31
|
+
padding: 16px 0 0 0;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
}
|
|
22
35
|
|
|
36
|
+
nav .nav-links {
|
|
37
|
+
flex: 1;
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
}
|
|
23
40
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
style="position: absolute; right: 0;">
|
|
33
|
-
<svg width="24"
|
|
34
|
-
height="24"
|
|
35
|
-
viewBox="0 0 24 24"
|
|
36
|
-
fill="none"
|
|
37
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
38
|
-
<path fill-rule="evenodd"
|
|
39
|
-
clip-rule="evenodd"
|
|
40
|
-
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"
|
|
41
|
-
fill="currentColor"
|
|
42
|
-
fill-opacity="0.9" />
|
|
43
|
-
</svg>
|
|
44
|
-
<fig-dropdown variant="neue">
|
|
45
|
-
<option>One if by sea</option>
|
|
46
|
-
<option>Two if by land</option>
|
|
47
|
-
</fig-dropdown>
|
|
48
|
-
</fig-button>
|
|
49
|
-
</fig-header>
|
|
50
|
-
|
|
51
|
-
<br /><br /><br /><br /><br /><br /><br /><br />
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<fig-field direction="horizontal">
|
|
57
|
-
<label>Position</label>
|
|
58
|
-
<fig-dropdown value="outside"
|
|
59
|
-
variant="neue">
|
|
60
|
-
<option value="inside">Inside</option>
|
|
61
|
-
<option value="center">Center</option>
|
|
62
|
-
<option value="outside">Outside</option>
|
|
63
|
-
</fig-dropdown>
|
|
64
|
-
</fig-field>
|
|
65
|
-
<fig-field direction="horizontal"
|
|
66
|
-
style="width: 320px;">
|
|
67
|
-
<label>Color</label>
|
|
68
|
-
<fig-input-color alpha="true"
|
|
69
|
-
full
|
|
70
|
-
text="true"
|
|
71
|
-
value="#000000"></fig-input-color>
|
|
72
|
-
</fig-field>
|
|
73
|
-
<fig-field direction="horizontal"
|
|
74
|
-
style="width: 320px;">
|
|
75
|
-
<label>Opacity</label>
|
|
76
|
-
<fig-slider alpha="true"
|
|
77
|
-
text="true"
|
|
78
|
-
value="50"
|
|
79
|
-
full
|
|
80
|
-
variant="neue"
|
|
81
|
-
min="0"
|
|
82
|
-
max="100"
|
|
83
|
-
step="1"
|
|
84
|
-
units="%"></fig-slider>
|
|
85
|
-
</fig-field>
|
|
86
|
-
|
|
87
|
-
<br /><br /><br /><br /><br /><br /><br /><br />
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
<fig-input-text disabled
|
|
94
|
-
value="Disabled"><span slot="append">%</span></fig-input-text>
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<fig-slider min="1"
|
|
98
|
-
max="100"
|
|
99
|
-
value="50"
|
|
100
|
-
step="1"
|
|
101
|
-
units="%"
|
|
102
|
-
variant="neue">
|
|
103
|
-
</fig-slider>
|
|
104
|
-
<fig-slider min="1"
|
|
105
|
-
max="100"
|
|
106
|
-
value="50"
|
|
107
|
-
step="1"
|
|
108
|
-
units="%"
|
|
109
|
-
text="true"
|
|
110
|
-
variant="neue">
|
|
111
|
-
</fig-slider>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<fig-popover action="manual"
|
|
115
|
-
open="false"
|
|
116
|
-
size="large">
|
|
117
|
-
<fig-button>
|
|
118
|
-
Hover me
|
|
119
|
-
</fig-button>
|
|
120
|
-
<div popover>
|
|
121
|
-
<fig-header>
|
|
122
|
-
<h2>Slider</h2>
|
|
123
|
-
</fig-header>
|
|
124
|
-
<fig-dropdown>
|
|
125
|
-
<option>One</option>
|
|
126
|
-
<option>Two</option>
|
|
127
|
-
</fig-dropdown>
|
|
128
|
-
<fig-field direction="horizontal">
|
|
129
|
-
<label>Slider</label>
|
|
130
|
-
<fig-slider min="1"
|
|
131
|
-
max="100"
|
|
132
|
-
value="50"
|
|
133
|
-
step="1"
|
|
134
|
-
units="%"
|
|
135
|
-
transform="100">
|
|
136
|
-
</fig-slider>
|
|
137
|
-
</fig-field>
|
|
138
|
-
<br />
|
|
139
|
-
<fig-field direction="horizontal">
|
|
140
|
-
<label>Slider</label>
|
|
141
|
-
<fig-slider min="1"
|
|
142
|
-
max="100"
|
|
143
|
-
value="50"
|
|
144
|
-
step="1"
|
|
145
|
-
units="%"
|
|
146
|
-
transform="100">
|
|
147
|
-
</fig-slider>
|
|
41
|
+
nav .theme-switch {
|
|
42
|
+
padding: 12px 16px;
|
|
43
|
+
border-top: 1px solid var(--figma-color-border);
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
gap: 8px;
|
|
47
|
+
font-size: 13px;
|
|
48
|
+
color: var(--figma-color-text-secondary);
|
|
148
49
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
50
|
+
&:has([checked="true"]) {
|
|
51
|
+
#theme-dark-btn {
|
|
52
|
+
color: var(--figma-color-icon-selected);
|
|
53
|
+
}
|
|
152
54
|
|
|
153
|
-
|
|
55
|
+
#theme-light-btn {
|
|
56
|
+
color: var(--figma-color-icon-secondary);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
154
59
|
|
|
60
|
+
&:not(:has([checked="true"])) {
|
|
61
|
+
#theme-light-btn {
|
|
62
|
+
color: var(--figma-color-icon-selected);
|
|
63
|
+
}
|
|
155
64
|
|
|
156
|
-
|
|
65
|
+
#theme-dark-btn {
|
|
66
|
+
color: var(--figma-color-icon-secondary);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
157
70
|
|
|
71
|
+
nav .theme-switch fig-button {
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
}
|
|
158
74
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
<fig-button>
|
|
169
|
-
Test
|
|
170
|
-
</fig-button>
|
|
171
|
-
</fig-tooltip>
|
|
172
|
-
<fig-tooltip text="Tooltip that is a bit longer"
|
|
173
|
-
delay="0">
|
|
174
|
-
<fig-button>
|
|
175
|
-
Test
|
|
176
|
-
</fig-button>
|
|
177
|
-
</fig-tooltip>
|
|
178
|
-
<fig-tooltip text="Tooltip that is a bit longer ish"
|
|
179
|
-
delay="0">
|
|
180
|
-
<fig-button>
|
|
181
|
-
Test
|
|
182
|
-
</fig-button>
|
|
183
|
-
</fig-tooltip>
|
|
184
|
-
<fig-tooltip text="Tooltip that is a bit longer ish yet"
|
|
185
|
-
delay="0">
|
|
186
|
-
<fig-button>
|
|
187
|
-
Test
|
|
188
|
-
</fig-button>
|
|
189
|
-
</fig-tooltip>
|
|
190
|
-
<fig-tooltip text="Tooltip that is a bit longer and has a lot of text and even more text"
|
|
191
|
-
delay="0">
|
|
192
|
-
<fig-button>
|
|
193
|
-
Test
|
|
194
|
-
</fig-button>
|
|
195
|
-
</fig-tooltip>
|
|
196
|
-
<fig-tooltip text="Super mega fuckin long ass tooltip that likely shouldn't even be possible to fit in the space"
|
|
197
|
-
delay="0">
|
|
198
|
-
<fig-button>
|
|
199
|
-
Test
|
|
200
|
-
</fig-button>
|
|
201
|
-
</fig-tooltip>
|
|
75
|
+
nav .nav-links h1 {
|
|
76
|
+
font-size: 11px;
|
|
77
|
+
font-weight: 600;
|
|
78
|
+
text-transform: uppercase;
|
|
79
|
+
letter-spacing: 0.05em;
|
|
80
|
+
color: var(--figma-color-text-secondary);
|
|
81
|
+
padding: 8px 20px;
|
|
82
|
+
margin: 0 0 8px 0;
|
|
83
|
+
}
|
|
202
84
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
<path d="M14 5.5C15.3807 5.5 16.5 6.61929 16.5 8C16.5 8.81955 16.1034 9.54407 15.4941 10C16.1034 10.4559 16.5 11.1804 16.5 12C16.5 13.3807 15.3807 14.5 14 14.5C13.4363 14.5 12.9182 14.3108 12.5 13.9961V16C12.5 17.3807 11.3807 18.5 10 18.5C8.61929 18.5 7.5 17.3807 7.5 16C7.5 15.1807 7.89593 14.456 8.50488 14C7.89593 13.544 7.5 12.8193 7.5 12C7.5 11.1807 7.89593 10.456 8.50488 10C7.89593 9.54404 7.5 8.81927 7.5 8C7.5 6.61929 8.61929 5.5 10 5.5H14ZM10 14.5C9.17157 14.5 8.5 15.1716 8.5 16C8.5 16.8284 9.17157 17.5 10 17.5C10.8284 17.5 11.5 16.8284 11.5 16V14.5H10ZM14 10.5C13.1716 10.5 12.5 11.1716 12.5 12C12.5 12.8284 13.1716 13.5 14 13.5C14.8284 13.5 15.5 12.8284 15.5 12C15.5 11.1716 14.8284 10.5 14 10.5ZM10 10.5C9.17157 10.5 8.5 11.1716 8.5 12C8.5 12.8284 9.17157 13.5 10 13.5H11.5V10.5H10ZM10 6.5C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11.5V6.5H10ZM12.5 9.5H14C14.8284 9.5 15.5 8.82843 15.5 8C15.5 7.17157 14.8284 6.5 14 6.5H12.5V9.5Z"
|
|
214
|
-
fill="black"
|
|
215
|
-
fill-opacity="0.9" />
|
|
216
|
-
</svg>
|
|
217
|
-
|
|
218
|
-
Install</fig-button>
|
|
219
|
-
<fig-button type="link"
|
|
220
|
-
target="_blank"
|
|
221
|
-
size="large"
|
|
222
|
-
href="https://www.google.com">
|
|
223
|
-
<svg width="24"
|
|
224
|
-
height="24"
|
|
225
|
-
viewBox="0 0 24 24"
|
|
226
|
-
fill="none"
|
|
227
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
228
|
-
<path d="M14 5.5C15.3807 5.5 16.5 6.61929 16.5 8C16.5 8.81955 16.1034 9.54407 15.4941 10C16.1034 10.4559 16.5 11.1804 16.5 12C16.5 13.3807 15.3807 14.5 14 14.5C13.4363 14.5 12.9182 14.3108 12.5 13.9961V16C12.5 17.3807 11.3807 18.5 10 18.5C8.61929 18.5 7.5 17.3807 7.5 16C7.5 15.1807 7.89593 14.456 8.50488 14C7.89593 13.544 7.5 12.8193 7.5 12C7.5 11.1807 7.89593 10.456 8.50488 10C7.89593 9.54404 7.5 8.81927 7.5 8C7.5 6.61929 8.61929 5.5 10 5.5H14ZM10 14.5C9.17157 14.5 8.5 15.1716 8.5 16C8.5 16.8284 9.17157 17.5 10 17.5C10.8284 17.5 11.5 16.8284 11.5 16V14.5H10ZM14 10.5C13.1716 10.5 12.5 11.1716 12.5 12C12.5 12.8284 13.1716 13.5 14 13.5C14.8284 13.5 15.5 12.8284 15.5 12C15.5 11.1716 14.8284 10.5 14 10.5ZM10 10.5C9.17157 10.5 8.5 11.1716 8.5 12C8.5 12.8284 9.17157 13.5 10 13.5H11.5V10.5H10ZM10 6.5C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11.5V6.5H10ZM12.5 9.5H14C14.8284 9.5 15.5 8.82843 15.5 8C15.5 7.17157 14.8284 6.5 14 6.5H12.5V9.5Z"
|
|
229
|
-
fill="black"
|
|
230
|
-
fill-opacity="0.9" />
|
|
231
|
-
</svg>
|
|
232
|
-
|
|
233
|
-
Install</fig-button>
|
|
234
|
-
|
|
235
|
-
<select>
|
|
236
|
-
<optgroup label="Numbers">
|
|
237
|
-
<legend>Numbers</legend>
|
|
238
|
-
<option>One</option>
|
|
239
|
-
<option>Two</option>
|
|
240
|
-
<option>One</option>
|
|
241
|
-
<option>Two</option>
|
|
242
|
-
<option>One</option>
|
|
243
|
-
<option>Two</option>
|
|
244
|
-
</optgroup>
|
|
245
|
-
<optgroup label="Fruits">
|
|
246
|
-
<legend>Fruits</legend>
|
|
247
|
-
<option>Apple</option>
|
|
248
|
-
<option>Banana</option>
|
|
249
|
-
<option>Apple</option>
|
|
250
|
-
<option>Banana</option>
|
|
251
|
-
<option>Apple</option>
|
|
252
|
-
<option>Banana</option>
|
|
253
|
-
<option>Apple</option>
|
|
254
|
-
<option>Banana</option>
|
|
255
|
-
<option>Apple</option>
|
|
256
|
-
<option>Banana</option>
|
|
257
|
-
</optgroup>
|
|
258
|
-
</select>
|
|
259
|
-
|
|
260
|
-
<fig-slider min="-1"
|
|
261
|
-
max="1"
|
|
262
|
-
name="u_thickness"
|
|
263
|
-
variant="minimal"
|
|
264
|
-
step="0.01"
|
|
265
|
-
value="0"
|
|
266
|
-
text="true"
|
|
267
|
-
type="range"
|
|
268
|
-
units="%"
|
|
269
|
-
transform="100">
|
|
270
|
-
</fig-slider>
|
|
271
|
-
<fig-input-text type="number"
|
|
272
|
-
min="1"
|
|
273
|
-
style="width: 100px;"
|
|
274
|
-
max="2"
|
|
275
|
-
step="0.01"
|
|
276
|
-
value="1.5"
|
|
277
|
-
type="range"
|
|
278
|
-
units="%"
|
|
279
|
-
onInput="console.log(event.target.value)"
|
|
280
|
-
transform="100">
|
|
281
|
-
</fig-input-text>
|
|
282
|
-
<fig-slider min="1"
|
|
283
|
-
max="2"
|
|
284
|
-
step="0.01"
|
|
285
|
-
value="1.5"
|
|
286
|
-
type="range"
|
|
287
|
-
units="%"
|
|
288
|
-
text="true"
|
|
289
|
-
onInput="console.log(event.target.value)"
|
|
290
|
-
transform="100">
|
|
291
|
-
</fig-slider>
|
|
292
|
-
<fig-input-angle text="true"
|
|
293
|
-
value="0"
|
|
294
|
-
onInput="console.log(event.target.adjacent, event.target.opposite)"></fig-input-angle>
|
|
295
|
-
<br /><br />
|
|
296
|
-
<fig-input-joystick></fig-input-joystick>
|
|
297
|
-
<br /><br />
|
|
298
|
-
<fig-input-joystick text="true"
|
|
299
|
-
value="0,0"
|
|
300
|
-
onInput="console.log(event.target.value)"></fig-input-joystick>
|
|
301
|
-
<fig-header>
|
|
302
|
-
<h2>Details</h2>
|
|
303
|
-
</fig-header>
|
|
304
|
-
<details>
|
|
305
|
-
<summary>Advanced settings</summary>
|
|
306
|
-
<p>Some more content here</p>
|
|
307
|
-
</details>
|
|
308
|
-
<fig-header>
|
|
309
|
-
<h2>Avatar</h2>
|
|
310
|
-
</fig-header>
|
|
311
|
-
<fig-field>
|
|
312
|
-
<label>Default</label>
|
|
313
|
-
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
314
|
-
name="John Doe"></fig-avatar>
|
|
315
|
-
</fig-field>
|
|
316
|
-
<fig-field>
|
|
317
|
-
<label>Large</label>
|
|
318
|
-
<fig-avatar size="large"
|
|
319
|
-
src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
320
|
-
name="John Doe"></fig-avatar>
|
|
321
|
-
</fig-field>
|
|
322
|
-
<fig-field>
|
|
323
|
-
<label>No image (initials)</label>
|
|
324
|
-
<fig-avatar name="John Doe"></fig-avatar>
|
|
325
|
-
</fig-field>
|
|
326
|
-
<fig-field>
|
|
327
|
-
<label>Large</label>
|
|
328
|
-
<fig-avatar size="large"
|
|
329
|
-
src="https://gravatar.com/avatar/b6a96b1e55e3771caab3225dd98c8633?size=256"
|
|
330
|
-
name="Rogie King"></fig-avatar>
|
|
331
|
-
</fig-field>
|
|
332
|
-
|
|
333
|
-
<fig-header>
|
|
334
|
-
<h2>Tabs</h2>
|
|
335
|
-
</fig-header>
|
|
336
|
-
<fig-field>
|
|
337
|
-
<fig-tabs>
|
|
338
|
-
<fig-tab selected
|
|
339
|
-
content="#tab-1-content">Tab #1</fig-tab>
|
|
340
|
-
<fig-tab content="#tab-2-content">Tab #2</fig-tab>
|
|
341
|
-
</fig-tabs>
|
|
342
|
-
<fig-tab-content id="tab-1-content">
|
|
343
|
-
Content for Tab #1
|
|
344
|
-
</fig-tab-content>
|
|
345
|
-
<fig-tab-content id="tab-2-content">
|
|
346
|
-
Content for Tab #2
|
|
347
|
-
</fig-tab-content>
|
|
348
|
-
</fig-field>
|
|
349
|
-
<fig-header>
|
|
350
|
-
<h2>Segmented control</h2>
|
|
351
|
-
</fig-header>
|
|
352
|
-
<fig-field>
|
|
353
|
-
<fig-segmented-control>
|
|
354
|
-
<fig-segment selected>One</fig-segment>
|
|
355
|
-
<fig-segment>Two</fig-segment>
|
|
356
|
-
<fig-segment>Three</fig-segment>
|
|
357
|
-
</fig-segmented-control>
|
|
358
|
-
</fig-field>
|
|
359
|
-
<fig-header>
|
|
360
|
-
<h2>Image</h2>
|
|
361
|
-
</fig-header>
|
|
362
|
-
<fig-field>
|
|
363
|
-
<label>Default</label>
|
|
364
|
-
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
|
|
365
|
-
</fig-field>
|
|
366
|
-
<fig-field>
|
|
367
|
-
<label>Medium</label>
|
|
368
|
-
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
369
|
-
size="medium"></fig-image>
|
|
370
|
-
</fig-field>
|
|
371
|
-
<fig-field>
|
|
372
|
-
<label>Large (with upload)</label>
|
|
373
|
-
<fig-image upload="true"
|
|
374
|
-
download="true"
|
|
375
|
-
label="Upload image"
|
|
376
|
-
size="large"></fig-image>
|
|
377
|
-
</fig-field>
|
|
378
|
-
<script>
|
|
379
|
-
function updateImages() {
|
|
380
|
-
const images = document.querySelectorAll('fig-image');
|
|
381
|
-
images.forEach(image => {
|
|
382
|
-
image.setAttribute("src", "https://picsum.photos/200?random=" + Math.random());
|
|
383
|
-
//image.src = "https://picsum.photos/200?random=" + Math.random();
|
|
384
|
-
});
|
|
385
|
-
}
|
|
386
|
-
</script>
|
|
85
|
+
nav .nav-links a {
|
|
86
|
+
display: block;
|
|
87
|
+
padding: 6px 12px;
|
|
88
|
+
margin: 0 8px;
|
|
89
|
+
color: var(--figma-color-text-secondary);
|
|
90
|
+
text-decoration: none;
|
|
91
|
+
font-size: 13px;
|
|
92
|
+
border-radius: var(--radius-medium);
|
|
93
|
+
transition: background 0.15s, color 0.15s;
|
|
94
|
+
}
|
|
387
95
|
|
|
388
|
-
|
|
96
|
+
nav .nav-links a:hover {
|
|
97
|
+
color: var(--figma-color-text);
|
|
98
|
+
background: var(--figma-color-bg-hover);
|
|
99
|
+
}
|
|
389
100
|
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
101
|
+
nav .nav-links a.active {
|
|
102
|
+
color: var(--figma-color-text-brand);
|
|
103
|
+
background: var(--figma-color-bg-selected);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
main {
|
|
107
|
+
margin-left: 180px;
|
|
108
|
+
padding: 24px 32px;
|
|
109
|
+
overflow-y: auto;
|
|
110
|
+
max-width: 800px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
section {
|
|
114
|
+
scroll-margin-top: 24px;
|
|
115
|
+
padding-bottom: 32px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
main>hr {
|
|
119
|
+
border: none;
|
|
120
|
+
border-top: 1px solid var(--figma-color-border);
|
|
121
|
+
margin: 0 0 32px 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
section h2 {
|
|
125
|
+
font-size: 18px;
|
|
126
|
+
font-weight: 600;
|
|
127
|
+
color: var(--figma-color-text);
|
|
128
|
+
margin: 0 0 8px 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
section>p.description {
|
|
132
|
+
font-size: 13px;
|
|
133
|
+
color: var(--figma-color-text-secondary);
|
|
134
|
+
margin: 0 0 24px 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
hstack {
|
|
138
|
+
display: flex;
|
|
139
|
+
flex-wrap: wrap;
|
|
140
|
+
gap: 8px;
|
|
141
|
+
align-items: center;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
vstack {
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
gap: 8px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.example-row {
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
gap: 16px;
|
|
154
|
+
margin-bottom: 12px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.example-row>label {
|
|
158
|
+
min-width: 140px;
|
|
159
|
+
font-size: 12px;
|
|
160
|
+
color: var(--figma-color-text-secondary);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
code {
|
|
164
|
+
font-family: "SF Mono", Monaco, Consolas, monospace;
|
|
165
|
+
font-size: 11px;
|
|
166
|
+
background: var(--figma-color-bg-secondary);
|
|
167
|
+
padding: 2px 6px;
|
|
168
|
+
border-radius: 4px;
|
|
169
|
+
color: var(--figma-color-text);
|
|
170
|
+
}
|
|
171
|
+
</style>
|
|
172
|
+
</head>
|
|
173
|
+
|
|
174
|
+
<body>
|
|
175
|
+
<nav>
|
|
176
|
+
<div class="nav-links">
|
|
177
|
+
<h1>Components</h1>
|
|
178
|
+
<a href="#avatar">Avatar</a>
|
|
179
|
+
<a href="#button">Button</a>
|
|
180
|
+
<a href="#checkbox">Checkbox</a>
|
|
181
|
+
<a href="#chit">Chit</a>
|
|
182
|
+
<a href="#combo-input">Combo Input</a>
|
|
183
|
+
<a href="#dialog">Dialog</a>
|
|
184
|
+
<a href="#dropdown">Dropdown</a>
|
|
185
|
+
<a href="#field">Field</a>
|
|
186
|
+
<a href="#header">Header</a>
|
|
187
|
+
<a href="#image">Image</a>
|
|
188
|
+
<a href="#input-angle">Input Angle</a>
|
|
189
|
+
<a href="#input-color">Input Color</a>
|
|
190
|
+
<a href="#input-joystick">Input Joystick</a>
|
|
191
|
+
<a href="#input-number">Input Number</a>
|
|
192
|
+
<a href="#input-text">Input Text</a>
|
|
193
|
+
<a href="#popover">Popover</a>
|
|
194
|
+
<a href="#radio">Radio</a>
|
|
195
|
+
<a href="#segmented-control">Segmented Control</a>
|
|
196
|
+
<a href="#slider">Slider</a>
|
|
197
|
+
<a href="#spinner">Spinner</a>
|
|
198
|
+
<a href="#switch">Switch</a>
|
|
199
|
+
<a href="#tabs">Tabs</a>
|
|
200
|
+
<a href="#toast">Toast</a>
|
|
201
|
+
<a href="#tooltip">Tooltip</a>
|
|
202
|
+
<hr>
|
|
203
|
+
<h1>Basics</h1>
|
|
204
|
+
<a href="#hstack">HStack</a>
|
|
205
|
+
<a href="#vstack">VStack</a>
|
|
206
|
+
<a href="#hr">HR</a>
|
|
207
|
+
<a href="#code">Code</a>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="theme-switch">
|
|
210
|
+
<fig-button id="theme-light-btn"
|
|
211
|
+
variant="ghost"
|
|
212
|
+
icon>
|
|
213
|
+
<svg width="24"
|
|
214
|
+
height="24"
|
|
215
|
+
viewBox="0 0 24 24"
|
|
216
|
+
fill="none">
|
|
217
|
+
<path fill-rule="evenodd"
|
|
218
|
+
clip-rule="evenodd"
|
|
219
|
+
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"
|
|
220
|
+
fill="currentColor" />
|
|
221
|
+
</svg>
|
|
222
|
+
</fig-button>
|
|
223
|
+
<fig-switch id="theme-toggle"></fig-switch>
|
|
224
|
+
<fig-button id="theme-dark-btn"
|
|
225
|
+
variant="ghost"
|
|
226
|
+
icon>
|
|
227
|
+
<svg width="24"
|
|
228
|
+
height="24"
|
|
229
|
+
viewBox="0 0 24 24"
|
|
230
|
+
fill="none">
|
|
431
231
|
<path fill-rule="evenodd"
|
|
432
232
|
clip-rule="evenodd"
|
|
433
|
-
d="
|
|
434
|
-
fill="currentColor"
|
|
435
|
-
</svg
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
233
|
+
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"
|
|
234
|
+
fill="currentColor" />
|
|
235
|
+
</svg>
|
|
236
|
+
</fig-button>
|
|
237
|
+
</div>
|
|
238
|
+
</nav>
|
|
239
|
+
|
|
240
|
+
<main>
|
|
241
|
+
<!-- Avatar -->
|
|
242
|
+
<section id="avatar">
|
|
243
|
+
<h2>Avatar</h2>
|
|
244
|
+
<p class="description">Displays a user's profile image or initials.</p>
|
|
245
|
+
|
|
246
|
+
<h3>Sizes</h3>
|
|
247
|
+
<div class="example-row">
|
|
248
|
+
<label>Default</label>
|
|
249
|
+
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
250
|
+
name="John Doe"></fig-avatar>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="example-row">
|
|
253
|
+
<label>Large</label>
|
|
254
|
+
<fig-avatar size="large"
|
|
255
|
+
src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
256
|
+
name="John Doe"></fig-avatar>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<h3>Fallback (Initials)</h3>
|
|
260
|
+
<div class="example-row">
|
|
261
|
+
<label>No image</label>
|
|
262
|
+
<fig-avatar name="John Doe"></fig-avatar>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="example-row">
|
|
265
|
+
<label>No image (large)</label>
|
|
266
|
+
<fig-avatar size="large"
|
|
267
|
+
name="Jane Smith"></fig-avatar>
|
|
268
|
+
</div>
|
|
269
|
+
</section>
|
|
270
|
+
<hr>
|
|
271
|
+
|
|
272
|
+
<!-- Button -->
|
|
273
|
+
<section id="button">
|
|
274
|
+
<h2>Button</h2>
|
|
275
|
+
<p class="description">A custom button element supporting variants, types, sizes, and states.</p>
|
|
276
|
+
|
|
277
|
+
<h3>Variants</h3>
|
|
278
|
+
<div class="example-row">
|
|
279
|
+
<label>Primary (default)</label>
|
|
443
280
|
<fig-button>Primary</fig-button>
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
281
|
+
</div>
|
|
282
|
+
<div class="example-row">
|
|
283
|
+
<label>Secondary</label>
|
|
284
|
+
<fig-button variant="secondary">Secondary</fig-button>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="example-row">
|
|
287
|
+
<label>Ghost</label>
|
|
288
|
+
<fig-button variant="ghost">Ghost</fig-button>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="example-row">
|
|
291
|
+
<label>Link</label>
|
|
292
|
+
<fig-button variant="link">Link Button</fig-button>
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<h3>Sizes</h3>
|
|
296
|
+
<div class="example-row">
|
|
297
|
+
<label>Default</label>
|
|
298
|
+
<fig-button>Default Size</fig-button>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="example-row">
|
|
301
|
+
<label>Large</label>
|
|
302
|
+
<fig-button size="large">Large Size</fig-button>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="example-row">
|
|
305
|
+
<label>Compact</label>
|
|
306
|
+
<fig-button size="compact">Compact</fig-button>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<h3>States</h3>
|
|
310
|
+
<div class="example-row">
|
|
311
|
+
<label>Disabled (primary)</label>
|
|
312
|
+
<fig-button disabled>Disabled</fig-button>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="example-row">
|
|
315
|
+
<label>Disabled (secondary)</label>
|
|
316
|
+
<fig-button variant="secondary"
|
|
317
|
+
disabled>Disabled</fig-button>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="example-row">
|
|
320
|
+
<label>Disabled (ghost)</label>
|
|
321
|
+
<fig-button variant="ghost"
|
|
322
|
+
disabled>Disabled</fig-button>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="example-row">
|
|
325
|
+
<label>Disabled (link)</label>
|
|
326
|
+
<fig-button variant="link"
|
|
327
|
+
disabled>Disabled</fig-button>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<h3>Icon Buttons</h3>
|
|
331
|
+
<div class="example-row">
|
|
332
|
+
<label>Icon only</label>
|
|
333
|
+
<fig-button icon="true">
|
|
334
|
+
<svg width="16"
|
|
335
|
+
height="16"
|
|
336
|
+
viewBox="0 0 16 16"
|
|
450
337
|
fill="none"
|
|
451
338
|
xmlns="http://www.w3.org/2000/svg">
|
|
452
339
|
<path fill-rule="evenodd"
|
|
453
340
|
clip-rule="evenodd"
|
|
454
|
-
d="
|
|
455
|
-
fill="currentColor"
|
|
456
|
-
fill-opacity="0.9" />
|
|
341
|
+
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"
|
|
342
|
+
fill="currentColor" />
|
|
457
343
|
</svg>
|
|
458
|
-
<fig-dropdown>
|
|
459
|
-
<option>One</option>
|
|
460
|
-
<option>Two</option>
|
|
461
|
-
</fig-dropdown>
|
|
462
344
|
</fig-button>
|
|
463
|
-
</
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
345
|
+
</div>
|
|
346
|
+
<div class="example-row">
|
|
347
|
+
<label>Icon (secondary)</label>
|
|
348
|
+
<fig-button variant="secondary"
|
|
349
|
+
icon="true">
|
|
350
|
+
<svg width="16"
|
|
351
|
+
height="16"
|
|
352
|
+
viewBox="0 0 16 16"
|
|
353
|
+
fill="none"
|
|
354
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
355
|
+
<path fill-rule="evenodd"
|
|
356
|
+
clip-rule="evenodd"
|
|
357
|
+
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"
|
|
358
|
+
fill="currentColor" />
|
|
359
|
+
</svg>
|
|
360
|
+
</fig-button>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="example-row">
|
|
363
|
+
<label>Icon (ghost)</label>
|
|
364
|
+
<fig-button variant="ghost"
|
|
365
|
+
icon="true">
|
|
366
|
+
<svg width="16"
|
|
367
|
+
height="16"
|
|
368
|
+
viewBox="0 0 16 16"
|
|
369
|
+
fill="none"
|
|
370
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
371
|
+
<path fill-rule="evenodd"
|
|
372
|
+
clip-rule="evenodd"
|
|
373
|
+
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"
|
|
374
|
+
fill="currentColor" />
|
|
375
|
+
</svg>
|
|
376
|
+
</fig-button>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="example-row">
|
|
379
|
+
<label>Icon (link)</label>
|
|
380
|
+
<fig-button variant="link"
|
|
381
|
+
icon="true">
|
|
382
|
+
<svg width="16"
|
|
383
|
+
height="16"
|
|
384
|
+
viewBox="0 0 16 16"
|
|
385
|
+
fill="none"
|
|
386
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
387
|
+
<path fill-rule="evenodd"
|
|
388
|
+
clip-rule="evenodd"
|
|
389
|
+
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"
|
|
390
|
+
fill="currentColor" />
|
|
391
|
+
</svg>
|
|
392
|
+
</fig-button>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="example-row">
|
|
395
|
+
<label>Icon disabled</label>
|
|
470
396
|
<fig-button variant="secondary"
|
|
471
397
|
icon="true"
|
|
472
|
-
|
|
473
|
-
<svg width="
|
|
474
|
-
height="
|
|
475
|
-
viewBox="0 0
|
|
398
|
+
disabled>
|
|
399
|
+
<svg width="16"
|
|
400
|
+
height="16"
|
|
401
|
+
viewBox="0 0 16 16"
|
|
476
402
|
fill="none"
|
|
477
403
|
xmlns="http://www.w3.org/2000/svg">
|
|
478
404
|
<path fill-rule="evenodd"
|
|
479
405
|
clip-rule="evenodd"
|
|
480
|
-
d="
|
|
481
|
-
fill="currentColor"
|
|
482
|
-
fill-opacity="0.9" />
|
|
406
|
+
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"
|
|
407
|
+
fill="currentColor" />
|
|
483
408
|
</svg>
|
|
409
|
+
</fig-button>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
<h3>Button Types</h3>
|
|
413
|
+
<div class="example-row">
|
|
414
|
+
<label>Select (with dropdown)</label>
|
|
415
|
+
<fig-button type="select">
|
|
416
|
+
Select
|
|
484
417
|
<fig-dropdown>
|
|
485
|
-
<option>One</option>
|
|
486
|
-
<option>Two</option>
|
|
418
|
+
<option>Option One</option>
|
|
419
|
+
<option>Option Two</option>
|
|
420
|
+
<option>Option Three</option>
|
|
487
421
|
</fig-dropdown>
|
|
488
422
|
</fig-button>
|
|
489
|
-
</
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
<
|
|
507
|
-
disabled>Button 2</fig-button>
|
|
508
|
-
<fig-button variant="secondary"
|
|
509
|
-
disabled>Button 3</fig-button>
|
|
510
|
-
</fig-button-combo>
|
|
511
|
-
</fig-field>
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
<fig-field>
|
|
515
|
-
<label>Select button</label>
|
|
516
|
-
<fig-button type="select">
|
|
517
|
-
Select
|
|
518
|
-
<fig-dropdown>
|
|
519
|
-
<option>One</option>
|
|
520
|
-
<option>Two</option>
|
|
521
|
-
</fig-dropdown>
|
|
522
|
-
</fig-button>
|
|
523
|
-
</fig-field>
|
|
524
|
-
|
|
525
|
-
<fig-field>
|
|
526
|
-
<label>Select button (icon)</label>
|
|
527
|
-
<fig-button icon="true"
|
|
528
|
-
type="select">
|
|
529
|
-
<svg width="24"
|
|
530
|
-
height="24"
|
|
531
|
-
viewBox="0 0 24 24"
|
|
532
|
-
fill="none"
|
|
533
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
534
|
-
<path fill-rule="evenodd"
|
|
535
|
-
clip-rule="evenodd"
|
|
536
|
-
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"
|
|
537
|
-
fill="currentColor"
|
|
538
|
-
fill-opacity="0.9" />
|
|
539
|
-
</svg>
|
|
540
|
-
<fig-dropdown>
|
|
541
|
-
<option>One</option>
|
|
542
|
-
<option>Two</option>
|
|
543
|
-
</fig-dropdown>
|
|
544
|
-
</fig-button>
|
|
545
|
-
</fig-field>
|
|
546
|
-
|
|
547
|
-
<fig-field>
|
|
548
|
-
<label>Upload button</label>
|
|
549
|
-
<fig-button variant="secondary"
|
|
550
|
-
type="upload">
|
|
551
|
-
Upload
|
|
552
|
-
<input type="file" />
|
|
553
|
-
</fig-button>
|
|
554
|
-
</fig-field>
|
|
555
|
-
|
|
556
|
-
<fig-field>
|
|
557
|
-
<label>Toggle button</label>
|
|
558
|
-
<fig-button variant="ghost"
|
|
559
|
-
type="toggle"
|
|
560
|
-
icon="true">
|
|
561
|
-
<svg class="svg"
|
|
562
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
563
|
-
width="16"
|
|
564
|
-
height="16"
|
|
565
|
-
viewBox="0 0 16 16">
|
|
566
|
-
<path fill="currentColor"
|
|
567
|
-
fill-opacity="1"
|
|
568
|
-
fill-rule="evenodd"
|
|
569
|
-
stroke="none"
|
|
570
|
-
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">
|
|
571
|
-
</path>
|
|
572
|
-
</svg>
|
|
573
|
-
</fig-button>
|
|
574
|
-
</fig-field>
|
|
575
|
-
|
|
576
|
-
<fig-field>
|
|
577
|
-
<label>Toggle button (selected) with tooltip</label>
|
|
578
|
-
<fig-tooltip text="Toggle off/on">
|
|
423
|
+
</div>
|
|
424
|
+
<div class="example-row">
|
|
425
|
+
<label>Toggle</label>
|
|
426
|
+
<fig-button variant="ghost"
|
|
427
|
+
type="toggle"
|
|
428
|
+
icon="true">
|
|
429
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
430
|
+
width="16"
|
|
431
|
+
height="16"
|
|
432
|
+
viewBox="0 0 16 16">
|
|
433
|
+
<path fill="currentColor"
|
|
434
|
+
fill-rule="evenodd"
|
|
435
|
+
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" />
|
|
436
|
+
</svg>
|
|
437
|
+
</fig-button>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="example-row">
|
|
440
|
+
<label>Toggle (selected)</label>
|
|
579
441
|
<fig-button variant="ghost"
|
|
580
442
|
type="toggle"
|
|
581
443
|
icon="true"
|
|
582
444
|
selected="true">
|
|
583
|
-
<svg
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
viewBox="0 0
|
|
445
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
446
|
+
width="16"
|
|
447
|
+
height="16"
|
|
448
|
+
viewBox="0 0 16 16">
|
|
587
449
|
<path fill="currentColor"
|
|
588
450
|
fill-rule="evenodd"
|
|
589
|
-
d="
|
|
590
|
-
clip-rule="evenodd"></path>
|
|
451
|
+
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" />
|
|
591
452
|
</svg>
|
|
592
453
|
</fig-button>
|
|
593
|
-
</
|
|
594
|
-
|
|
454
|
+
</div>
|
|
455
|
+
<div class="example-row">
|
|
456
|
+
<label>Upload</label>
|
|
457
|
+
<fig-button variant="secondary"
|
|
458
|
+
type="upload">
|
|
459
|
+
Upload
|
|
460
|
+
<input type="file" />
|
|
461
|
+
</fig-button>
|
|
462
|
+
</div>
|
|
463
|
+
<div class="example-row">
|
|
464
|
+
<label>Link</label>
|
|
465
|
+
<fig-button type="link"
|
|
466
|
+
href="https://www.figma.com"
|
|
467
|
+
target="_blank">Visit Figma</fig-button>
|
|
468
|
+
</div>
|
|
595
469
|
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
470
|
+
<h3>Button Combo</h3>
|
|
471
|
+
<div class="example-row">
|
|
472
|
+
<label>Primary combo</label>
|
|
473
|
+
<fig-button-combo>
|
|
474
|
+
<fig-button>Primary</fig-button>
|
|
475
|
+
<fig-button icon="true"
|
|
476
|
+
type="select"
|
|
477
|
+
size="compact">
|
|
478
|
+
<svg width="24"
|
|
479
|
+
height="24"
|
|
480
|
+
viewBox="0 0 24 24"
|
|
481
|
+
fill="none"
|
|
482
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
483
|
+
<path fill-rule="evenodd"
|
|
484
|
+
clip-rule="evenodd"
|
|
485
|
+
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"
|
|
486
|
+
fill="currentColor"
|
|
487
|
+
fill-opacity="0.9" />
|
|
488
|
+
</svg>
|
|
489
|
+
<fig-dropdown>
|
|
490
|
+
<option>Option One</option>
|
|
491
|
+
<option>Option Two</option>
|
|
492
|
+
</fig-dropdown>
|
|
493
|
+
</fig-button>
|
|
494
|
+
</fig-button-combo>
|
|
495
|
+
</div>
|
|
496
|
+
<div class="example-row">
|
|
497
|
+
<label>Secondary combo</label>
|
|
498
|
+
<fig-button-combo>
|
|
499
|
+
<fig-button variant="secondary">Secondary</fig-button>
|
|
500
|
+
<fig-button variant="secondary"
|
|
501
|
+
icon="true"
|
|
502
|
+
type="select">
|
|
503
|
+
<svg width="24"
|
|
504
|
+
height="24"
|
|
505
|
+
viewBox="0 0 24 24"
|
|
506
|
+
fill="none"
|
|
507
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
508
|
+
<path fill-rule="evenodd"
|
|
509
|
+
clip-rule="evenodd"
|
|
510
|
+
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"
|
|
511
|
+
fill="currentColor"
|
|
512
|
+
fill-opacity="0.9" />
|
|
513
|
+
</svg>
|
|
514
|
+
<fig-dropdown>
|
|
515
|
+
<option>Option One</option>
|
|
516
|
+
<option>Option Two</option>
|
|
517
|
+
</fig-dropdown>
|
|
518
|
+
</fig-button>
|
|
519
|
+
</fig-button-combo>
|
|
520
|
+
</div>
|
|
521
|
+
<div class="example-row">
|
|
522
|
+
<label>Disabled combo</label>
|
|
523
|
+
<fig-button-combo>
|
|
524
|
+
<fig-button disabled>Disabled</fig-button>
|
|
525
|
+
<fig-button disabled>Action</fig-button>
|
|
526
|
+
</fig-button-combo>
|
|
527
|
+
</div>
|
|
528
|
+
</section>
|
|
529
|
+
<hr>
|
|
602
530
|
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
height="24"
|
|
608
|
-
viewBox="0 0 24 24"
|
|
609
|
-
fill="none"
|
|
610
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
611
|
-
<path fill-rule="evenodd"
|
|
612
|
-
clip-rule="evenodd"
|
|
613
|
-
d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
|
|
614
|
-
fill="currentColor"
|
|
615
|
-
fill-opacity="0.9" />
|
|
616
|
-
</svg>
|
|
531
|
+
<!-- Checkbox -->
|
|
532
|
+
<section id="checkbox">
|
|
533
|
+
<h2>Checkbox</h2>
|
|
534
|
+
<p class="description">A checkbox input for boolean selections.</p>
|
|
617
535
|
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
<fig-
|
|
536
|
+
<h3>States</h3>
|
|
537
|
+
<div class="example-row">
|
|
538
|
+
<label>Unchecked</label>
|
|
539
|
+
<fig-checkbox label="Unchecked"></fig-checkbox>
|
|
540
|
+
</div>
|
|
541
|
+
<div class="example-row">
|
|
542
|
+
<label>Checked</label>
|
|
543
|
+
<fig-checkbox label="Checked"
|
|
544
|
+
checked="true"></fig-checkbox>
|
|
545
|
+
</div>
|
|
546
|
+
<div class="example-row">
|
|
547
|
+
<label>Disabled</label>
|
|
548
|
+
<fig-checkbox label="Disabled"
|
|
549
|
+
disabled></fig-checkbox>
|
|
550
|
+
</div>
|
|
551
|
+
<div class="example-row">
|
|
552
|
+
<label>Disabled checked</label>
|
|
553
|
+
<fig-checkbox label="Disabled checked"
|
|
554
|
+
checked="true"
|
|
555
|
+
disabled></fig-checkbox>
|
|
556
|
+
</div>
|
|
557
|
+
</section>
|
|
558
|
+
<hr>
|
|
559
|
+
|
|
560
|
+
<!-- Chit -->
|
|
561
|
+
<section id="chit">
|
|
562
|
+
<h2>Chit</h2>
|
|
563
|
+
<p class="description">A small visual indicator for colors, gradients, or images.</p>
|
|
564
|
+
|
|
565
|
+
<h3>Types</h3>
|
|
566
|
+
<div class="example-row">
|
|
567
|
+
<label>Color</label>
|
|
568
|
+
<hstack>
|
|
569
|
+
<fig-chit type="color"
|
|
570
|
+
value="#FF0000"></fig-chit>
|
|
571
|
+
<fig-chit type="color"
|
|
572
|
+
value="#00FF00"></fig-chit>
|
|
573
|
+
<fig-chit type="color"
|
|
574
|
+
value="#0000FF"></fig-chit>
|
|
575
|
+
<fig-chit type="color"
|
|
576
|
+
value="#000000"></fig-chit>
|
|
577
|
+
</hstack>
|
|
578
|
+
</div>
|
|
579
|
+
<div class="example-row">
|
|
580
|
+
<label>Gradient (linear)</label>
|
|
581
|
+
<fig-chit type="gradient"
|
|
582
|
+
variant="linear"></fig-chit>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="example-row">
|
|
585
|
+
<label>Gradient (angular)</label>
|
|
586
|
+
<fig-chit type="gradient"
|
|
587
|
+
variant="angular"></fig-chit>
|
|
588
|
+
</div>
|
|
589
|
+
<div class="example-row">
|
|
590
|
+
<label>Gradient (radial)</label>
|
|
591
|
+
<fig-chit type="gradient"
|
|
592
|
+
variant="radial"></fig-chit>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="example-row">
|
|
595
|
+
<label>Image</label>
|
|
596
|
+
<fig-chit type="image"
|
|
597
|
+
src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
<h3>Sizes</h3>
|
|
601
|
+
<div class="example-row">
|
|
602
|
+
<label>Default</label>
|
|
603
|
+
<fig-chit type="color"
|
|
604
|
+
value="#9747FF"></fig-chit>
|
|
605
|
+
</div>
|
|
606
|
+
<div class="example-row">
|
|
607
|
+
<label>Large</label>
|
|
608
|
+
<fig-chit type="color"
|
|
609
|
+
value="#9747FF"
|
|
610
|
+
size="large"></fig-chit>
|
|
611
|
+
</div>
|
|
612
|
+
|
|
613
|
+
<h3>States</h3>
|
|
614
|
+
<div class="example-row">
|
|
615
|
+
<label>Selected</label>
|
|
616
|
+
<fig-chit type="color"
|
|
617
|
+
value="#0D99FF"
|
|
618
|
+
selected="true"></fig-chit>
|
|
619
|
+
</div>
|
|
620
|
+
<div class="example-row">
|
|
621
|
+
<label>Disabled</label>
|
|
622
|
+
<fig-chit type="color"
|
|
623
|
+
value="#0D99FF"
|
|
624
|
+
disabled="true"></fig-chit>
|
|
625
|
+
</div>
|
|
626
|
+
</section>
|
|
627
|
+
<hr>
|
|
628
|
+
|
|
629
|
+
<!-- Combo Input -->
|
|
630
|
+
<section id="combo-input">
|
|
631
|
+
<h2>Combo Input</h2>
|
|
632
|
+
<p class="description">A text input with autocomplete suggestions from a predefined list.</p>
|
|
633
|
+
|
|
634
|
+
<h3>Default</h3>
|
|
635
|
+
<fig-combo-input options="House, Apartment, Condo, Townhouse, Other"
|
|
636
|
+
placeholder="Type of residence"></fig-combo-input>
|
|
637
|
+
|
|
638
|
+
<h3>With Value</h3>
|
|
639
|
+
<fig-combo-input options="Red, Green, Blue, Yellow, Purple"
|
|
640
|
+
value="Blue"
|
|
641
|
+
placeholder="Select a color"></fig-combo-input>
|
|
642
|
+
</section>
|
|
643
|
+
<hr>
|
|
644
|
+
|
|
645
|
+
<!-- Dialog -->
|
|
646
|
+
<section id="dialog">
|
|
647
|
+
<h2>Dialog</h2>
|
|
648
|
+
<p class="description">A modal dialog window with optional dragging support.</p>
|
|
649
|
+
|
|
650
|
+
<h3>Open Dialog</h3>
|
|
651
|
+
<fig-button onclick="document.getElementById('example-dialog').showModal()">Open Dialog</fig-button>
|
|
652
|
+
|
|
653
|
+
<dialog id="example-dialog"
|
|
654
|
+
is="fig-dialog"
|
|
655
|
+
drag="true"
|
|
656
|
+
position="center center">
|
|
657
|
+
<fig-header>
|
|
658
|
+
<h3>Dialog Title</h3>
|
|
622
659
|
<fig-button variant="ghost"
|
|
660
|
+
icon="true"
|
|
623
661
|
close-dialog>
|
|
624
|
-
|
|
662
|
+
<svg width="24"
|
|
663
|
+
height="24"
|
|
664
|
+
viewBox="0 0 24 24"
|
|
665
|
+
fill="none"
|
|
666
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
667
|
+
<path fill-rule="evenodd"
|
|
668
|
+
clip-rule="evenodd"
|
|
669
|
+
d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
|
|
670
|
+
fill="currentColor"
|
|
671
|
+
fill-opacity="0.9" />
|
|
672
|
+
</svg>
|
|
625
673
|
</fig-button>
|
|
626
|
-
</fig-
|
|
627
|
-
<fig-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
674
|
+
</fig-header>
|
|
675
|
+
<fig-content>
|
|
676
|
+
<p>This is a draggable dialog. You can drag it by the header.</p>
|
|
677
|
+
<fig-field direction="horizontal">
|
|
678
|
+
<label>Example Field</label>
|
|
679
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
680
|
+
</fig-field>
|
|
681
|
+
</fig-content>
|
|
682
|
+
<footer>
|
|
683
|
+
<fig-button variant="secondary"
|
|
684
|
+
close-dialog>Cancel</fig-button>
|
|
685
|
+
<fig-button>Save</fig-button>
|
|
686
|
+
</footer>
|
|
687
|
+
</dialog>
|
|
688
|
+
|
|
689
|
+
<h3>Position Attribute</h3>
|
|
690
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
|
|
691
|
+
Use <code>position</code> attribute: <code>center center</code>, <code>top left</code>,
|
|
692
|
+
<code>top right</code>, <code>bottom left</code>, <code>bottom right</code>, or combinations.
|
|
693
|
+
</p>
|
|
694
|
+
<hstack>
|
|
695
|
+
<fig-button variant="secondary"
|
|
696
|
+
onclick="openPositionedDialog('center center')">Center</fig-button>
|
|
697
|
+
<fig-button variant="secondary"
|
|
698
|
+
onclick="openPositionedDialog('top left')">Top Left</fig-button>
|
|
644
699
|
<fig-button variant="secondary"
|
|
645
|
-
|
|
646
|
-
<fig-button
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
700
|
+
onclick="openPositionedDialog('top right')">Top Right</fig-button>
|
|
701
|
+
<fig-button variant="secondary"
|
|
702
|
+
onclick="openPositionedDialog('bottom left')">Bottom Left</fig-button>
|
|
703
|
+
<fig-button variant="secondary"
|
|
704
|
+
onclick="openPositionedDialog('bottom right')">Bottom Right</fig-button>
|
|
705
|
+
</hstack>
|
|
706
|
+
|
|
707
|
+
<dialog id="positioned-dialog"
|
|
708
|
+
is="fig-dialog"
|
|
709
|
+
drag="true">
|
|
710
|
+
<fig-header>
|
|
711
|
+
<h3>Positioned Dialog</h3>
|
|
712
|
+
<fig-button variant="ghost"
|
|
713
|
+
icon="true"
|
|
714
|
+
close-dialog>
|
|
715
|
+
<svg width="24"
|
|
716
|
+
height="24"
|
|
717
|
+
viewBox="0 0 24 24"
|
|
718
|
+
fill="none"
|
|
719
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
720
|
+
<path fill-rule="evenodd"
|
|
721
|
+
clip-rule="evenodd"
|
|
722
|
+
d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
|
|
723
|
+
fill="currentColor"
|
|
724
|
+
fill-opacity="0.9" />
|
|
725
|
+
</svg>
|
|
726
|
+
</fig-button>
|
|
727
|
+
</fig-header>
|
|
728
|
+
<fig-content>
|
|
729
|
+
<p>This dialog is positioned at a specific corner.</p>
|
|
730
|
+
</fig-content>
|
|
731
|
+
<footer>
|
|
732
|
+
<fig-button close-dialog>Close</fig-button>
|
|
733
|
+
</footer>
|
|
734
|
+
</dialog>
|
|
735
|
+
</section>
|
|
736
|
+
<hr>
|
|
737
|
+
|
|
738
|
+
<!-- Dropdown -->
|
|
739
|
+
<section id="dropdown">
|
|
650
740
|
<h2>Dropdown</h2>
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
<
|
|
741
|
+
<p class="description">A select dropdown menu with options.</p>
|
|
742
|
+
|
|
743
|
+
<h3>Default</h3>
|
|
654
744
|
<fig-dropdown>
|
|
655
|
-
<option>One</option>
|
|
656
|
-
<option>Two</option>
|
|
657
|
-
<option>Three</option>
|
|
658
|
-
|
|
745
|
+
<option>Option One</option>
|
|
746
|
+
<option>Option Two</option>
|
|
747
|
+
<option>Option Three</option>
|
|
748
|
+
</fig-dropdown>
|
|
749
|
+
|
|
750
|
+
<h3>With Selected Value</h3>
|
|
751
|
+
<fig-dropdown value="two">
|
|
752
|
+
<option value="one">Option One</option>
|
|
753
|
+
<option value="two">Option Two</option>
|
|
754
|
+
<option value="three">Option Three</option>
|
|
659
755
|
</fig-dropdown>
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
<label>Dropdown (with grouped options)</label>
|
|
756
|
+
|
|
757
|
+
<h3>Grouped Options</h3>
|
|
663
758
|
<fig-dropdown>
|
|
664
759
|
<optgroup label="Numbers">
|
|
665
760
|
<option>One</option>
|
|
666
761
|
<option>Two</option>
|
|
762
|
+
<option>Three</option>
|
|
667
763
|
</optgroup>
|
|
668
764
|
<optgroup label="Fruits">
|
|
669
765
|
<option>Apple</option>
|
|
670
766
|
<option>Banana</option>
|
|
767
|
+
<option>Cherry</option>
|
|
671
768
|
</optgroup>
|
|
672
769
|
</fig-dropdown>
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
<
|
|
676
|
-
|
|
677
|
-
<
|
|
678
|
-
|
|
770
|
+
|
|
771
|
+
<h3>Variants</h3>
|
|
772
|
+
<div class="example-row">
|
|
773
|
+
<label>Default</label>
|
|
774
|
+
<fig-dropdown>
|
|
775
|
+
<option>Default Style</option>
|
|
776
|
+
<option>Option Two</option>
|
|
777
|
+
</fig-dropdown>
|
|
778
|
+
</div>
|
|
779
|
+
<div class="example-row">
|
|
780
|
+
<label>Neue</label>
|
|
781
|
+
<fig-dropdown variant="neue">
|
|
782
|
+
<option>Neue Style</option>
|
|
783
|
+
<option>Option Two</option>
|
|
784
|
+
</fig-dropdown>
|
|
785
|
+
</div>
|
|
786
|
+
|
|
787
|
+
<h3>Full Width</h3>
|
|
788
|
+
<fig-dropdown full>
|
|
789
|
+
<option>Full Width Dropdown</option>
|
|
790
|
+
<option>Option Two</option>
|
|
791
|
+
<option>Option Three</option>
|
|
679
792
|
</fig-dropdown>
|
|
680
|
-
</
|
|
681
|
-
<
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
<
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
<
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
<
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
<fig-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
<
|
|
729
|
-
<h2>
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
<
|
|
793
|
+
</section>
|
|
794
|
+
<hr>
|
|
795
|
+
|
|
796
|
+
<!-- Field -->
|
|
797
|
+
<section id="field">
|
|
798
|
+
<h2>Field</h2>
|
|
799
|
+
<p class="description">A form field container with label support.</p>
|
|
800
|
+
|
|
801
|
+
<h3>Directions</h3>
|
|
802
|
+
<div class="example-row">
|
|
803
|
+
<label>Vertical (default)</label>
|
|
804
|
+
</div>
|
|
805
|
+
<fig-field>
|
|
806
|
+
<label>Field Label</label>
|
|
807
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
808
|
+
</fig-field>
|
|
809
|
+
|
|
810
|
+
<div class="example-row"
|
|
811
|
+
style="margin-top: 24px;">
|
|
812
|
+
<label>Horizontal</label>
|
|
813
|
+
</div>
|
|
814
|
+
<fig-field direction="horizontal">
|
|
815
|
+
<label>Field Label</label>
|
|
816
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
817
|
+
</fig-field>
|
|
818
|
+
|
|
819
|
+
<h3>With Different Inputs</h3>
|
|
820
|
+
<fig-field direction="horizontal">
|
|
821
|
+
<label>Dropdown</label>
|
|
822
|
+
<fig-dropdown>
|
|
823
|
+
<option>Option One</option>
|
|
824
|
+
<option>Option Two</option>
|
|
825
|
+
</fig-dropdown>
|
|
826
|
+
</fig-field>
|
|
827
|
+
<fig-field direction="horizontal">
|
|
828
|
+
<label>Slider</label>
|
|
829
|
+
<fig-slider value="50"
|
|
830
|
+
text="true"></fig-slider>
|
|
831
|
+
</fig-field>
|
|
832
|
+
<fig-field direction="horizontal">
|
|
833
|
+
<label>Color</label>
|
|
834
|
+
<fig-input-color value="#0D99FF"
|
|
835
|
+
text="true"></fig-input-color>
|
|
836
|
+
</fig-field>
|
|
837
|
+
</section>
|
|
838
|
+
<hr>
|
|
839
|
+
|
|
840
|
+
<!-- Header -->
|
|
841
|
+
<section id="header">
|
|
842
|
+
<h2>Header</h2>
|
|
843
|
+
<p class="description">A header component for sections or panels.</p>
|
|
844
|
+
|
|
845
|
+
<h3>Default</h3>
|
|
846
|
+
<fig-header>
|
|
847
|
+
<h2>Section Title</h2>
|
|
848
|
+
</fig-header>
|
|
849
|
+
|
|
850
|
+
<h3>With Subtitle</h3>
|
|
851
|
+
<fig-header>
|
|
852
|
+
<h2><label>Category/</label>Section Title</h2>
|
|
853
|
+
</fig-header>
|
|
854
|
+
|
|
855
|
+
<h3>With Actions</h3>
|
|
856
|
+
<fig-header>
|
|
857
|
+
<h2>Settings</h2>
|
|
858
|
+
<fig-button variant="ghost"
|
|
859
|
+
icon="true"
|
|
860
|
+
style="position: absolute; right: 0;">
|
|
861
|
+
<svg width="16"
|
|
862
|
+
height="16"
|
|
863
|
+
viewBox="0 0 16 16"
|
|
864
|
+
fill="none"
|
|
865
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
866
|
+
<path fill-rule="evenodd"
|
|
867
|
+
clip-rule="evenodd"
|
|
868
|
+
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"
|
|
869
|
+
fill="currentColor" />
|
|
870
|
+
</svg>
|
|
871
|
+
</fig-button>
|
|
872
|
+
</fig-header>
|
|
873
|
+
|
|
874
|
+
<h3>With Spinner</h3>
|
|
875
|
+
<fig-header>
|
|
876
|
+
<h2>Loading...</h2>
|
|
877
|
+
<fig-spinner></fig-spinner>
|
|
878
|
+
</fig-header>
|
|
879
|
+
</section>
|
|
880
|
+
<hr>
|
|
881
|
+
|
|
882
|
+
<!-- Image -->
|
|
883
|
+
<section id="image">
|
|
884
|
+
<h2>Image</h2>
|
|
885
|
+
<p class="description">An image component with upload and download capabilities.</p>
|
|
886
|
+
|
|
887
|
+
<h3>Sizes</h3>
|
|
888
|
+
<div class="example-row">
|
|
889
|
+
<label>Default</label>
|
|
890
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
|
|
891
|
+
</div>
|
|
892
|
+
<div class="example-row">
|
|
893
|
+
<label>Medium</label>
|
|
894
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
895
|
+
size="medium"></fig-image>
|
|
896
|
+
</div>
|
|
897
|
+
<div class="example-row">
|
|
898
|
+
<label>Large</label>
|
|
899
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
900
|
+
size="large"></fig-image>
|
|
901
|
+
</div>
|
|
902
|
+
|
|
903
|
+
<h3>With Upload</h3>
|
|
904
|
+
<fig-image upload="true"
|
|
905
|
+
label="Upload image"
|
|
906
|
+
size="large"></fig-image>
|
|
907
|
+
|
|
908
|
+
<h3>With Download</h3>
|
|
909
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
910
|
+
download="true"
|
|
911
|
+
size="large"></fig-image>
|
|
912
|
+
</section>
|
|
913
|
+
<hr>
|
|
914
|
+
|
|
915
|
+
<!-- Input Angle -->
|
|
916
|
+
<section id="input-angle">
|
|
917
|
+
<h2>Input Angle</h2>
|
|
918
|
+
<p class="description">An angle input with a circular dial interface.</p>
|
|
919
|
+
|
|
920
|
+
<h3>Default</h3>
|
|
921
|
+
<fig-input-angle value="0"></fig-input-angle>
|
|
922
|
+
|
|
923
|
+
<h3>With Text Display</h3>
|
|
924
|
+
<fig-input-angle text="true"
|
|
925
|
+
value="45"></fig-input-angle>
|
|
926
|
+
|
|
927
|
+
<h3>Different Values</h3>
|
|
928
|
+
<hstack>
|
|
929
|
+
<fig-input-angle text="true"
|
|
930
|
+
value="0"></fig-input-angle>
|
|
931
|
+
<fig-input-angle text="true"
|
|
932
|
+
value="90"></fig-input-angle>
|
|
933
|
+
<fig-input-angle text="true"
|
|
934
|
+
value="180"></fig-input-angle>
|
|
935
|
+
<fig-input-angle text="true"
|
|
936
|
+
value="270"></fig-input-angle>
|
|
937
|
+
</hstack>
|
|
938
|
+
</section>
|
|
939
|
+
<hr>
|
|
940
|
+
|
|
941
|
+
<!-- Input Color -->
|
|
942
|
+
<section id="input-color">
|
|
943
|
+
<h2>Input Color</h2>
|
|
944
|
+
<p class="description">A color picker input with optional text and alpha controls.</p>
|
|
945
|
+
|
|
946
|
+
<h3>Swatch Only</h3>
|
|
947
|
+
<fig-input-color value="#FF0000"></fig-input-color>
|
|
948
|
+
|
|
949
|
+
<h3>With Text</h3>
|
|
950
|
+
<fig-input-color value="#00FF00"
|
|
951
|
+
text="true"></fig-input-color>
|
|
952
|
+
|
|
953
|
+
<h3>With Alpha</h3>
|
|
954
|
+
<fig-input-color value="#0000FF"
|
|
955
|
+
alpha="true"
|
|
956
|
+
text="true"></fig-input-color>
|
|
957
|
+
|
|
958
|
+
<h3>Full Width</h3>
|
|
959
|
+
<fig-input-color value="#9747FF"
|
|
960
|
+
alpha="true"
|
|
961
|
+
text="true"
|
|
962
|
+
full></fig-input-color>
|
|
963
|
+
|
|
964
|
+
<h3>Various Colors</h3>
|
|
965
|
+
<hstack>
|
|
966
|
+
<fig-input-color value="#FF000066"></fig-input-color>
|
|
967
|
+
<fig-input-color value="#00FF0099"></fig-input-color>
|
|
968
|
+
<fig-input-color value="#0000FFCC"></fig-input-color>
|
|
969
|
+
<fig-input-color value="#FFFF00"></fig-input-color>
|
|
970
|
+
<fig-input-color value="#FF00FF"></fig-input-color>
|
|
971
|
+
<fig-input-color value="#00FFFF"></fig-input-color>
|
|
972
|
+
</hstack>
|
|
973
|
+
</section>
|
|
974
|
+
<hr>
|
|
975
|
+
|
|
976
|
+
<!-- Input Joystick -->
|
|
977
|
+
<section id="input-joystick">
|
|
978
|
+
<h2>Input Joystick</h2>
|
|
979
|
+
<p class="description">A 2D joystick input for X/Y coordinate values.</p>
|
|
980
|
+
|
|
981
|
+
<h3>Default</h3>
|
|
982
|
+
<fig-input-joystick></fig-input-joystick>
|
|
983
|
+
|
|
984
|
+
<h3>With Text Display</h3>
|
|
985
|
+
<fig-input-joystick text="true"
|
|
986
|
+
value="0,0"></fig-input-joystick>
|
|
987
|
+
|
|
988
|
+
<h3>With Initial Value</h3>
|
|
989
|
+
<fig-input-joystick text="true"
|
|
990
|
+
value="0.5,0.5"></fig-input-joystick>
|
|
991
|
+
</section>
|
|
992
|
+
<hr>
|
|
993
|
+
|
|
994
|
+
<!-- Input Number -->
|
|
995
|
+
<section id="input-number">
|
|
996
|
+
<h2>Input Number</h2>
|
|
997
|
+
<p class="description">A numeric input with optional units and constraints.</p>
|
|
998
|
+
|
|
999
|
+
<h3>Basic</h3>
|
|
733
1000
|
<fig-input-number value="100"></fig-input-number>
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
<
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
<
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
1001
|
+
|
|
1002
|
+
<h3>With Units</h3>
|
|
1003
|
+
<div class="example-row">
|
|
1004
|
+
<label>Percentage</label>
|
|
1005
|
+
<fig-input-number value="50"
|
|
1006
|
+
units="%"></fig-input-number>
|
|
1007
|
+
</div>
|
|
1008
|
+
<div class="example-row">
|
|
1009
|
+
<label>Degrees</label>
|
|
1010
|
+
<fig-input-number value="45"
|
|
1011
|
+
units="°"
|
|
1012
|
+
min="0"
|
|
1013
|
+
max="360"></fig-input-number>
|
|
1014
|
+
</div>
|
|
1015
|
+
<div class="example-row">
|
|
1016
|
+
<label>Pixels</label>
|
|
1017
|
+
<fig-input-number value="24"
|
|
1018
|
+
units="px"
|
|
1019
|
+
min="0"
|
|
1020
|
+
max="1000"></fig-input-number>
|
|
1021
|
+
</div>
|
|
1022
|
+
<div class="example-row">
|
|
1023
|
+
<label>Currency (prefix)</label>
|
|
1024
|
+
<fig-input-number value="99.99"
|
|
1025
|
+
units="$"
|
|
1026
|
+
unit-position="prefix"
|
|
1027
|
+
step="0.01"></fig-input-number>
|
|
1028
|
+
</div>
|
|
1029
|
+
|
|
1030
|
+
<h3>With Transform</h3>
|
|
758
1031
|
<fig-input-number value="0.5"
|
|
759
1032
|
units="%"
|
|
760
1033
|
transform="100"
|
|
761
1034
|
min="0"
|
|
762
1035
|
max="1"
|
|
763
1036
|
step="0.01"></fig-input-number>
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
<label>With min/max constraints</label>
|
|
1037
|
+
|
|
1038
|
+
<h3>With Constraints</h3>
|
|
767
1039
|
<fig-input-number value="25"
|
|
768
1040
|
units="px"
|
|
769
1041
|
min="0"
|
|
770
|
-
max="1000"
|
|
771
|
-
step="1"></fig-input-number>
|
|
772
|
-
</fig-field>
|
|
773
|
-
<fig-field>
|
|
774
|
-
<label>With placeholder</label>
|
|
775
|
-
<fig-input-number placeholder="Enter value"
|
|
776
|
-
units="%"
|
|
777
|
-
min="0"
|
|
778
|
-
max="100"></fig-input-number>
|
|
779
|
-
</fig-field>
|
|
780
|
-
<fig-field>
|
|
781
|
-
<label>Disabled</label>
|
|
782
|
-
<fig-input-number value="75"
|
|
783
|
-
units="%"
|
|
784
|
-
disabled></fig-input-number>
|
|
785
|
-
</fig-field>
|
|
786
|
-
<fig-field>
|
|
787
|
-
<label>With name attribute</label>
|
|
788
|
-
<fig-input-number value="42"
|
|
789
|
-
units="px"
|
|
790
|
-
name="width"></fig-input-number>
|
|
791
|
-
</fig-field>
|
|
792
|
-
<fig-field>
|
|
793
|
-
<label>Small step (decimals)</label>
|
|
794
|
-
<fig-input-number value="1.5"
|
|
795
|
-
units="rem"
|
|
796
|
-
min="0"
|
|
797
|
-
max="10"
|
|
798
|
-
step="0.1"></fig-input-number>
|
|
799
|
-
</fig-field>
|
|
800
|
-
<fig-field>
|
|
801
|
-
<label>Large range with transform</label>
|
|
802
|
-
<fig-input-number value="0.75"
|
|
803
|
-
units="%"
|
|
804
|
-
transform="100"
|
|
805
|
-
min="0"
|
|
806
|
-
max="1"
|
|
807
|
-
step="0.01"></fig-input-number>
|
|
808
|
-
</fig-field>
|
|
809
|
-
<fig-field>
|
|
810
|
-
<label>Negative values allowed</label>
|
|
811
|
-
<fig-input-number value="-10"
|
|
812
|
-
units="px"
|
|
813
|
-
min="-100"
|
|
814
1042
|
max="100"
|
|
815
|
-
step="
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
<
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
1043
|
+
step="5"></fig-input-number>
|
|
1044
|
+
|
|
1045
|
+
<h3>States</h3>
|
|
1046
|
+
<div class="example-row">
|
|
1047
|
+
<label>Disabled</label>
|
|
1048
|
+
<fig-input-number value="75"
|
|
1049
|
+
units="%"
|
|
1050
|
+
disabled></fig-input-number>
|
|
1051
|
+
</div>
|
|
1052
|
+
<div class="example-row">
|
|
1053
|
+
<label>With placeholder</label>
|
|
1054
|
+
<fig-input-number placeholder="Enter value"
|
|
1055
|
+
units="%"></fig-input-number>
|
|
1056
|
+
</div>
|
|
1057
|
+
|
|
1058
|
+
<h3>With Slots</h3>
|
|
1059
|
+
<div class="example-row">
|
|
1060
|
+
<label>Append slot</label>
|
|
1061
|
+
<fig-input-number value="50"
|
|
1062
|
+
min="0"
|
|
1063
|
+
max="100">
|
|
1064
|
+
<span slot="append">%</span>
|
|
1065
|
+
</fig-input-number>
|
|
1066
|
+
</div>
|
|
1067
|
+
<div class="example-row">
|
|
1068
|
+
<label>Prepend slot</label>
|
|
1069
|
+
<fig-input-number value="100">
|
|
1070
|
+
<span slot="prepend">X</span>
|
|
1071
|
+
</fig-input-number>
|
|
1072
|
+
</div>
|
|
1073
|
+
</section>
|
|
1074
|
+
<hr>
|
|
1075
|
+
|
|
1076
|
+
<!-- Input Text -->
|
|
1077
|
+
<section id="input-text">
|
|
1078
|
+
<h2>Input Text</h2>
|
|
1079
|
+
<p class="description">A text input with various types and configurations.</p>
|
|
1080
|
+
|
|
1081
|
+
<h3>Basic</h3>
|
|
1082
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
1083
|
+
|
|
1084
|
+
<h3>With Value</h3>
|
|
1085
|
+
<fig-input-text value="Hello World"></fig-input-text>
|
|
1086
|
+
|
|
1087
|
+
<h3>Types</h3>
|
|
1088
|
+
<div class="example-row">
|
|
1089
|
+
<label>Text (default)</label>
|
|
1090
|
+
<fig-input-text placeholder="Text input"></fig-input-text>
|
|
1091
|
+
</div>
|
|
1092
|
+
<div class="example-row">
|
|
1093
|
+
<label>Password</label>
|
|
1094
|
+
<fig-input-text type="password"
|
|
1095
|
+
placeholder="Password"></fig-input-text>
|
|
1096
|
+
</div>
|
|
1097
|
+
<div class="example-row">
|
|
1098
|
+
<label>Number</label>
|
|
1099
|
+
<fig-input-text type="number"
|
|
1100
|
+
placeholder="Number"
|
|
1101
|
+
steppers="true"></fig-input-text>
|
|
1102
|
+
</div>
|
|
1103
|
+
|
|
1104
|
+
<h3>Multiline</h3>
|
|
1105
|
+
<fig-input-text multiline="true"
|
|
1106
|
+
placeholder="Enter multiple lines..."
|
|
1107
|
+
autoresize="true"
|
|
1108
|
+
resizable="true"></fig-input-text>
|
|
1109
|
+
|
|
1110
|
+
<h3>States</h3>
|
|
1111
|
+
<div class="example-row">
|
|
1112
|
+
<label>Disabled</label>
|
|
1113
|
+
<fig-input-text value="Disabled"
|
|
1114
|
+
disabled></fig-input-text>
|
|
1115
|
+
</div>
|
|
1116
|
+
|
|
1117
|
+
<h3>With Slots</h3>
|
|
1118
|
+
<div class="example-row">
|
|
1119
|
+
<label>Append</label>
|
|
1120
|
+
<fig-input-text value="90">
|
|
1121
|
+
<span slot="append">°</span>
|
|
1122
|
+
</fig-input-text>
|
|
1123
|
+
</div>
|
|
1124
|
+
<div class="example-row">
|
|
1125
|
+
<label>Prepend</label>
|
|
1126
|
+
<fig-input-text placeholder="Search">
|
|
1127
|
+
<span slot="prepend">🔍</span>
|
|
1128
|
+
</fig-input-text>
|
|
1129
|
+
</div>
|
|
1130
|
+
|
|
1131
|
+
<h3>Full Width</h3>
|
|
1132
|
+
<fig-input-text placeholder="Full width input"
|
|
1133
|
+
full></fig-input-text>
|
|
1134
|
+
</section>
|
|
1135
|
+
<hr>
|
|
1136
|
+
|
|
1137
|
+
<!-- Popover -->
|
|
1138
|
+
<section id="popover">
|
|
1139
|
+
<h2>Popover</h2>
|
|
1140
|
+
<p class="description">A floating panel that appears on hover or click.</p>
|
|
1141
|
+
|
|
1142
|
+
<h3>Default (Hover)</h3>
|
|
1143
|
+
<fig-popover>
|
|
1144
|
+
<fig-button>Hover me</fig-button>
|
|
1145
|
+
<div popover>
|
|
1146
|
+
<p style="margin: 0; padding: 8px;">This is popover content</p>
|
|
1147
|
+
</div>
|
|
1148
|
+
</fig-popover>
|
|
1149
|
+
|
|
1150
|
+
<h3>Manual Trigger</h3>
|
|
1151
|
+
<fig-popover action="manual">
|
|
1152
|
+
<fig-button>Click me</fig-button>
|
|
1153
|
+
<div popover>
|
|
1154
|
+
<fig-header>
|
|
1155
|
+
<h3>Popover Title</h3>
|
|
1156
|
+
</fig-header>
|
|
1157
|
+
<fig-content>
|
|
1158
|
+
<p>Click the button again to close.</p>
|
|
1159
|
+
</fig-content>
|
|
1160
|
+
</div>
|
|
1161
|
+
</fig-popover>
|
|
1162
|
+
|
|
1163
|
+
<h3>With Form Content</h3>
|
|
1164
|
+
<fig-popover action="manual"
|
|
1165
|
+
size="large">
|
|
1166
|
+
<fig-button>Settings</fig-button>
|
|
1167
|
+
<div popover>
|
|
1168
|
+
<fig-header>
|
|
1169
|
+
<h3>Settings</h3>
|
|
1170
|
+
</fig-header>
|
|
1171
|
+
<fig-content>
|
|
1172
|
+
<fig-field direction="horizontal">
|
|
1173
|
+
<label>Opacity</label>
|
|
1174
|
+
<fig-slider min="0"
|
|
1175
|
+
max="100"
|
|
1176
|
+
value="50"
|
|
1177
|
+
text="true"
|
|
1178
|
+
units="%"></fig-slider>
|
|
1179
|
+
</fig-field>
|
|
1180
|
+
<fig-field direction="horizontal">
|
|
1181
|
+
<label>Mode</label>
|
|
1182
|
+
<fig-dropdown>
|
|
1183
|
+
<option>Normal</option>
|
|
1184
|
+
<option>Multiply</option>
|
|
1185
|
+
<option>Screen</option>
|
|
1186
|
+
</fig-dropdown>
|
|
1187
|
+
</fig-field>
|
|
1188
|
+
</fig-content>
|
|
1189
|
+
</div>
|
|
1190
|
+
</fig-popover>
|
|
1191
|
+
</section>
|
|
1192
|
+
<hr>
|
|
1193
|
+
|
|
1194
|
+
<!-- Radio -->
|
|
1195
|
+
<section id="radio">
|
|
858
1196
|
<h2>Radio</h2>
|
|
859
|
-
|
|
860
|
-
<fig-field>
|
|
861
|
-
<label>Radio buttons</label>
|
|
862
|
-
<fig-radio label="Radio #1"
|
|
863
|
-
name="r1"></fig-radio>
|
|
864
|
-
<fig-radio label="Radio #2"
|
|
865
|
-
name="r1"></fig-radio>
|
|
866
|
-
</fig-field>
|
|
867
|
-
<fig-header>
|
|
868
|
-
<h2>Switch</h2>
|
|
869
|
-
</fig-header>
|
|
870
|
-
<fig-field>
|
|
871
|
-
<label>Switches</label>
|
|
872
|
-
<fig-switch checked="true"
|
|
873
|
-
onInput="console.log(event.target.checked)"
|
|
874
|
-
label="On"></fig-switch>
|
|
875
|
-
<fig-switch checked="false"
|
|
876
|
-
label="Off"></fig-switch>
|
|
877
|
-
<fig-switch indeterminate="true"
|
|
878
|
-
label="Indeterminate"></fig-switch>
|
|
879
|
-
<fig-switch disabled
|
|
880
|
-
label="Disabled"></fig-switch>
|
|
881
|
-
</fig-field>
|
|
882
|
-
<fig-header>
|
|
883
|
-
<h2>Chit</h2>
|
|
884
|
-
</fig-header>
|
|
885
|
-
<fig-field>
|
|
886
|
-
<label>Chit</label>
|
|
887
|
-
<hstack>
|
|
888
|
-
<fig-chit type="color"
|
|
889
|
-
selected="true"
|
|
890
|
-
disabled="true"
|
|
891
|
-
value="#00FF00"></fig-chit>
|
|
892
|
-
<fig-chit type="color"
|
|
893
|
-
disabled="true"
|
|
894
|
-
value="#000000"></fig-chit>
|
|
895
|
-
<fig-chit type="gradient"
|
|
896
|
-
variant="linear"
|
|
897
|
-
size="large"
|
|
898
|
-
disabled="true"></fig-chit>
|
|
899
|
-
<fig-chit type="gradient"
|
|
900
|
-
variant="angular"
|
|
901
|
-
size="large"
|
|
902
|
-
selected="true"
|
|
903
|
-
disabled="true"></fig-chit>
|
|
904
|
-
<fig-chit type="gradient"
|
|
905
|
-
variant="radial"
|
|
906
|
-
size="large"
|
|
907
|
-
disabled="true"></fig-chit>
|
|
908
|
-
<fig-chit type="image"
|
|
909
|
-
disabled="true"
|
|
910
|
-
src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
|
|
911
|
-
<fig-chit type="image"
|
|
912
|
-
disabled="true"
|
|
913
|
-
size="large"
|
|
914
|
-
onclick="console.log('clicked')"
|
|
915
|
-
src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
|
|
916
|
-
<fig-chit type="image"
|
|
917
|
-
disabled="true"
|
|
918
|
-
selected="true"
|
|
919
|
-
size="large"
|
|
920
|
-
src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
|
|
921
|
-
<fig-chit type="image"
|
|
922
|
-
disabled="true"
|
|
923
|
-
size="large"></fig-chit>
|
|
924
|
-
</hstack>
|
|
925
|
-
</fig-field>
|
|
1197
|
+
<p class="description">Radio buttons for single selection from a group.</p>
|
|
926
1198
|
|
|
927
|
-
|
|
928
|
-
<
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
<
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
<
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
1199
|
+
<h3>Radio Group</h3>
|
|
1200
|
+
<vstack>
|
|
1201
|
+
<fig-radio label="Option One"
|
|
1202
|
+
name="radio-group-1"
|
|
1203
|
+
checked="true"></fig-radio>
|
|
1204
|
+
<fig-radio label="Option Two"
|
|
1205
|
+
name="radio-group-1"></fig-radio>
|
|
1206
|
+
<fig-radio label="Option Three"
|
|
1207
|
+
name="radio-group-1"></fig-radio>
|
|
1208
|
+
</vstack>
|
|
1209
|
+
|
|
1210
|
+
<h3>Another Group</h3>
|
|
1211
|
+
<vstack>
|
|
1212
|
+
<fig-radio label="Small"
|
|
1213
|
+
name="size-group"></fig-radio>
|
|
1214
|
+
<fig-radio label="Medium"
|
|
1215
|
+
name="size-group"
|
|
1216
|
+
checked="true"></fig-radio>
|
|
1217
|
+
<fig-radio label="Large"
|
|
1218
|
+
name="size-group"></fig-radio>
|
|
1219
|
+
</vstack>
|
|
1220
|
+
|
|
1221
|
+
<h3>Disabled</h3>
|
|
1222
|
+
<vstack>
|
|
1223
|
+
<fig-radio label="Disabled unchecked"
|
|
1224
|
+
name="disabled-group"
|
|
1225
|
+
disabled></fig-radio>
|
|
1226
|
+
<fig-radio label="Disabled checked"
|
|
1227
|
+
name="disabled-group-2"
|
|
1228
|
+
checked="true"
|
|
1229
|
+
disabled></fig-radio>
|
|
1230
|
+
</vstack>
|
|
1231
|
+
</section>
|
|
1232
|
+
<hr>
|
|
1233
|
+
|
|
1234
|
+
<!-- Segmented Control -->
|
|
1235
|
+
<section id="segmented-control">
|
|
1236
|
+
<h2>Segmented Control</h2>
|
|
1237
|
+
<p class="description">A group of mutually exclusive options displayed as segments.</p>
|
|
1238
|
+
|
|
1239
|
+
<h3>Default</h3>
|
|
1240
|
+
<fig-segmented-control>
|
|
1241
|
+
<fig-segment selected>One</fig-segment>
|
|
1242
|
+
<fig-segment>Two</fig-segment>
|
|
1243
|
+
<fig-segment>Three</fig-segment>
|
|
1244
|
+
</fig-segmented-control>
|
|
1245
|
+
|
|
1246
|
+
<h3>Two Options</h3>
|
|
1247
|
+
<fig-segmented-control>
|
|
1248
|
+
<fig-segment selected>Left</fig-segment>
|
|
1249
|
+
<fig-segment>Right</fig-segment>
|
|
1250
|
+
</fig-segmented-control>
|
|
1251
|
+
|
|
1252
|
+
<h3>Many Options</h3>
|
|
1253
|
+
<fig-segmented-control>
|
|
1254
|
+
<fig-segment>XS</fig-segment>
|
|
1255
|
+
<fig-segment>S</fig-segment>
|
|
1256
|
+
<fig-segment selected>M</fig-segment>
|
|
1257
|
+
<fig-segment>L</fig-segment>
|
|
1258
|
+
<fig-segment>XL</fig-segment>
|
|
1259
|
+
</fig-segmented-control>
|
|
1260
|
+
</section>
|
|
1261
|
+
<hr>
|
|
1262
|
+
|
|
1263
|
+
<!-- Slider -->
|
|
1264
|
+
<section id="slider">
|
|
949
1265
|
<h2>Slider</h2>
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
<
|
|
953
|
-
<fig-slider
|
|
954
|
-
|
|
955
|
-
max="500"></fig-slider>
|
|
956
|
-
</fig-field>
|
|
957
|
-
|
|
958
|
-
<fig-field>
|
|
959
|
-
<label>Number slider (with number input)</label>
|
|
960
|
-
<fig-slider text="true"
|
|
961
|
-
default="50"
|
|
1266
|
+
<p class="description">A range slider with various types and configurations.</p>
|
|
1267
|
+
|
|
1268
|
+
<h3>Default</h3>
|
|
1269
|
+
<fig-slider min="0"
|
|
1270
|
+
max="100"
|
|
962
1271
|
value="50"></fig-slider>
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
value="0.75"
|
|
969
|
-
color="#ff0000"
|
|
970
|
-
units="%"
|
|
1272
|
+
|
|
1273
|
+
<h3>With Text Input</h3>
|
|
1274
|
+
<fig-slider min="0"
|
|
1275
|
+
max="100"
|
|
1276
|
+
value="50"
|
|
971
1277
|
text="true"></fig-slider>
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
<
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
<
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
</
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1278
|
+
|
|
1279
|
+
<h3>With Units</h3>
|
|
1280
|
+
<fig-slider min="0"
|
|
1281
|
+
max="100"
|
|
1282
|
+
value="75"
|
|
1283
|
+
text="true"
|
|
1284
|
+
units="%"></fig-slider>
|
|
1285
|
+
|
|
1286
|
+
<h3>Variants</h3>
|
|
1287
|
+
<div class="example-row">
|
|
1288
|
+
<label>Default</label>
|
|
1289
|
+
<fig-slider min="0"
|
|
1290
|
+
max="100"
|
|
1291
|
+
value="50"
|
|
1292
|
+
text="true"></fig-slider>
|
|
1293
|
+
</div>
|
|
1294
|
+
<div class="example-row">
|
|
1295
|
+
<label>Neue</label>
|
|
1296
|
+
<fig-slider min="0"
|
|
1297
|
+
max="100"
|
|
1298
|
+
value="50"
|
|
1299
|
+
text="true"
|
|
1300
|
+
variant="neue"></fig-slider>
|
|
1301
|
+
</div>
|
|
1302
|
+
<div class="example-row">
|
|
1303
|
+
<label>Minimal</label>
|
|
1304
|
+
<fig-slider min="0"
|
|
1305
|
+
max="100"
|
|
1306
|
+
value="50"
|
|
1307
|
+
text="true"
|
|
1308
|
+
variant="minimal"></fig-slider>
|
|
1309
|
+
</div>
|
|
1310
|
+
|
|
1311
|
+
<h3>Opacity Type</h3>
|
|
1312
|
+
<div class="example-row">
|
|
1313
|
+
<label>Default</label>
|
|
1314
|
+
<fig-slider type="opacity"
|
|
1315
|
+
value="0.75"
|
|
1316
|
+
color="#ff0000"
|
|
1317
|
+
units="%"
|
|
1318
|
+
text="true"></fig-slider>
|
|
1319
|
+
</div>
|
|
1320
|
+
<div class="example-row">
|
|
1321
|
+
<label>Neue</label>
|
|
1322
|
+
<fig-slider type="opacity"
|
|
1323
|
+
value="0.75"
|
|
1324
|
+
color="#ff0000"
|
|
1325
|
+
units="%"
|
|
1326
|
+
text="true"
|
|
1327
|
+
variant="neue"></fig-slider>
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="example-row">
|
|
1330
|
+
<label>Minimal</label>
|
|
1331
|
+
<fig-slider type="opacity"
|
|
1332
|
+
value="0.75"
|
|
1333
|
+
color="#ff0000"
|
|
1334
|
+
units="%"
|
|
1335
|
+
text="true"
|
|
1336
|
+
variant="minimal"></fig-slider>
|
|
1337
|
+
</div>
|
|
1338
|
+
|
|
1339
|
+
<h3>Hue Type</h3>
|
|
1340
|
+
<div class="example-row">
|
|
1341
|
+
<label>Default</label>
|
|
1342
|
+
<fig-slider type="hue"
|
|
1343
|
+
value="180"></fig-slider>
|
|
1344
|
+
</div>
|
|
1345
|
+
<div class="example-row">
|
|
1346
|
+
<label>Neue</label>
|
|
1347
|
+
<fig-slider type="hue"
|
|
1348
|
+
value="180"
|
|
1349
|
+
variant="neue"></fig-slider>
|
|
1350
|
+
</div>
|
|
1351
|
+
<div class="example-row">
|
|
1352
|
+
<label>Minimal</label>
|
|
1353
|
+
<fig-slider type="hue"
|
|
1354
|
+
value="180"
|
|
1355
|
+
variant="minimal"></fig-slider>
|
|
1356
|
+
</div>
|
|
1357
|
+
|
|
1358
|
+
<h3>Stepper Type</h3>
|
|
1359
|
+
<div class="example-row">
|
|
1360
|
+
<label>Default</label>
|
|
1361
|
+
<fig-slider type="stepper"
|
|
1362
|
+
value="50"
|
|
1363
|
+
step="25"
|
|
1364
|
+
text="true">
|
|
1365
|
+
<datalist>
|
|
1366
|
+
<option value="0"></option>
|
|
1367
|
+
<option value="25"></option>
|
|
1368
|
+
<option value="50"></option>
|
|
1369
|
+
<option value="75"></option>
|
|
1370
|
+
<option value="100"></option>
|
|
1371
|
+
</datalist>
|
|
1372
|
+
</fig-slider>
|
|
1373
|
+
</div>
|
|
1374
|
+
<div class="example-row">
|
|
1375
|
+
<label>Neue</label>
|
|
1376
|
+
<fig-slider type="stepper"
|
|
1377
|
+
value="50"
|
|
1378
|
+
step="25"
|
|
1379
|
+
text="true"
|
|
1380
|
+
variant="neue">
|
|
1381
|
+
<datalist>
|
|
1382
|
+
<option value="0"></option>
|
|
1383
|
+
<option value="25"></option>
|
|
1384
|
+
<option value="50"></option>
|
|
1385
|
+
<option value="75"></option>
|
|
1386
|
+
<option value="100"></option>
|
|
1387
|
+
</datalist>
|
|
1388
|
+
</fig-slider>
|
|
1389
|
+
</div>
|
|
1390
|
+
<div class="example-row">
|
|
1391
|
+
<label>Minimal</label>
|
|
1392
|
+
<fig-slider type="stepper"
|
|
1393
|
+
value="50"
|
|
1394
|
+
step="25"
|
|
1395
|
+
text="true"
|
|
1396
|
+
variant="minimal">
|
|
1397
|
+
<datalist>
|
|
1398
|
+
<option value="0"></option>
|
|
1399
|
+
<option value="25"></option>
|
|
1400
|
+
<option value="50"></option>
|
|
1401
|
+
<option value="75"></option>
|
|
1402
|
+
<option value="100"></option>
|
|
1403
|
+
</datalist>
|
|
1404
|
+
</fig-slider>
|
|
1405
|
+
</div>
|
|
1406
|
+
|
|
1407
|
+
<h3>Delta Type</h3>
|
|
1408
|
+
<div class="example-row">
|
|
1409
|
+
<label>Default</label>
|
|
1410
|
+
<fig-slider type="delta"
|
|
1411
|
+
value="0"
|
|
1412
|
+
default="0"
|
|
1413
|
+
step="0.25"
|
|
1414
|
+
min="-5"
|
|
1415
|
+
max="5"
|
|
1416
|
+
text="true">
|
|
1417
|
+
<datalist>
|
|
1418
|
+
<option value="0"></option>
|
|
1419
|
+
</datalist>
|
|
1420
|
+
</fig-slider>
|
|
1421
|
+
</div>
|
|
1422
|
+
<div class="example-row">
|
|
1423
|
+
<label>Neue</label>
|
|
1424
|
+
<fig-slider type="delta"
|
|
1425
|
+
value="0"
|
|
1426
|
+
default="0"
|
|
1427
|
+
step="0.25"
|
|
1428
|
+
min="-5"
|
|
1429
|
+
max="5"
|
|
1430
|
+
text="true"
|
|
1431
|
+
variant="neue">
|
|
1432
|
+
<datalist>
|
|
1433
|
+
<option value="0"></option>
|
|
1434
|
+
</datalist>
|
|
1435
|
+
</fig-slider>
|
|
1436
|
+
</div>
|
|
1437
|
+
<div class="example-row">
|
|
1438
|
+
<label>Minimal</label>
|
|
1439
|
+
<fig-slider type="delta"
|
|
1440
|
+
value="0"
|
|
1441
|
+
default="0"
|
|
1442
|
+
step="0.25"
|
|
1443
|
+
min="-5"
|
|
1444
|
+
max="5"
|
|
1445
|
+
text="true"
|
|
1446
|
+
variant="minimal">
|
|
1447
|
+
<datalist>
|
|
1448
|
+
<option value="0"></option>
|
|
1449
|
+
</datalist>
|
|
1450
|
+
</fig-slider>
|
|
1451
|
+
</div>
|
|
1452
|
+
|
|
1453
|
+
<h3>With Transform</h3>
|
|
1454
|
+
<fig-slider min="0"
|
|
1455
|
+
max="1"
|
|
1456
|
+
value="0.5"
|
|
1457
|
+
step="0.01"
|
|
1458
|
+
transform="100"
|
|
1459
|
+
text="true"
|
|
1460
|
+
units="%"></fig-slider>
|
|
1461
|
+
|
|
1462
|
+
<h3>Full Width</h3>
|
|
1463
|
+
<fig-slider min="0"
|
|
1464
|
+
max="100"
|
|
1465
|
+
value="50"
|
|
1466
|
+
text="true"
|
|
1467
|
+
full></fig-slider>
|
|
1468
|
+
</section>
|
|
1469
|
+
<hr>
|
|
1470
|
+
|
|
1471
|
+
<!-- Spinner -->
|
|
1472
|
+
<section id="spinner">
|
|
1020
1473
|
<h2>Spinner</h2>
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
<
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
</
|
|
1040
|
-
<
|
|
1041
|
-
|
|
1042
|
-
<fig-
|
|
1474
|
+
<p class="description">A loading spinner indicator.</p>
|
|
1475
|
+
|
|
1476
|
+
<h3>Default</h3>
|
|
1477
|
+
<fig-spinner></fig-spinner>
|
|
1478
|
+
|
|
1479
|
+
<h3>In Context</h3>
|
|
1480
|
+
<hstack>
|
|
1481
|
+
<fig-spinner></fig-spinner>
|
|
1482
|
+
<span style="font-size: 13px; color: var(--figma-color-text-secondary);">Loading...</span>
|
|
1483
|
+
</hstack>
|
|
1484
|
+
</section>
|
|
1485
|
+
<hr>
|
|
1486
|
+
|
|
1487
|
+
<!-- Switch -->
|
|
1488
|
+
<section id="switch">
|
|
1489
|
+
<h2>Switch</h2>
|
|
1490
|
+
<p class="description">A toggle switch for on/off states.</p>
|
|
1491
|
+
|
|
1492
|
+
<h3>States</h3>
|
|
1493
|
+
<div class="example-row">
|
|
1494
|
+
<label>Off</label>
|
|
1495
|
+
<fig-switch label="Off"
|
|
1496
|
+
checked="false"></fig-switch>
|
|
1497
|
+
</div>
|
|
1498
|
+
<div class="example-row">
|
|
1499
|
+
<label>On</label>
|
|
1500
|
+
<fig-switch label="On"
|
|
1501
|
+
checked="true"></fig-switch>
|
|
1502
|
+
</div>
|
|
1503
|
+
<div class="example-row">
|
|
1504
|
+
<label>Indeterminate</label>
|
|
1505
|
+
<fig-switch label="Indeterminate"
|
|
1506
|
+
indeterminate="true"></fig-switch>
|
|
1507
|
+
</div>
|
|
1508
|
+
<div class="example-row">
|
|
1509
|
+
<label>Disabled</label>
|
|
1510
|
+
<fig-switch label="Disabled"
|
|
1511
|
+
disabled></fig-switch>
|
|
1512
|
+
</div>
|
|
1513
|
+
<div class="example-row">
|
|
1514
|
+
<label>Disabled (on)</label>
|
|
1515
|
+
<fig-switch label="Disabled On"
|
|
1516
|
+
checked="true"
|
|
1517
|
+
disabled></fig-switch>
|
|
1518
|
+
</div>
|
|
1519
|
+
|
|
1520
|
+
<h3>Without Labels</h3>
|
|
1521
|
+
<div class="example-row">
|
|
1522
|
+
<label>Off</label>
|
|
1523
|
+
<fig-switch checked="false"></fig-switch>
|
|
1524
|
+
</div>
|
|
1525
|
+
<div class="example-row">
|
|
1526
|
+
<label>On</label>
|
|
1527
|
+
<fig-switch checked="true"></fig-switch>
|
|
1528
|
+
</div>
|
|
1529
|
+
<div class="example-row">
|
|
1530
|
+
<label>Disabled</label>
|
|
1531
|
+
<fig-switch disabled></fig-switch>
|
|
1532
|
+
</div>
|
|
1533
|
+
</section>
|
|
1534
|
+
<hr>
|
|
1535
|
+
|
|
1536
|
+
<!-- Tabs -->
|
|
1537
|
+
<section id="tabs">
|
|
1538
|
+
<h2>Tabs</h2>
|
|
1539
|
+
<p class="description">A tabbed interface for organizing content.</p>
|
|
1540
|
+
|
|
1541
|
+
<h3>Default</h3>
|
|
1542
|
+
<fig-tabs>
|
|
1543
|
+
<fig-tab selected
|
|
1544
|
+
content="#tab-content-1">Tab One</fig-tab>
|
|
1545
|
+
<fig-tab content="#tab-content-2">Tab Two</fig-tab>
|
|
1546
|
+
<fig-tab content="#tab-content-3">Tab Three</fig-tab>
|
|
1547
|
+
</fig-tabs>
|
|
1548
|
+
<fig-tab-content id="tab-content-1">
|
|
1549
|
+
<p>Content for Tab One. This is the default selected tab.</p>
|
|
1550
|
+
</fig-tab-content>
|
|
1551
|
+
<fig-tab-content id="tab-content-2">
|
|
1552
|
+
<p>Content for Tab Two. Click the tab to see this content.</p>
|
|
1553
|
+
</fig-tab-content>
|
|
1554
|
+
<fig-tab-content id="tab-content-3">
|
|
1555
|
+
<p>Content for Tab Three. Each tab can have different content.</p>
|
|
1556
|
+
</fig-tab-content>
|
|
1557
|
+
|
|
1558
|
+
<h3>Two Tabs</h3>
|
|
1559
|
+
<fig-tabs>
|
|
1560
|
+
<fig-tab selected
|
|
1561
|
+
content="#two-tab-1">First</fig-tab>
|
|
1562
|
+
<fig-tab content="#two-tab-2">Second</fig-tab>
|
|
1563
|
+
</fig-tabs>
|
|
1564
|
+
<fig-tab-content id="two-tab-1">First tab content</fig-tab-content>
|
|
1565
|
+
<fig-tab-content id="two-tab-2">Second tab content</fig-tab-content>
|
|
1566
|
+
</section>
|
|
1567
|
+
<hr>
|
|
1568
|
+
|
|
1569
|
+
<!-- Toast -->
|
|
1570
|
+
<section id="toast">
|
|
1571
|
+
<h2>Toast</h2>
|
|
1572
|
+
<p class="description">A non-modal, time-based notification that appears at the bottom center of the screen.
|
|
1573
|
+
</p>
|
|
1574
|
+
|
|
1575
|
+
<h3>Basic Toast</h3>
|
|
1576
|
+
<fig-button onclick="document.getElementById('basic-toast').showToast()">Show Toast</fig-button>
|
|
1577
|
+
<dialog id="basic-toast"
|
|
1578
|
+
is="fig-toast">
|
|
1579
|
+
<p>Your changes have been saved.</p>
|
|
1580
|
+
</dialog>
|
|
1581
|
+
|
|
1582
|
+
<h3>With Dismiss Button</h3>
|
|
1583
|
+
<fig-button onclick="document.getElementById('dismiss-toast').showToast()">Show Toast with
|
|
1584
|
+
Dismiss</fig-button>
|
|
1585
|
+
<dialog id="dismiss-toast"
|
|
1586
|
+
is="fig-toast">
|
|
1587
|
+
<p>File uploaded successfully.</p>
|
|
1588
|
+
<hr vertical />
|
|
1589
|
+
<fig-button variant="ghost"
|
|
1590
|
+
icon="true"
|
|
1591
|
+
close-toast>
|
|
1592
|
+
<svg width="24"
|
|
1593
|
+
height="24"
|
|
1594
|
+
viewBox="0 0 24 24"
|
|
1595
|
+
fill="none"
|
|
1596
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
1597
|
+
<path fill-rule="evenodd"
|
|
1598
|
+
clip-rule="evenodd"
|
|
1599
|
+
d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
|
|
1600
|
+
fill="currentColor"
|
|
1601
|
+
fill-opacity="0.9" />
|
|
1602
|
+
</svg>
|
|
1603
|
+
</fig-button>
|
|
1604
|
+
</dialog>
|
|
1605
|
+
|
|
1606
|
+
<h3>With Action</h3>
|
|
1607
|
+
<fig-button onclick="document.getElementById('action-toast').showToast()">Show Toast with
|
|
1608
|
+
Action</fig-button>
|
|
1609
|
+
<dialog id="action-toast"
|
|
1610
|
+
is="fig-toast">
|
|
1611
|
+
<p>Item moved to trash.</p>
|
|
1612
|
+
<fig-button variant="link"
|
|
1613
|
+
close-toast>Undo</fig-button>
|
|
1614
|
+
</dialog>
|
|
1615
|
+
|
|
1616
|
+
<h3>No Auto-Dismiss</h3>
|
|
1617
|
+
<fig-button onclick="document.getElementById('persistent-toast').showToast()">Show Persistent
|
|
1618
|
+
Toast</fig-button>
|
|
1619
|
+
<dialog id="persistent-toast"
|
|
1620
|
+
is="fig-toast"
|
|
1621
|
+
duration="0">
|
|
1622
|
+
<p>This toast won't auto-dismiss.</p>
|
|
1623
|
+
<fig-button variant="ghost"
|
|
1624
|
+
close-toast>Close</fig-button>
|
|
1625
|
+
</dialog>
|
|
1626
|
+
|
|
1627
|
+
<h3>Custom Duration (2 seconds)</h3>
|
|
1628
|
+
<fig-button onclick="document.getElementById('short-toast').showToast()">Show Short Toast</fig-button>
|
|
1629
|
+
<dialog id="short-toast"
|
|
1630
|
+
is="fig-toast"
|
|
1631
|
+
duration="2000">
|
|
1632
|
+
<p>This disappears quickly!</p>
|
|
1633
|
+
</dialog>
|
|
1634
|
+
|
|
1635
|
+
<h3>Custom Offset (64px)</h3>
|
|
1636
|
+
<fig-button onclick="document.getElementById('offset-toast').showToast()">Show Offset Toast</fig-button>
|
|
1637
|
+
<dialog id="offset-toast"
|
|
1638
|
+
is="fig-toast"
|
|
1639
|
+
offset="64">
|
|
1640
|
+
<p>This toast is 64px from the bottom.</p>
|
|
1641
|
+
</dialog>
|
|
1642
|
+
|
|
1643
|
+
<h3>Themes</h3>
|
|
1644
|
+
<hstack>
|
|
1645
|
+
<fig-button onclick="document.getElementById('dark-toast').showToast()">Dark (default)</fig-button>
|
|
1646
|
+
<fig-button onclick="document.getElementById('light-toast').showToast()">Light</fig-button>
|
|
1647
|
+
<fig-button onclick="document.getElementById('danger-toast').showToast()">Danger</fig-button>
|
|
1648
|
+
<fig-button onclick="document.getElementById('brand-toast').showToast()">Brand</fig-button>
|
|
1649
|
+
</hstack>
|
|
1650
|
+
<dialog id="dark-toast"
|
|
1651
|
+
is="fig-toast"
|
|
1652
|
+
theme="dark">
|
|
1653
|
+
<p>Dark theme toast message.</p>
|
|
1654
|
+
</dialog>
|
|
1655
|
+
<dialog id="light-toast"
|
|
1656
|
+
is="fig-toast"
|
|
1657
|
+
theme="light">
|
|
1658
|
+
<p>Light theme toast message.</p>
|
|
1659
|
+
</dialog>
|
|
1660
|
+
<dialog id="danger-toast"
|
|
1661
|
+
is="fig-toast"
|
|
1662
|
+
theme="danger">
|
|
1663
|
+
<p>Danger theme toast message.</p>
|
|
1664
|
+
</dialog>
|
|
1665
|
+
<dialog id="brand-toast"
|
|
1666
|
+
is="fig-toast"
|
|
1667
|
+
theme="brand">
|
|
1668
|
+
<p>Brand theme toast message.</p>
|
|
1669
|
+
</dialog>
|
|
1670
|
+
</section>
|
|
1671
|
+
<hr>
|
|
1672
|
+
|
|
1673
|
+
<!-- Tooltip -->
|
|
1674
|
+
<section id="tooltip">
|
|
1675
|
+
<h2>Tooltip</h2>
|
|
1676
|
+
<p class="description">A small popup that appears on hover to provide additional information.</p>
|
|
1677
|
+
|
|
1678
|
+
<h3>Default</h3>
|
|
1679
|
+
<fig-tooltip text="This is a tooltip">
|
|
1680
|
+
<fig-button>Hover me</fig-button>
|
|
1043
1681
|
</fig-tooltip>
|
|
1044
|
-
|
|
1682
|
+
|
|
1683
|
+
<h3>On Different Elements</h3>
|
|
1684
|
+
<hstack>
|
|
1685
|
+
<fig-tooltip text="Button tooltip">
|
|
1686
|
+
<fig-button variant="secondary">Button</fig-button>
|
|
1687
|
+
</fig-tooltip>
|
|
1688
|
+
<fig-tooltip text="Icon tooltip">
|
|
1689
|
+
<fig-button variant="ghost"
|
|
1690
|
+
icon="true">
|
|
1691
|
+
<svg width="16"
|
|
1692
|
+
height="16"
|
|
1693
|
+
viewBox="0 0 16 16"
|
|
1694
|
+
fill="none"
|
|
1695
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
1696
|
+
<path fill-rule="evenodd"
|
|
1697
|
+
clip-rule="evenodd"
|
|
1698
|
+
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"
|
|
1699
|
+
fill="currentColor" />
|
|
1700
|
+
</svg>
|
|
1701
|
+
</fig-button>
|
|
1702
|
+
</fig-tooltip>
|
|
1703
|
+
<fig-tooltip text="Text tooltip">
|
|
1704
|
+
<em style="cursor: help;">Hover this text</em>
|
|
1705
|
+
</fig-tooltip>
|
|
1706
|
+
</hstack>
|
|
1707
|
+
|
|
1708
|
+
<h3>Instant (No Delay)</h3>
|
|
1709
|
+
<fig-tooltip text="Instant tooltip"
|
|
1045
1710
|
delay="0">
|
|
1046
|
-
<fig-
|
|
1711
|
+
<fig-button>No delay</fig-button>
|
|
1047
1712
|
</fig-tooltip>
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1713
|
+
|
|
1714
|
+
<h3>Long Text</h3>
|
|
1715
|
+
<fig-tooltip text="This is a much longer tooltip that contains more detailed information about the element">
|
|
1716
|
+
<fig-button variant="secondary">Long tooltip</fig-button>
|
|
1051
1717
|
</fig-tooltip>
|
|
1052
1718
|
|
|
1053
|
-
|
|
1719
|
+
<h3>Inline Usage</h3>
|
|
1720
|
+
<p style="font-size: 13px;">
|
|
1721
|
+
Some paragraph text with a
|
|
1722
|
+
<fig-tooltip text="Additional context">
|
|
1723
|
+
<em style="cursor: help; text-decoration: underline dotted;">tooltip</em>
|
|
1724
|
+
</fig-tooltip>
|
|
1725
|
+
for more information.
|
|
1726
|
+
</p>
|
|
1727
|
+
</section>
|
|
1728
|
+
<hr>
|
|
1054
1729
|
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
<
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
<
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
</
|
|
1104
|
-
<
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
<
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1730
|
+
<!-- HStack -->
|
|
1731
|
+
<section id="hstack">
|
|
1732
|
+
<h2>HStack</h2>
|
|
1733
|
+
<p class="description">A horizontal flex container for laying out elements in a row.</p>
|
|
1734
|
+
|
|
1735
|
+
<h3>Basic Usage</h3>
|
|
1736
|
+
<hstack>
|
|
1737
|
+
<fig-button>Button 1</fig-button>
|
|
1738
|
+
<fig-button>Button 2</fig-button>
|
|
1739
|
+
<fig-button>Button 3</fig-button>
|
|
1740
|
+
</hstack>
|
|
1741
|
+
|
|
1742
|
+
<h3>Mixed Elements</h3>
|
|
1743
|
+
<hstack>
|
|
1744
|
+
<fig-avatar name="John Doe"></fig-avatar>
|
|
1745
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">John Doe</span>
|
|
1746
|
+
<fig-button variant="secondary"
|
|
1747
|
+
size="small">Follow</fig-button>
|
|
1748
|
+
</hstack>
|
|
1749
|
+
|
|
1750
|
+
<h3>Form Controls</h3>
|
|
1751
|
+
<hstack>
|
|
1752
|
+
<fig-input-text placeholder="Enter value"
|
|
1753
|
+
style="width: 120px;"></fig-input-text>
|
|
1754
|
+
<fig-dropdown style="width: 100px;">
|
|
1755
|
+
<option>px</option>
|
|
1756
|
+
<option>%</option>
|
|
1757
|
+
<option>em</option>
|
|
1758
|
+
</fig-dropdown>
|
|
1759
|
+
<fig-button variant="primary">Apply</fig-button>
|
|
1760
|
+
</hstack>
|
|
1761
|
+
|
|
1762
|
+
<h3>With Chips/Chits</h3>
|
|
1763
|
+
<hstack>
|
|
1764
|
+
<fig-chit type="color"
|
|
1765
|
+
value="#FF5733"></fig-chit>
|
|
1766
|
+
<fig-chit type="color"
|
|
1767
|
+
value="#33FF57"></fig-chit>
|
|
1768
|
+
<fig-chit type="color"
|
|
1769
|
+
value="#3357FF"></fig-chit>
|
|
1770
|
+
<fig-chit type="color"
|
|
1771
|
+
value="#FF33F5"></fig-chit>
|
|
1772
|
+
</hstack>
|
|
1773
|
+
</section>
|
|
1774
|
+
<hr>
|
|
1775
|
+
|
|
1776
|
+
<!-- VStack -->
|
|
1777
|
+
<section id="vstack">
|
|
1778
|
+
<h2>VStack</h2>
|
|
1779
|
+
<p class="description">A vertical flex container for laying out elements in a column.</p>
|
|
1780
|
+
|
|
1781
|
+
<h3>Basic Usage</h3>
|
|
1782
|
+
<vstack style="max-width: 200px;">
|
|
1783
|
+
<fig-button>Button 1</fig-button>
|
|
1784
|
+
<fig-button>Button 2</fig-button>
|
|
1785
|
+
<fig-button>Button 3</fig-button>
|
|
1786
|
+
</vstack>
|
|
1787
|
+
|
|
1788
|
+
<h3>Form Layout</h3>
|
|
1789
|
+
<vstack style="max-width: 280px;">
|
|
1790
|
+
<fig-input-text label="Name"
|
|
1791
|
+
placeholder="Enter your name"></fig-input-text>
|
|
1792
|
+
<fig-input-text label="Email"
|
|
1793
|
+
placeholder="Enter your email"></fig-input-text>
|
|
1794
|
+
<fig-input-text label="Password"
|
|
1795
|
+
type="password"
|
|
1796
|
+
placeholder="Enter password"></fig-input-text>
|
|
1797
|
+
<fig-button variant="primary"
|
|
1798
|
+
style="align-self: flex-end;">Submit</fig-button>
|
|
1799
|
+
</vstack>
|
|
1800
|
+
|
|
1801
|
+
<h3>Settings Panel</h3>
|
|
1802
|
+
<vstack style="max-width: 280px;">
|
|
1803
|
+
<fig-switch label="Enable notifications"></fig-switch>
|
|
1804
|
+
<fig-switch label="Dark mode"></fig-switch>
|
|
1805
|
+
<fig-switch label="Auto-save"></fig-switch>
|
|
1806
|
+
<fig-checkbox label="Remember my preferences"></fig-checkbox>
|
|
1807
|
+
</vstack>
|
|
1808
|
+
|
|
1809
|
+
<h3>Nested Stacks</h3>
|
|
1810
|
+
<vstack style="max-width: 300px;">
|
|
1811
|
+
<hstack>
|
|
1812
|
+
<fig-avatar name="Alice"></fig-avatar>
|
|
1813
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Alice Johnson</span>
|
|
1814
|
+
</hstack>
|
|
1815
|
+
<hstack>
|
|
1816
|
+
<fig-avatar name="Bob"></fig-avatar>
|
|
1817
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Bob Smith</span>
|
|
1818
|
+
</hstack>
|
|
1819
|
+
<hstack>
|
|
1820
|
+
<fig-avatar name="Carol"></fig-avatar>
|
|
1821
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Carol Williams</span>
|
|
1822
|
+
</hstack>
|
|
1823
|
+
</vstack>
|
|
1824
|
+
</section>
|
|
1825
|
+
<hr>
|
|
1826
|
+
|
|
1827
|
+
<!-- HR -->
|
|
1828
|
+
<section id="hr">
|
|
1829
|
+
<h2>HR</h2>
|
|
1830
|
+
<p class="description">A horizontal rule for visual separation of content.</p>
|
|
1831
|
+
|
|
1832
|
+
<h3>Default</h3>
|
|
1833
|
+
<div style="padding: 16px 0;">
|
|
1834
|
+
<p style="font-size: 13px; color: var(--figma-color-text); margin: 0 0 16px 0;">Content above the
|
|
1835
|
+
divider</p>
|
|
1836
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 0;">
|
|
1837
|
+
<p style="font-size: 13px; color: var(--figma-color-text); margin: 16px 0 0 0;">Content below the
|
|
1838
|
+
divider</p>
|
|
1839
|
+
</div>
|
|
1840
|
+
|
|
1841
|
+
<h3>In a List</h3>
|
|
1842
|
+
<vstack style="max-width: 280px;">
|
|
1843
|
+
<hstack>
|
|
1844
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Item One</span>
|
|
1845
|
+
</hstack>
|
|
1846
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 0; width: 100%;">
|
|
1847
|
+
<hstack>
|
|
1848
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Item Two</span>
|
|
1849
|
+
</hstack>
|
|
1850
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 0; width: 100%;">
|
|
1851
|
+
<hstack>
|
|
1852
|
+
<span style="font-size: 13px; color: var(--figma-color-text);">Item Three</span>
|
|
1853
|
+
</hstack>
|
|
1854
|
+
</vstack>
|
|
1855
|
+
|
|
1856
|
+
<h3>Section Separator</h3>
|
|
1857
|
+
<vstack style="max-width: 300px;">
|
|
1858
|
+
<h4 style="font-size: 13px; font-weight: 600; color: var(--figma-color-text); margin: 0;">Section A</h4>
|
|
1859
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin: 0;">Some content for
|
|
1860
|
+
section A.</p>
|
|
1861
|
+
<hr style="border: none; border-top: 1px solid var(--figma-color-border); margin: 8px 0; width: 100%;">
|
|
1862
|
+
<h4 style="font-size: 13px; font-weight: 600; color: var(--figma-color-text); margin: 0;">Section B</h4>
|
|
1863
|
+
<p style="font-size: 12px; color: var(--figma-color-text-secondary); margin: 0;">Some content for
|
|
1864
|
+
section B.</p>
|
|
1865
|
+
</vstack>
|
|
1866
|
+
</section>
|
|
1867
|
+
<hr>
|
|
1868
|
+
|
|
1869
|
+
<!-- Code -->
|
|
1870
|
+
<section id="code">
|
|
1871
|
+
<h2>Code</h2>
|
|
1872
|
+
<p class="description">Inline and block code formatting for displaying code snippets.</p>
|
|
1873
|
+
|
|
1874
|
+
<h3>Inline Code</h3>
|
|
1875
|
+
<p style="font-size: 13px; color: var(--figma-color-text);">
|
|
1876
|
+
Use the <code
|
|
1877
|
+
style="background: var(--figma-color-bg-secondary); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px;">fig-button</code>
|
|
1878
|
+
component for buttons.
|
|
1879
|
+
</p>
|
|
1880
|
+
|
|
1881
|
+
<h3>Code Block</h3>
|
|
1882
|
+
<pre
|
|
1883
|
+
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">
|
|
1884
|
+
Click me
|
|
1885
|
+
</fig-button></code></pre>
|
|
1886
|
+
|
|
1887
|
+
<h3>Multiple Lines</h3>
|
|
1888
|
+
<pre
|
|
1889
|
+
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');
|
|
1890
|
+
button.addEventListener('click', () => {
|
|
1891
|
+
console.log('Button clicked!');
|
|
1892
|
+
});</code></pre>
|
|
1893
|
+
|
|
1894
|
+
<h3>CSS Example</h3>
|
|
1895
|
+
<pre
|
|
1896
|
+
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 {
|
|
1897
|
+
--button-bg: var(--figma-color-bg-brand);
|
|
1898
|
+
--button-color: white;
|
|
1899
|
+
border-radius: 6px;
|
|
1900
|
+
}</code></pre>
|
|
1901
|
+
</section>
|
|
1902
|
+
</main>
|
|
1148
1903
|
|
|
1149
1904
|
<script>
|
|
1150
|
-
|
|
1151
|
-
|
|
1905
|
+
// Highlight nav item based on hash
|
|
1906
|
+
function updateActiveNav() {
|
|
1907
|
+
const hash = location.hash || '#avatar';
|
|
1908
|
+
document.querySelectorAll('nav .nav-links a').forEach(a => {
|
|
1909
|
+
a.classList.toggle('active', a.getAttribute('href') === hash);
|
|
1910
|
+
});
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
// Track if we're in a click-initiated scroll
|
|
1914
|
+
let isClickScrolling = false;
|
|
1915
|
+
|
|
1916
|
+
// Update hash on scroll using IntersectionObserver
|
|
1917
|
+
const observer = new IntersectionObserver(entries => {
|
|
1918
|
+
if (isClickScrolling) return;
|
|
1919
|
+
|
|
1920
|
+
entries.forEach(entry => {
|
|
1921
|
+
if (entry.isIntersecting) {
|
|
1922
|
+
history.replaceState(null, '', '#' + entry.target.id);
|
|
1923
|
+
updateActiveNav();
|
|
1924
|
+
}
|
|
1925
|
+
});
|
|
1926
|
+
}, { threshold: 0.3 });
|
|
1927
|
+
|
|
1928
|
+
document.querySelectorAll('section[id]').forEach(s => observer.observe(s));
|
|
1929
|
+
|
|
1930
|
+
// Handle nav clicks - disable observer during scroll
|
|
1931
|
+
document.querySelectorAll('nav .nav-links a').forEach(a => {
|
|
1932
|
+
a.addEventListener('click', (e) => {
|
|
1933
|
+
e.preventDefault();
|
|
1934
|
+
const targetId = a.getAttribute('href');
|
|
1935
|
+
const target = document.querySelector(targetId);
|
|
1936
|
+
if (target) {
|
|
1937
|
+
isClickScrolling = true;
|
|
1938
|
+
history.pushState(null, '', targetId);
|
|
1939
|
+
updateActiveNav();
|
|
1940
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
1941
|
+
// Re-enable observer after scroll completes
|
|
1942
|
+
setTimeout(() => { isClickScrolling = false; }, 500);
|
|
1943
|
+
}
|
|
1944
|
+
});
|
|
1152
1945
|
});
|
|
1153
1946
|
|
|
1154
|
-
|
|
1947
|
+
// Initial state
|
|
1948
|
+
window.addEventListener('load', () => {
|
|
1949
|
+
updateActiveNav();
|
|
1950
|
+
if (location.hash) {
|
|
1951
|
+
document.querySelector(location.hash)?.scrollIntoView();
|
|
1952
|
+
}
|
|
1953
|
+
});
|
|
1954
|
+
|
|
1955
|
+
window.addEventListener('hashchange', updateActiveNav);
|
|
1956
|
+
|
|
1957
|
+
// Dialog position helper
|
|
1958
|
+
function openPositionedDialog(position) {
|
|
1959
|
+
const dialog = document.getElementById('positioned-dialog');
|
|
1960
|
+
dialog.setAttribute('position', position);
|
|
1961
|
+
dialog.showModal();
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1964
|
+
// Theme toggle
|
|
1965
|
+
const themeToggle = document.getElementById('theme-toggle');
|
|
1966
|
+
const themeLightBtn = document.getElementById('theme-light-btn');
|
|
1967
|
+
const themeDarkBtn = document.getElementById('theme-dark-btn');
|
|
1968
|
+
|
|
1969
|
+
function setTheme(isDark) {
|
|
1970
|
+
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
|
|
1971
|
+
document.documentElement.classList.toggle('figma-dark', isDark);
|
|
1972
|
+
document.documentElement.classList.toggle('figma-light', !isDark);
|
|
1973
|
+
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
1974
|
+
// Sync switch state
|
|
1975
|
+
if (isDark) {
|
|
1976
|
+
themeToggle.setAttribute('checked', 'true');
|
|
1977
|
+
} else {
|
|
1978
|
+
themeToggle.removeAttribute('checked');
|
|
1979
|
+
}
|
|
1980
|
+
}
|
|
1155
1981
|
|
|
1982
|
+
// Initialize theme from localStorage or system preference
|
|
1983
|
+
const savedTheme = localStorage.getItem('theme');
|
|
1984
|
+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
1985
|
+
const isDark = savedTheme ? savedTheme === 'dark' : prefersDark;
|
|
1986
|
+
setTheme(isDark);
|
|
1987
|
+
|
|
1988
|
+
// Listen for toggle changes
|
|
1989
|
+
themeToggle.addEventListener('change', (e) => {
|
|
1990
|
+
setTheme(e.target.checked);
|
|
1991
|
+
});
|
|
1992
|
+
|
|
1993
|
+
// Light button clicks - set to light mode
|
|
1994
|
+
themeLightBtn.addEventListener('click', () => {
|
|
1995
|
+
setTheme(false);
|
|
1996
|
+
});
|
|
1997
|
+
|
|
1998
|
+
// Dark button clicks - set to dark mode
|
|
1999
|
+
themeDarkBtn.addEventListener('click', () => {
|
|
2000
|
+
setTheme(true);
|
|
2001
|
+
});
|
|
2002
|
+
|
|
2003
|
+
// Listen for system preference changes
|
|
2004
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
2005
|
+
if (!localStorage.getItem('theme')) {
|
|
2006
|
+
setTheme(e.matches);
|
|
2007
|
+
}
|
|
2008
|
+
});
|
|
2009
|
+
</script>
|
|
1156
2010
|
</body>
|
|
1157
2011
|
|
|
1158
2012
|
</html>
|