@rogieking/figui3 2.27.0 → 2.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -23
- package/components.css +250 -25
- package/dist/fig.js +367 -0
- package/fig.js +920 -316
- package/index.html +8 -78
- package/package.json +1 -1
package/index.html
CHANGED
|
@@ -183,6 +183,13 @@
|
|
|
183
183
|
text-shadow: none;
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
+
/* Prism theme reset: remove glow/shadow from highlighted code */
|
|
187
|
+
pre[class*="language-"],
|
|
188
|
+
code[class*="language-"],
|
|
189
|
+
.token {
|
|
190
|
+
text-shadow: none !important;
|
|
191
|
+
}
|
|
192
|
+
|
|
186
193
|
:root {
|
|
187
194
|
--code-token-comment: #6b7280;
|
|
188
195
|
--code-token-punctuation: #374151;
|
|
@@ -308,7 +315,6 @@
|
|
|
308
315
|
<a href="#input-number">Input Number</a>
|
|
309
316
|
<a href="#input-text">Input Text</a>
|
|
310
317
|
<a href="#layer">Layer</a>
|
|
311
|
-
<a href="#popover">Popover</a>
|
|
312
318
|
<a href="#popup">Popup</a>
|
|
313
319
|
<a href="#radio">Radio</a>
|
|
314
320
|
<a href="#segmented-control">Segmented Control</a>
|
|
@@ -3170,82 +3176,6 @@
|
|
|
3170
3176
|
</section>
|
|
3171
3177
|
<hr>
|
|
3172
3178
|
|
|
3173
|
-
<!-- Popover -->
|
|
3174
|
-
<section id="popover">
|
|
3175
|
-
<h2>Popover</h2>
|
|
3176
|
-
<p class="description">A floating panel that appears on hover or click.</p>
|
|
3177
|
-
|
|
3178
|
-
<h3>Hover Trigger</h3>
|
|
3179
|
-
<fig-popover action="hover">
|
|
3180
|
-
<fig-button>Hover me</fig-button>
|
|
3181
|
-
<div popover>
|
|
3182
|
-
<fig-header>
|
|
3183
|
-
<h3>Quick Info</h3>
|
|
3184
|
-
</fig-header>
|
|
3185
|
-
<fig-content>
|
|
3186
|
-
<fig-field direction="horizontal">
|
|
3187
|
-
<label>Status</label>
|
|
3188
|
-
<span style="color: var(--figma-color-text-success)">Active</span>
|
|
3189
|
-
</fig-field>
|
|
3190
|
-
<fig-field direction="horizontal">
|
|
3191
|
-
<label>Type</label>
|
|
3192
|
-
<span>Component</span>
|
|
3193
|
-
</fig-field>
|
|
3194
|
-
</fig-content>
|
|
3195
|
-
</div>
|
|
3196
|
-
</fig-popover>
|
|
3197
|
-
|
|
3198
|
-
<h3>Click Trigger</h3>
|
|
3199
|
-
<fig-popover action="click">
|
|
3200
|
-
<fig-button>Click me</fig-button>
|
|
3201
|
-
<div popover>
|
|
3202
|
-
<fig-header>
|
|
3203
|
-
<h3>Popover Title</h3>
|
|
3204
|
-
</fig-header>
|
|
3205
|
-
<fig-content>
|
|
3206
|
-
<fig-field direction="horizontal">
|
|
3207
|
-
<label>Name</label>
|
|
3208
|
-
<fig-input-text placeholder="Enter name"></fig-input-text>
|
|
3209
|
-
</fig-field>
|
|
3210
|
-
<fig-field direction="horizontal">
|
|
3211
|
-
<label>Enabled</label>
|
|
3212
|
-
<fig-switch></fig-switch>
|
|
3213
|
-
</fig-field>
|
|
3214
|
-
</fig-content>
|
|
3215
|
-
</div>
|
|
3216
|
-
</fig-popover>
|
|
3217
|
-
|
|
3218
|
-
<h3>With Form Content</h3>
|
|
3219
|
-
<fig-popover action="manual"
|
|
3220
|
-
size="large">
|
|
3221
|
-
<fig-button>Settings</fig-button>
|
|
3222
|
-
<div popover>
|
|
3223
|
-
<fig-header>
|
|
3224
|
-
<h3>Settings</h3>
|
|
3225
|
-
</fig-header>
|
|
3226
|
-
<fig-content>
|
|
3227
|
-
<fig-field direction="horizontal">
|
|
3228
|
-
<label>Opacity</label>
|
|
3229
|
-
<fig-slider min="0"
|
|
3230
|
-
max="100"
|
|
3231
|
-
value="50"
|
|
3232
|
-
text="true"
|
|
3233
|
-
units="%"></fig-slider>
|
|
3234
|
-
</fig-field>
|
|
3235
|
-
<fig-field direction="horizontal">
|
|
3236
|
-
<label>Mode</label>
|
|
3237
|
-
<fig-dropdown>
|
|
3238
|
-
<option>Normal</option>
|
|
3239
|
-
<option>Multiply</option>
|
|
3240
|
-
<option>Screen</option>
|
|
3241
|
-
</fig-dropdown>
|
|
3242
|
-
</fig-field>
|
|
3243
|
-
</fig-content>
|
|
3244
|
-
</div>
|
|
3245
|
-
</fig-popover>
|
|
3246
|
-
</section>
|
|
3247
|
-
<hr>
|
|
3248
|
-
|
|
3249
3179
|
<!-- Popup -->
|
|
3250
3180
|
<section id="popup">
|
|
3251
3181
|
<h2>Popup</h2>
|
|
@@ -4731,7 +4661,7 @@
|
|
|
4731
4661
|
<pre
|
|
4732
4662
|
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');
|
|
4733
4663
|
button.addEventListener('click', () => {
|
|
4734
|
-
|
|
4664
|
+
// handle click
|
|
4735
4665
|
});</code></pre>
|
|
4736
4666
|
|
|
4737
4667
|
<h3>CSS Example</h3>
|
package/package.json
CHANGED