Published
Edited
Jun 15, 2022
Importers
2 stars
Insert cell
Insert cell
toc({
headers: "h2,h3,h4",
title: ""
})
Insert cell
Insert cell
<div class="demo-panel">
<span uk-icon="icon: check"></span>
<span uk-icon="icon: heart"></span>
</div>
Insert cell
## Accordion
Insert cell
<div class="demo-panel">
<ul uk-accordion="multiple: false">
<li>
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 3</a>
<div class="uk-accordion-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
</div>
</li>
</ul>
</div>
Insert cell
// UIkit.accordion(accordionHTML).toggle(3, true)
Insert cell
Insert cell
<div class="demo-panel" style="width: 35em;">
<div class="uk-card uk-card-default uk-width-1-2@m">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<span class="uk-border-circle" style="display: inline-block; width: 40px; height: 40px; background-color: #eee;">
</div>
<div class="uk-width-expand">
<h5 class="uk-card-title uk-margin-remove-bottom">Title</h5>
<p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
</div>
</div>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-footer">
<a href="#" class="uk-button uk-button-text">Read more</a>
</div>
</div>
</div>
Insert cell
Insert cell
<div class="demo-panel" id="modal-example-container" style="height: 25em;">
<!-- This is a button toggling the modal -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-example">Open</button>

<!-- This is an anchor toggling the modal -->
<a href="#modal-example" uk-toggle>Open</a>

<!-- This is the modal -->
<div id="modal-example" uk-modal="container: false;">
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Headline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="button">Save</button>
</p>
</div>
</div>
</div>
Insert cell
## Form
Insert cell
<div class="demo-panel">
<form>
<fieldset class="uk-fieldset">

<legend class="uk-legend">Legend</legend>

<div class="uk-margin">
<input class="uk-input" type="text" placeholder="Input">
</div>

<div class="uk-margin">
<select class="uk-select">
<option>Option 01</option>
<option>Option 02</option>
</select>
</div>

<div class="uk-margin">
<textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea>
</div>

<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
<label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
<label><input class="uk-radio" type="radio" name="radio2"> B</label>
</div>

<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
<label><input class="uk-checkbox" type="checkbox" checked> A</label>
<label><input class="uk-checkbox" type="checkbox"> B</label>
</div>

<div class="uk-margin">
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
</div>

</fieldset>
</form>
</div>
Insert cell
## Drop (Tooltip)

* https://getuikit.com/docs/drop

Insert cell
<div class="demo-panel" style="height: 15em;">
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-drop>
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
</div>

<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Click</button>
<div uk-drop="mode: click">
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
</div>
</div>
Insert cell
// UIkit.drop(dropHTML)
Insert cell
Insert cell
<div class="demo-panel">
<nav class="uk-navbar-container" uk-navbar>

<div class="uk-navbar-left">

<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>

</div>

<div class="uk-navbar-right">

<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>

</div>

</nav>
<hr />

<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-left">

<a class="uk-navbar-item uk-logo" href="#">Logo</a>

<ul class="uk-navbar-nav">
<li>
<a href="#">
<span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
Features
</a>
</li>
</ul>

<div class="uk-navbar-item">
<div>Some <a href="#">Link</a></div>
</div>

<div class="uk-navbar-item">
<form action="javascript:void(0)">
<input class="uk-input uk-form-width-small" type="text" placeholder="Input">
<button class="uk-button uk-button-default">Button</button>
</form>
</div>

</div>
</nav>
</div>
Insert cell
## Offcanvas (Drawer)

https://getuikit.com/docs/offcanvas

Insert cell
<div id="offcanvas-overlay-container" class="demo-panel" style="height: 25em;">
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-overlay">Open</button>
<div id="offcanvas-overlay" uk-offcanvas="flip: true; mode: slide; overlay: true; container: false;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<h5>Title 123</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
Insert cell
## Tabs

Insert cell
<div class="demo-panel">
<ul uk-tab>
<li class="uk-active"><a href="#">Left</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-disabled"><a>Disabled</a></li>
</ul>
</div>
Insert cell
<div class="demo-panel" style="height: 20em;">
<ul uk-tab>
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li>
<a href="#">More <span uk-icon="icon: triangle-down"></span></a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
Insert cell
Insert cell
Insert cell
<div class="demo-panel" style="height: 5em;">
<progress id="js-progressbar" class="uk-progress" value="10" max="100"></progress>
</div>

Insert cell
{
await restartProgress;
await new Promise((ready) => UIkit.util.ready(ready));
const bar = progressBarHTML.querySelector("progress");
// const bar = viewof x;
bar.value = 0;
let stop = false;
invalidation.then(() => (stop = true));
while (!stop && bar.value < bar.max) {
await Promises.delay(1000);
bar.value += 10;
}
}
Insert cell
Insert cell
Insert cell
Inputs.button("ABC")
Insert cell
ui.radio(["First", "Second"], { label: "Radio Buttons:", value: "First" })
Insert cell
ui.checkbox(["First", "Second"], { label: "Checkboxes:", value: ["Second"] })
Insert cell
ui.range([1, 100], {
value: 2,
step: 1,
label: "Values Range:",
numbersWidth: 0
})
Insert cell
ui.text({ value: "", label: "Text Input:" })
Insert cell
ui.date({ value: new Date(), label: "Date Picker:" })
Insert cell
ui.textarea({
value: "",
placeholder: "Write something here...",
label: "Text Area:",
rows: 10
// inline: false
})
Insert cell
ui.select(["a", "b", "c"], { label: "Select:", multiple: true })
Insert cell
ui.toggle({ label: "Toggle" })
Insert cell
viewof f = ui.file({
label: htl.html`<span uk-icon="icon: check"></span> Select Files...`,
accept: ".json",
inline: true
})
Insert cell
f && f.json()
Insert cell
data = [
{ firstName: "John", lastName: "Smith", age: 42 },
{ firstName: "James", lastName: "Bond", age: 50 }
]
Insert cell
ui.search(data)
Insert cell
ui.table([
{ title: "Hello", content: "World" },
{ title: "Abc", content: "CDE " }
])
Insert cell
Inputs.button("Hello", { label: "Totots" })
Insert cell
Inputs.toggle({ value: false, label: "Toggle label" })
Insert cell
ui.toggle({ value: false, label: "Toggle label" })
Insert cell
ui.table(data, { multiple: false })
Insert cell
async function newUI(options = {}) {
let { classes = "" } = options;
classes = classes.split(/\s+/).filter((_) => !!_);

await UIkit;
/*
[x] Button - do something when a button is clicked
[x] Checkbox - choose any from a set
[x] Toggle - toggle between two values (on or off)
[x] Radio - choose one from a set
[x] Range - choose a numeric value in a range (slider)
[x] Select - choose one or many from a set (drop-down menu)
[x] Text - freeform single-line text input
[x] Textarea - freeform multi-line text input
[x] Date - date input
[x] File - local file input
[x] Search - query a tabular dataset
[?] Table - browse a tabular dataset

[x] Form - combine multiple inputs
[x] Input - a programmatic interface for storing input state
[x] bind - synchronize two or more inputs
[x] disposal - detect when an input is discarded
*/

function _cleanup(elm) {
[elm, ...elm.querySelectorAll("[class^='oi-']")].forEach((e) =>
e.setAttribute("class", "")
);
elm.classList.add(...classes);
return elm;
}

function _isInline(options) {
return options.inline !== false;
}

function _cls(elm, selector, ...classes) {
classes = classes.filter((_) => !!_);
[...(elm.querySelectorAll(selector) || [])].forEach((e) =>
e.classList.add(...classes)
);
return elm;
}

function _spaces(elm, selector) {
_cls(elm, selector, "uk-flex-inline");
elm.querySelector(selector).style.gap = "1em";
return elm;
}

function _label(elm, options) {
// _cls(elm, "label:first-child", "uk-margin-right");
elm.classList.add("uk-flex");
if (_isInline(options)) {
elm.style.alignItems = "center";
elm.style.gap = "0.5em";
} else {
elm.style.alignContent = "stretch";
elm.style.flexDirection = "column";
}
return elm;
}

function button(options) {
const elm = _cleanup(Inputs.button(options));
_label(elm, options);
elm.querySelector("button").classList.add("uk-button", "uk-button-default");
return elm;
}

function toggle(options = {}) {
const elm = _cleanup(Inputs.toggle(options));
_label(elm, options);
_cls(
elm,
"input[type=checkbox]",
"uk-margin-small-right",
"uk-checkbox",
_isInline(options) ? "" : "uk-display-block"
);
return elm;
}

function radio(values, options = {}) {
const elm = _cleanup(Inputs.radio(values, options));
_label(elm, options);
_cls(elm, "label > input", "uk-margin-small-right", "uk-radio");
_spaces(elm, "div:last-child");
return elm;
}

function checkbox(values, options = {}) {
const elm = _cleanup(Inputs.checkbox(values, options));
_label(elm, options);
_cls(elm, "label > input", "uk-margin-small-right", "uk-checkbox");
_spaces(elm, "div:last-child");
return elm;
}

function select(values, options = {}) {
const elm = _cleanup(Inputs.select(values, options));
_label(elm, options);
_cls(elm, "select", "uk-select");
return elm;
}

function range(range, options = {}) {
const elm = _cleanup(Inputs.range(range, options));
_label(elm, options);

_cls(elm, "div:last-child", "uk-flex");
_cls(elm, "div:last-child > *", "uk-margin-small-right");
_cls(elm, "input[type=range]", "uk-range");

let len = options.numbersWidth || 0;

const num = elm.querySelector("input[type=number]");
if (!len) {
num.parentElement.removeChild(num);
} else {
_cls(elm, "input[type=number]", "uk-input", "uk-form-small");
num.style.width = `${len}em`;
}
return elm;
}

function text(options = {}) {
const elm = _cleanup(Inputs.text(options));
_label(elm, options);
_cls(
elm,
"div > input",
"uk-input",
"uk-form-small",
"uk-form-width-small"
);
return elm;
}

function textarea(options = {}) {
const elm = _cleanup(Inputs.textarea(options));
_label(elm, options);
_cls(
elm,
"div > textarea",
"uk-textarea",
"uk-width-1-1"
// "uk-form-small",
// "uk-form-width-small"
);
_cls(elm, "div:last-child", "uk-width-1-1");
// _isInline(options) && (elm.style.alignItems = "flex-start");
return elm;
}

function date(options = {}) {
const elm = _cleanup(Inputs.date(options));
_label(elm, options);
_cls(elm, "div > input", "uk-input", "uk-form-small");
return elm;
}

function file(options = {}) {
const elm = _cleanup(Inputs.file(options));
_label(elm, options);
elm.querySelector("label").classList.add("uk-button", "uk-button-default");
elm.querySelector("div:last-child").style.display = "none";
return elm;
}

function search(options = {}) {
const elm = _cleanup(Inputs.search(options));
_label(elm, options);
_cls(
elm,
"div > input",
"uk-input",
"uk-form-small",
"uk-form-width-small"
);
return elm;
}

function table(...args) {
let { id } = DOM.uid();
id = `table-${id}`;
const form = Inputs.table(...args);
const table = form.querySelector("table");
table.setAttribute("id", id);
const style = htl.html`<style>
#${id} tr>:first-of-type {
padding-left: 1em;
}
</style>
`;
form.appendChild(style);
return form;
// const elm = _cleanup(Inputs.table(...args));
// _cls(
// elm,
// "table",
// "uk-table",
// "uk-table-hover",
// "uk-table-divider",
// "uk-text-center"
// );
// _cls(elm, "input[type=checkbox]", "uk-margin-small-right", "uk-checkbox");
// _cls(elm, "input[type=radio]", "uk-margin-small-right", "uk-radio");
// return elm;
}

function download({ value, name = "untitled", label }) {
const elm = _cleanup(DOM.download(value, name, label));
elm.querySelector("button").classList.add("uk-button", "uk-button-default");
return elm;
}

return {
button,
radio,
range,
checkbox,
select,
text,
textarea,
toggle,
date,
file,
search,
table,

form: Inputs.form,
input: Inputs.input,
bind: Inputs.bind,
disposal: Inputs.disposal,

download
};
}
Insert cell
ui = newUI({ classes: "toto" })
Insert cell
## Imports and Initialization
Insert cell
UIkit = {
await appendCssLink(
"https://cdn.jsdelivr.net/npm/uikit@3.12.2/dist/css/uikit.min.css"
);
const uiKit = await require("uikit@3.12.2/dist/js/uikit.min.js");
const uiKitIcons = await require("uikit@3.12.2/dist/js/uikit-icons.min.js");
uiKit.use(uiKitIcons);
return uiKit;
}
Insert cell
Insert cell
{
invalidation.then(
appendCss(
`.foobar { background: #eee; color: black; font-weight: bold; padding: 0.5em; }`
)
);
}
Insert cell
function appendCss(css) {
const style = document.createElement("style");
style.innerHTML = css;
document.body.appendChild(style);
return () => style.parentElement && style.parentElement.removeChild(style);
}
Insert cell
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.12.2/dist/css/uikit.min.css" />
-->
Insert cell
<style>
.demo-panel {
padding: 2em;
height-min: 25em;
position: relative;
}
[uk-offcanvas],
[uk-modal] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
Insert cell
import { toc } from "@nebrius/indented-toc"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more