@rogieking/figui3
Version:
A lightweight, customizable web component library that uses Figmas UI3 style for modern web applications, but specifically for Figma plugins.
872 lines (837 loc) • 35.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Figma UI3 Web Components</title>
<link rel="stylesheet"
type="text/css"
href="fig.css">
<script src="fig.js"></script>
<style>
body {
width: 480px;
margin: 0 auto;
}
</style>
</head>
<body>
<fig-header>
<h2><label>Effects/</label>UI3 Components</h2>
</fig-header>
<fig-content>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<hstack>
<fig-tooltip text="Tooltip"
delay="0">
<fig-button>
Test
</fig-button>
</fig-tooltip>
<fig-tooltip text="Tooltip that is a bit longer"
delay="0">
<fig-button>
Test
</fig-button>
</fig-tooltip>
<fig-tooltip text="Tooltip that is a bit longer ish"
delay="0">
<fig-button>
Test
</fig-button>
</fig-tooltip>
<fig-tooltip text="Tooltip that is a bit longer ish yet"
delay="0">
<fig-button>
Test
</fig-button>
</fig-tooltip>
<fig-tooltip text="Tooltip that is a bit longer and has a lot of text and even more text"
delay="0">
<fig-button>
Test
</fig-button>
</fig-tooltip>
<fig-tooltip text="Super mega fuckin long ass tooltip that likely shouldn't even be possible to fit in the space"
delay="0">
<fig-button>
Test
</fig-button>
</fig-tooltip>
</hstack>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<fig-button type="link"
href="https://www.google.com">
<svg width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<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"
fill="black"
fill-opacity="0.9" />
</svg>
Install</fig-button>
<fig-button type="link"
target="_blank"
size="large"
href="https://www.google.com">
<svg width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<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"
fill="black"
fill-opacity="0.9" />
</svg>
Install</fig-button>
<select>
<optgroup label="Numbers">
<legend>Numbers</legend>
<option>One</option>
<option>Two</option>
<option>One</option>
<option>Two</option>
<option>One</option>
<option>Two</option>
</optgroup>
<optgroup label="Fruits">
<legend>Fruits</legend>
<option>Apple</option>
<option>Banana</option>
<option>Apple</option>
<option>Banana</option>
<option>Apple</option>
<option>Banana</option>
<option>Apple</option>
<option>Banana</option>
<option>Apple</option>
<option>Banana</option>
</optgroup>
</select>
<fig-slider min="-1"
max="1"
name="u_thickness"
variant="minimal"
step="0.01"
value="0"
text="true"
type="range"
units="%"
transform="100">
</fig-slider>
<fig-input-text type="number"
min="1"
style="width: 100px;"
max="2"
step="0.01"
value="1.5"
type="range"
units="%"
onInput="console.log(event.target.value)"
transform="100">
</fig-input-text>
<fig-slider min="1"
max="2"
step="0.01"
value="1.5"
type="range"
units="%"
text="true"
onInput="console.log(event.target.value)"
transform="100">
</fig-slider>
<fig-input-angle text="true"
value="0"
onInput="console.log(event.target.adjacent, event.target.opposite)"></fig-input-angle>
<br /><br />
<fig-input-joystick></fig-input-joystick>
<br /><br />
<fig-input-joystick text="true"
value="0,0"
onInput="console.log(event.target.value)"></fig-input-joystick>
<fig-header>
<h2>Details</h2>
</fig-header>
<details>
<summary>Advanced settings</summary>
<p>Some more content here</p>
</details>
<fig-header>
<h2>Avatar</h2>
</fig-header>
<fig-field>
<label>Default</label>
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
name="John Doe"></fig-avatar>
</fig-field>
<fig-field>
<label>Large</label>
<fig-avatar size="large"
src="https://avatars.githubusercontent.com/u/12345678?v=4"
name="John Doe"></fig-avatar>
</fig-field>
<fig-field>
<label>No image (initials)</label>
<fig-avatar name="John Doe"></fig-avatar>
</fig-field>
<fig-field>
<label>Large</label>
<fig-avatar size="large"
src="https://gravatar.com/avatar/b6a96b1e55e3771caab3225dd98c8633?size=256"
name="Rogie King"></fig-avatar>
</fig-field>
<fig-header>
<h2>Tabs</h2>
</fig-header>
<fig-field>
<fig-tabs>
<fig-tab selected>Tab #1</fig-tab>
<fig-tab>Tab #2</fig-tab>
</fig-tabs>
</fig-field>
<fig-header>
<h2>Segmented control</h2>
</fig-header>
<fig-field>
<fig-segmented-control>
<fig-segment selected>One</fig-segment>
<fig-segment>Two</fig-segment>
<fig-segment>Three</fig-segment>
</fig-segmented-control>
</fig-field>
<fig-header>
<h2>Image</h2>
</fig-header>
<fig-field>
<label>Default</label>
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
</fig-field>
<fig-field>
<label>Medium</label>
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
size="medium"></fig-image>
</fig-field>
<fig-field>
<label>Large (with upload)</label>
<fig-image upload="true"
label="Upload image"
size="large"></fig-image>
</fig-field>
<br /><br />
<fig-header>
<h2>Button</h2>
</fig-header>
<fig-field>
<label>Primary Button</label>
<fig-button>Primary</fig-button>
</fig-field>
<fig-field>
<label>Secondary Button</label>
<fig-button variant="secondary">Secondary</fig-button>
</fig-field>
<fig-field>
<label>Ghost Button</label>
<fig-button variant="ghost">Ghost</fig-button>
</fig-field>
<fig-field>
<label>Submit Button</label>
<fig-button type="submit">Submit</fig-button>
</fig-field>
<fig-field>
<label>Disabled Button</label>
<fig-button disabled>Disabled</fig-button>
</fig-field>
<fig-field>
<label>Disabled Button (secondary)</label>
<fig-button variant="secondary"
disabled>Disabled</fig-button>
</fig-field>
<fig-field>
<label>Disabled Button (icon)</label>
<fig-button variant="secondary"
icon="true"
disabled><svg width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"></path>
</svg></fig-button>
</fig-field>
<fig-header>
<h2>Combo button</h2>
</fig-header>
<fig-field>
<label>Primary (compact dropdown</label>
<fig-button-combo>
<fig-button>Primary</fig-button>
<fig-button icon="true"
type="select"
size="compact">
<svg width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"
fill-opacity="0.9" />
</svg>
<fig-dropdown>
<option>One</option>
<option>Two</option>
</fig-dropdown>
</fig-button>
</fig-button-combo>
</fig-field>
<fig-field>
<label>Secondary (with dropdown)</label>
<fig-button-combo>
<fig-button variant="secondary">Secondary</fig-button>
<fig-button variant="secondary"
icon="true"
type="select">
<svg width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"
fill-opacity="0.9" />
</svg>
<fig-dropdown>
<option>One</option>
<option>Two</option>
</fig-dropdown>
</fig-button>
</fig-button-combo>
</fig-field>
<fig-field>
<label>Primary (disabled)</label>
<fig-button-combo>
<fig-button disabled>Button 1</fig-button>
<fig-button disabled>Button 2</fig-button>
<fig-button disabled>Button 3</fig-button>
</fig-button-combo>
</fig-field>
<fig-field>
<label>Secondary (disabled)</label>
<fig-button-combo>
<fig-button variant="secondary"
disabled>Button 1</fig-button>
<fig-button variant="secondary"
disabled>Button 2</fig-button>
<fig-button variant="secondary"
disabled>Button 3</fig-button>
</fig-button-combo>
</fig-field>
<fig-field>
<label>Select button</label>
<fig-button type="select">
Select
<fig-dropdown>
<option>One</option>
<option>Two</option>
</fig-dropdown>
</fig-button>
</fig-field>
<fig-field>
<label>Select button (icon)</label>
<fig-button icon="true"
type="select">
<svg width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"
fill-opacity="0.9" />
</svg>
<fig-dropdown>
<option>One</option>
<option>Two</option>
</fig-dropdown>
</fig-button>
</fig-field>
<fig-field>
<label>Upload button</label>
<fig-button variant="secondary"
type="upload">
Upload
<input type="file" />
</fig-button>
</fig-field>
<fig-field>
<label>Toggle button</label>
<fig-button variant="ghost"
type="toggle"
icon="true">
<svg class="svg"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<path fill="currentColor"
fill-opacity="1"
fill-rule="evenodd"
stroke="none"
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">
</path>
</svg>
</fig-button>
</fig-field>
<fig-field>
<label>Toggle button (selected) with tooltip</label>
<fig-tooltip text="Toggle off/on">
<fig-button variant="ghost"
type="toggle"
icon="true"
selected="true">
<svg width="24"
height="24"
fill="none"
viewBox="0 0 24 24">
<path fill="currentColor"
fill-rule="evenodd"
d="M9.5 7h-2a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5m-2-1A1.5 1.5 0 0 0 6 7.5v9A1.5 1.5 0 0 0 7.5 18h2a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 9.5 6zm9 1h-2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5m-2-1A1.5 1.5 0 0 0 13 7.5v2a1.5 1.5 0 0 0 1.5 1.5h2A1.5 1.5 0 0 0 18 9.5v-2A1.5 1.5 0 0 0 16.5 6zm3.384 8.32a.5.5 0 0 0-.768-.64l-2.15 2.58-1.112-1.114a.5.5 0 0 0-.708.708l1.5 1.5a.5.5 0 0 0 .738-.034z"
clip-rule="evenodd"></path>
</svg>
</fig-button>
</fig-tooltip>
</fig-field>
<fig-dialog open="true"
position="bottom right">
<fig-header>
<h3>Dialog</h3>
<fig-button variant="ghost"
icon="true"
close-dialog>
<svg width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
clip-rule="evenodd"
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"
fill="currentColor"
fill-opacity="0.9" />
</svg>
</fig-button>
</fig-header>
<fig-content>
<p>Some content here</p>
</fig-content>
<footer>
<fig-button variant="secondary"
close-dialog>Cancel</fig-button>
<fig-button>Save</fig-button>
</footer>
</fig-dialog>
<fig-header>
<h2>Dropdown</h2>
</fig-header>
<fig-field>
<label>Dropdown</label>
<fig-dropdown>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option selected>Fourhundred sixty two</option>
</fig-dropdown>
</fig-field>
<fig-field>
<label>Dropdown (with grouped options)</label>
<fig-dropdown>
<optgroup label="Numbers">
<option>One</option>
<option>Two</option>
</optgroup>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
</optgroup>
</fig-dropdown>
</fig-field>
<fig-field>
<label>Dropdown</label>
<fig-dropdown>
<option>One</option>
<option>Two</option>
</fig-dropdown>
</fig-field>
<h2>Text input</h2>
<fig-field>
<label>Text input</label>
<fig-input-text placeholder="Enter text"></fig-input-text>
</fig-field>
<fig-field>
<label>Multiline input</label>
<fig-input-text multiline="true"
value=""
autoresize="true"
resizable="true"
placeholder="Anthropic API key">
</fig-field>
<fig-field>
<label>Numeric input</label>
<fig-input-text placeholder="###"
type="number"></fig-input-text>
</fig-field>
<fig-field>
<label>Password input</label>
<fig-input-text type="password"></fig-input-text>
</fig-field>
<fig-field>
<label>Combo input</label>
<fig-combo-input options="House, Apartment, Condo, Other"
placeholder="Type of residence">
</fig-combo-input>
</fig-field>
<fig-field>
<label>Appended input</label>
<fig-input-text type="number"
min="0"
max="360"
value="90">
<span slot="append">°</span>
</fig-input-text>
</fig-field>
<fig-field>
<label>Prepended input</label>
<fig-input-text value=""
placeholder="Number">
<span slot="prepend">X</span>
</fig-input-text>
</fig-field>
<fig-header>
<h2>Color input</h2>
</fig-header>
<fig-field>
<label>Color swatch</label>
<fig-input-color value="#FF000066"></fig-input-color>
</fig-field>
<fig-field>
<label>Color input (with text)</label>
<fig-input-color value="#00FFFF33"
text="true"></fig-input-color>
</fig-field>
<fig-field>
<label>Color input (with text and alpha)</label>
<fig-input-color value="#00FF00"
alpha="true"
text="true"></fig-input-color>
</fig-field>
<fig-header>
<h2>Checkbox</h2>
</fig-header>
<fig-field>
<fig-checkbox label="Checkbox"></fig-checkbox>
</fig-field>
<fig-header>
<h2>Radio</h2>
</fig-header>
<fig-field>
<label>Radio buttons</label>
<fig-radio label="Radio #1"
name="r1"></fig-radio>
<fig-radio label="Radio #2"
name="r1"></fig-radio>
</fig-field>
<fig-header>
<h2>Switch</h2>
</fig-header>
<fig-field>
<label>Switches</label>
<fig-switch checked="true"
onInput="console.log(event.target.checked)"
label="On"></fig-switch>
<fig-switch checked="false"
label="Off"></fig-switch>
<fig-switch indeterminate="true"
label="Indeterminate"></fig-switch>
<fig-switch disabled
label="Disabled"></fig-switch>
</fig-field>
<fig-header>
<h2>Chit</h2>
</fig-header>
<fig-field>
<label>Chit</label>
<hstack>
<fig-chit type="color"
selected="true"
disabled="true"
value="#00FF00"></fig-chit>
<fig-chit type="color"
disabled="true"
value="#000000"></fig-chit>
<fig-chit type="gradient"
variant="linear"
size="large"
disabled="true"></fig-chit>
<fig-chit type="gradient"
variant="angular"
size="large"
selected="true"
disabled="true"></fig-chit>
<fig-chit type="gradient"
variant="radial"
size="large"
disabled="true"></fig-chit>
<fig-chit type="image"
disabled="true"
src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
<fig-chit type="image"
disabled="true"
size="large"
onclick="console.log('clicked')"
src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
<fig-chit type="image"
disabled="true"
selected="true"
size="large"
src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
<fig-chit type="image"
disabled="true"
size="large"></fig-chit>
</hstack>
</fig-field>
<fig-header>
<h2>Tooltip</h2>
</fig-header>
<p>Some paragraph text here with a
<fig-tooltip text="Tooltip text">
<em>Tooltip</em>
</fig-tooltip> for more information.
</p>
<fig-header>
<h2>Field</h2>
</fig-header>
<fig-field direction="horizontal">
<label>Horizontal</label>
<fig-input-text value=""
placeholder="Field placeholder"></fig-input-text>
</fig-field>
<fig-field>
<label>Vertical</label>
<fig-input-text value=""
placeholder="Field placeholder"></fig-input-text>
</fig-field>
<fig-header>
<h2>Slider</h2>
</fig-header>
<fig-field>
<label>Default slider</label>
<fig-slider default="25"
min="0"
max="500"></fig-slider>
</fig-field>
<fig-field>
<label>Number slider (with number input)</label>
<fig-slider text="true"
default="50"
value="50"></fig-slider>
</fig-field>
<fig-field>
<label>Opacity slider</label>
<fig-slider type="opacity"
value="0.75"
color="#ff0000"
units="%"
text="true"></fig-slider>
</fig-field>
<fig-field>
<label>Hue slider</label>
<fig-slider type="hue"
value="55"></fig-slider>
</fig-field>
<fig-field>
<label>Stepper slider</label>
<fig-slider type="stepper"
value="25"
default="75"
step="25">
<datalist>
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
</fig-slider>
</fig-field>
<fig-field direction="horizontal">
<label>Stepper slider (auto)</label>
<fig-slider type="stepper"
value="3"
min="1"
max="10"
step="1"
text="true">
</fig-slider>
</fig-field>
<fig-field>
<label>Delta slider</label>
<fig-slider type="delta"
value=".25"
default="0"
step="0.25"
max="5"
min="-5">
<datalist id="markers">
<option value="0"></option>
</datalist>
</fig-slider>
</fig-field>
<fig-header>
<h2>Spinner</h2>
</fig-header>
<fig-spinner></fig-spinner>
<fig-header>
<h2>Misc.</h2>
</fig-header>
<hstack>
<fig-tooltip text="Tooltip"
delay="0">
<fig-chit />
</fig-tooltip>
<fig-tooltip text="Tooltip"
delay="0">
<fig-chit />
</fig-tooltip>
<fig-tooltip text="Tooltip"
delay="0">
<fig-chit />
</fig-tooltip>
<fig-tooltip text="Tooltip"
delay="0">
<fig-chit />
</fig-tooltip>
<fig-tooltip text="Tooltip"
delay="0">
<fig-chit />
</fig-tooltip>
<fig-tooltip text="Tooltip"
delay="0">
<fig-chit />
</fig-tooltip>
</hstack>
<fig-field>
<label>Minimal ranges</label>
<fig-slider text="true"
min="0"
max="1"
style="width: 100%;"
step="0.01"
transform="100"
default="0.5"
variant="minimal"
value="0.5"></fig-slider>
</fig-field>
<fig-field direction="horizontal">
<label>Opacity</label>
<fig-slider type="opacity"
full
value="0.5"
min="0"
max="1"
step="0.01"
transform="100"
color="#ff0000"
units="%"
text="true"></fig-slider>
<fig-button variant="ghost"
type="toggle"
icon="true">
<svg class="svg"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<path fill="currentColor"
fill-opacity="1"
fill-rule="evenodd"
stroke="none"
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">
</path>
</svg>
</fig-button>
</fig-field>
<br />
<fig-field direction="horizontal">
<label>Blend mode</label>
<fig-dropdown full
type="dropdown">
<option selected="selected">One</option>
<option>Two</option>
</fig-dropdown>
<fig-button variant="ghost"
type="toggle"
icon="true">
<svg class="svg"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<path fill="currentColor"
fill-opacity="1"
fill-rule="evenodd"
stroke="none"
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">
</path>
</svg>
</fig-button>
</fig-field>
<br />
<fig-field direction="horizontal">
<label>Description</label>
<fig-input-text multiline="true"
value=""
full
autoresize="true"
resizable="true"
placeholder="Anthropic API key"></fig-input-text>
<fig-button variant="ghost"
type="toggle"
icon="true">
<svg class="svg"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<path fill="currentColor"
fill-opacity="1"
fill-rule="evenodd"
stroke="none"
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">
</path>
</svg>
</fig-button>
</fig-field>
</fig-content>
<script>
let elements = Array.from(document.querySelectorAll('*'));
elements.filter(n => n.tagName.toLowerCase().indexOf("fig-slider") > -1).forEach(n => n.addEventListener('input', (e) => {
console.log('input:', n.tagName, e.target)
}))
document.querySelectorAll('fig-input-color').forEach(n => n.addEventListener('change', (e) => {
console.log('change:', n.tagName, e.target.value)
}))
</script>
</body>
</html>