@rogieking/figui3
Version:
A lightweight, customizable web component library that uses Figmas UI3 style for modern web applications, but specifically for Figma plugins.
799 lines (768 loc) • 31.2 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>
<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)
}))
</script>
</body>
</html>