<ui-outlet>ui-outlet.mjs · ui-tab.mjs · ui-code.mjs · view.mjs · UiElement.mjs
| Element | Attributes | Properties | Methods | Events |
|---|---|---|---|---|
<ui-outlet> |
active, load-feedback-delay |
.active, .current_view |
show(content, attrs?, name?) → Promise<bool>, show_from_element(el) |
view-changed, view-stop-request |
<ui-tab> |
outlet, value, disabled |
— | — | — |
<ui-code> |
src, for, lang |
— | — | — |
View protocol: .readyP (Promise) · .ready (boolean) · .stop() (async) · view-stop-request (cancelable)
show() accepts an already-created element. Properties set
on the instance (non-string data, callbacks, objects) survive the switch —
unlike attributes, which can only carry strings and booleans.
show() also accepts a function that returns an element
(or a Promise of an element). This is the idiomatic form for a view that
needs data before it can render: fetch the data first, build the
element with the data in place, return — no intermediate phase where the element
exists without its data.
show(tag, attrs) creates the element for you and applies
any attributes. Simplest form when the view doesn't need rich data up
front — the element fetches its own data in connectedCallback.
Arrow keys switch view immediately. Recommended when view content appears without delay.
Arrow keys move focus. Enter/space switches view. Recommended for network loading or heavy rendering.
The view rejects view-stop-request via preventDefault(). Tick the box to allow switching.
A view loading through an async factory or promise (section 2), or a view with a
.readyP promise, gets automatic loading feedback via
aria-busy. One busy period covers both waits. The feedback is debounced: the attribute is set only if
loading takes longer than load-feedback-delay (in ms, default
200). Fast loads (under the delay) never flash.
The CSS transition makes fade-in/fade-out visible once the feedback is shown.
slow-view resolves after 800ms. Change
load-feedback-delay to see the difference.
View with a stop() method that logs cleanup. Verifies that it runs before removal.
Runs show('a'), show('b'), show('a') in rapid succession. Only the last should win.
<ui-outlet active="test-view-a"> shows automatically on connect.
Leave the outlet empty in markup. It creates the view named by active and removes that view when replacing it. It does not remove unrelated children, so a panel placed inside it manually would remain visible beneath later views.
Removing active, or setting outlet.active = null, empties the outlet. Setting it again loads the named view. An outlet with no active attribute at connection starts empty.
show_from_element)Values for show_from_element can be overridden to control what is
rendered per tab — e.g. to deliver pre-initialized data. The value passed to
show() as the
third argument becomes the view's name and is reflected on
ui-outlet[active].