{
"category": [
{
"name": "button",
"examples": [
{
"id": "button",
"iframe_src": "{base.url}/examples/base",
"html": "<button>Button</button><button>Disabled</button><button><icon src=\"icons/check-mark.png\"></icon>Icon</button>",
"css": "row, gap:15px al:center"
},
{
"id": "button-icon-only",
"iframe_src": "{base.url}/examples/base",
"html": "<button style=\"width: 50px; height: 50px; border-radius: 50%;\"><icon src=\"icons/check-mark.png\"></icon></button>",
"css": "row, gap:15px al:center"
}
]
},
{
"name": "checkbox",
"examples": [
{
"id": "checkbox",
"iframe_src": "{base.url}/examples/base",
"html": "<checkbox>Checkbox</checkbox><checkbox checked>Checked</checkbox><checkbox disabled>Disabled</checkbox><checkbox></checkbox><checkbox checked></checkbox>",
"css": "column, gap:15px center:center"
},
{
"id": "checkbox-custom-icon",
"iframe_src": "{base.url}/examples/base",
"html": "<checkbox>Checkbox</checkbox><checkbox checked>Checked</checkbox><checkbox disabled>Disabled</checkbox>",
"css": "column, gap:15px center:center"
}
]
},
{
"name": "choicebox",
"examples": [
{
"id": "choicebox",
"iframe_src": "{base.url}/examples/base",
"html": "<select id=\"quality\"><option value=\"potato\">Potato</option><option value=\"low\">Low</option><option selected value=\"high\">High</option><option value=\"extreme\">Extreme</option><option value=\"ultra\">Ultra</option></select>",
"css": "column, al:center"
}
]
},
{
"name": "listbox",
"examples": [
{
"id": "listbox",
"iframe_src": "{base.url}/examples/base",
"html": "<listbox id=\"difficulty\"><option value=\"easy\">Easy</option><option selected value=\"normal\">Normal</option><option value=\"hard\">Hard</option></listbox>",
"css": "column, al:center"
},
{
"id": "listbox-multi",
"iframe_src": "{base.url}/examples/base",
"html": "<listbox id=\"music-tags\" multiselect><option value=\"rock\" selected>Rock</option><option value=\"jazz\" selected>Jazz</option><option value=\"pop\">Pop</option><option value=\"electro\">Electro</option><option value=\"blues\">Blues</option></listbox>",
"css": "column, al:center",
}
]
},
{
"name": "colorpicker",
"examples": [
{
"id": "colorpicker",
"iframe_src": "{base.url}/examples/base",
"html": "<colorpicker value=\"#4285f4\" alpha=\"255\"></colorpicker>",
"css": "column, al:center"
}
]
},
{
"name": "datepicker",
"examples": [
{
"id": "datepicker",
"iframe_src": "{base.url}/examples/base",
"html": "<input id=\"birthday\" type=\"date\" /><date-picker for=\"birthday\" min=\"1990-01-01\" max=\"2030-12-31\" format=\"dmy\"></date-picker>",
"css": "column, al:center"
},
{
"id": "datepicker-range",
"iframe_src": "{base.url}/examples/base",
"html": "<input id=\"birthday\" type=\"range\" /><date-picker for=\"birthday\" min=\"1990-01-01\" max=\"2030-12-31\" format=\"dmy\"></date-picker>",
"css": "column, al:center"
}
]
},
{
"name": "divider",
"examples": [
{
"id": "divider",
"iframe_src": "{base.url}/examples/base",
"html": "<divider alignment=\"horizontal\" oninit=\"log_divider\"></divider><divider alignment=\"vertical\" oninit=\"log_divider\"></divider>",
"css": "column, al:center"
}
]
},
{
"name": "fieldset",
"examples": [
{
"id": "fieldset-single",
"iframe_src": "{base.url}/examples/base",
"html": "<fieldset mode=\"single\" allow-none=\"false\" onchange=\"log_fieldset\"><radio value=\"easy\">Easy</radio><radio value=\"hard\" selected>Hard</radio></fieldset>",
"css": "column, al:center"
},
{
"id": "fieldset-multiple",
"iframe_src": "{base.url}/examples/base",
"html": "<fieldset mode=\"multi\" allow-none=\"true\"><toggle value=\"easy\">Easy</toggle><toggle value=\"medium\">Medium</toggle><toggle value=\"hard\" selected>Hard</toggle></fieldset>",
"css": "column, al:center"
},
{
"id": "fieldset-count",
"iframe_src": "{base.url}/examples/base",
"html": "<fieldset mode=\"count(2)\" allow-none=\"false\"><toggle value=\"very-easy\">Very Easy</toggle><toggle value=\"easy\">Easy</toggle><toggle value=\"medium\">Medium</toggle><toggle value=\"hard\" selected>Hard</toggle><toggle value=\"very-hard\">Very Hard</toggle></fieldset>",
"css": "column, al:center"
}
]
},
{
"name": "form",
"examples": [
{
"id": "form",
"iframe_src": "{base.url}/examples/base",
"html": "<form action=\"log_form\" validate=\"Send\"><input name=\"email\" type=\"email\" required /><button type=\"submit\">Send</button></form>",
"css": "column, center:center"
}
]
},
{
"name": "headline",
"examples": [
{
"id": "headline",
"iframe_src": "{base.url}/examples/base",
"html": "<h1>Ueberschrift</h1><h2>Ueberschrift</h2><h3>Ueberschrift</h3><h4>Ueberschrift</h4><h5>Ueberschrift</h5><h6>Ueberschrift</h6>",
"css": "column, center:center, gap:5px"
}
]
},
{
"name": "img",
"examples": [
{
"id": "img",
"iframe_src": "{base.url}/examples/base",
"html": "<img src=\"{example_image}\" alt=\"Displayed image\" />",
"css": "row, center:center"
}
]
},
{
"name": "inputfield",
"examples": [
{
"id": "inputfield",
"iframe_src": "{base.url}/examples/base",
"html": "<label for=\"username\">Text</label><input id=\"username\" name=\"username\" type=\"text\" maxlength=\"32\" placeholder=\"A Placeholder\" /><label for=\"password\">Password</label><input id=\"password\" name=\"password\" type=\"password\" maxlength=\"16\" /><label for=\"email\">Email</label><input id=\"email\" name=\"email\" type=\"email\" /><label for=\"number\">Number</label><input id=\"number\" name=\"number\" type=\"number\" maxlength=\"16\" />",
"css": "column, center:center, gap:10px"
},
{
"id": "inputfield-file",
"iframe_src": "{base.url}/examples/base",
"html": "<label for=\"file\">File</label><input id=\"file\" name=\"file\" type=\"file\" /><label for=\"file-size\">File With Size</label><input id=\"file-size\" name=\"file-size\" type=\"file\" max-size=\"2MB\" extensions=\"[jpg, jpeg, png]\" show-size=\"true\" />",
"css": "column, center:center, gap:10px"
}
]
},
{
"name": "paragraph",
"examples": [
{
"id": "paragraph",
"iframe_src": "{base.url}/examples/base",
"html": "<p>Welcome {{player.name}}</p>",
"css": "center:center"
}
]
},
{
"name": "progressbar",
"examples": [
{
"id": "progressbar",
"iframe_src": "{base.url}/examples/base",
"html": "<progressbar id=\"xp\" min=\"0\" max=\"100\" value=\"42\"></progressbar>",
"css": "center:center"
}
]
},
{
"name": "radiobutton",
"examples": [
{
"id": "radiobutton",
"iframe_src": "{base.url}/examples/base",
"html": "<fieldset mode=\"single\" allow-none=\"false\"><radio value=\"black\">Black</radio><radio value=\"green\">Green</radio><radio value=\"white\">White</radio></fieldset>",
"css": "column, al:center, gap:10px"
}
]
},
{
"name": "scrollbar",
"examples": [
{
"id": "scrollbar-vertical",
"iframe_src": "{base.url}/examples/base",
"html": "<div style=\"width: 200px; height: 200px; overflow-y: scroll; display: flex; flex-direction: column; gap: 10px;\"><p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p><p>Line 7</p><p>Line 8</p><p>Line 9</p><p>Line 10</p></div>",
"css": "column, center:center"
},
{
"id": "scrollbar-horizontal",
"iframe_src": "{base.url}/examples/base",
"html": "<div style=\"width: 200px; height: 100px; overflow-y: scroll; display: flex; flex-direction: row; gap: 10px;\"><p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p><p>Line 7</p><p>Line 8</p></div>",
"css": "column, center:center"
}
]
},
{
"name": "slider",
"examples": [
{
"id": "slider",
"iframe_src": "{base.url}/examples/base",
"html": "<slider min=\"0\" max=\"100\" value=\"25\" step=\"1\"></slider><slider value=\"0\" min=\"0\" max=\"100\" step=\"1\" dots=\"4\" show-labels=\"true\" tip=\"false\"></slider>",
"css": "column, center:center, gap:10px"
},
{
"id": "slider-range",
"iframe_src": "{base.url}/examples/base",
"html": "<slider id=\"range-slider-demo\" type=\"range\" value=\"20 - 40\" dots=\"4\" show-labels=\"true\" dot-anchor=\"bottom\"></slider>",
"css": "column, center:center, gap:10px"
}
]
},
{
"name": "switchbutton",
"examples": [
{
"id": "switchbutton",
"iframe_src": "{base.url}/examples/base",
"html": "<switch>Switch</switch><switch disabled>Switch Disabled</switch><switch icon=\"{custom.png}\" checked>Switch Icon</switch>",
"css": "column, center:center, gap:10px"
}
]
},
{
"name": "togglebutton",
"examples": [
{
"id": "togglebutton",
"iframe_src": "{base.url}/examples/base",
"html": "<fieldset mode=\"multi\" allow-none=\"true\" class=\"con-column\"><toggle value=\"black\">Black</toggle><toggle value=\"green\">Green</toggle><toggle value=\"white\">White</toggle></fieldset>",
"css": "column, al:center, gap:10px"
}
]
},
{
"name": "tooltip",
"examples": [
{
"id": "tooltip-hover",
"iframe_src": "{base.url}/examples/base",
"html": "<button id=\"help\">Hover Me</button><tool-tip for=\"help\" variant=\"point\" prio=\"right\" alignment=\"horizontal\" trigger=\"hover\">More information</tool-tip>",
"css": "column, center:center"
},
{
"id": "tooltip-click",
"iframe_src": "{base.url}/examples/base",
"html": "<button id=\"help\">Click Me</button><tool-tip for=\"help\" variant=\"point\" prio=\"top\" alignment=\"vertical\" trigger=\"click\">More information</tool-tip>",
"css": "column, center:center"
}
]
},
{
"name": "badge",
"examples": [
{
"id": "badge",
"iframe_src": "{base.url}/examples/base",
"html": "<button id=\"inbox-button\">Inbox</button><badge for=\"inbox-button\" value=\"70\" max=\"99\" anchor=\"top right\"></badge>",
"css": "column, center:center"
}
]
},
{
"name": "hyperlink",
"examples": [
{
"id": "hyperlink",
"iframe_src": "{base.url}/examples/base",
"html": "<a href=\"https://bevy.org\">To Bevy Website</a>",
"css": "column, center:center"
}
]
}
]
}