tern_sdk::ui::html

Struct El

pub struct El<M = ()>(/* private fields */);

Expand description

el: one HTML element of an allowed tag, its text, then its children.

Implementations§

Source §

impl<M> El<M>

Source

pub fn key(self, key: impl Into<NodeKey>) -> Self

Identity among siblings: keeps the node’s id (and Tern’s view state) across reorders. A string, or an integer.

Examples found in repository ?

examples/ask.rs (line 21)

19fn choice(value: &str, label: &str) -> El<()> {
20	html::label()
21		.key(value)
22		.child(html::radio("size", value).key("r"))
23		.child(html::span(label).key("t"))
24}
25
26/// The form: a card of radios and a primary Create button, styled by the
27/// kinds alone.
28fn view() -> View<()> {
29	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
30	View::new().main([html::form().key("ask").child(
31		ui::card()
32			.key("card")
33			.head("Which size?")
34			.max(Bound::w(Extent::Ch(48.0)))
35			.child(ui::row().key("sizes").gap("lg").children(sizes))
36			.child(
37				ui::button("Create")
38					.key("go")
39					.variant("primary")
40					.actions(Actions::new().click("submit")),
41			),
42	)])
43}

Source

pub fn role(self, role: impl Into<String>) -> Self

A name of yours, exposed to CSS as data-role.

Source

pub fn tone(self, tone: impl Into<Tone>) -> Self

The semantic color of the node’s chrome.

Source

pub fn hidden(self, hidden: bool) -> Self

Keeps the node mounted but not laid out.

Source

pub fn mark(self, mark: impl Into) -> Self

A transient selection mark drawn over the node.

Source

pub fn aria(self, aria: impl Into<String>) -> Self

The accessible name of a node that shows no text.

Source

pub fn hovercard<N>(self, card: impl Into<Node<N>>) -> Self

A floating card of card’s tree shown while the pointer rests on the node, in place of title. Sent id-less (ids, keys and handlers inside are ignored); an older Tern ignores it.

Source

pub fn href(self, href: impl Into<String>) -> Self

A link: ⌘-click opens it; copy and open use it.

Source

pub fn grow(self, grow: f64) -> Self

Flex grow inside a row or col.

Source

pub fn shrink(self, shrink: f64) -> Self

Flex shrink inside a row or col.

Source

pub fn basis(self, basis: impl Into<Basis>) -> Self

Flex basis: a fraction of the parent, or the content’s size.

Source

pub fn prop(self, name: &str, value: impl Serialize) -> Self

Sets any prop untyped; null removes it.

Source

pub fn min(self, min: Bound) -> Self

Lower size bounds.

Source

pub fn title(self, title: impl Into<String>) -> Self

A tooltip.

Source

pub fn max(self, max: Bound) -> Self

Upper size bounds (a max.h also clips the node).

Source

pub fn actions(self, actions: Actions) -> Self

What a pointer does, by action name.

Source

pub fn on_click(self, msg: M) -> Self
where M: Clone + Send + Sync + 'static,

Sends msg on a click (sets actions.click to "click" unless the node names its click action itself).

Source

pub fn on_dblclick(self, msg: M) -> Self
where M: Clone + Send + Sync + 'static,

Sends msg on a double click (sets actions.dblclick to "dblclick" unless the node names it).

Source

pub fn on_menu(self, act: impl Into<String>, msg: M) -> Self
where M: Clone + Send + Sync + 'static,

Adds act to the context menu and sends msg when it is picked.

Source

pub fn on_action(self, act: impl Into<String>, msg: M) -> Self
where M: Clone + Send + Sync + 'static,

Sends msg on action events whose action is act (name or name=value).

Source

pub fn on_action_with( self, act: impl Into<String>, f: impl Fn(&Action) -> M + Send + Sync + 'static, ) -> Self

Maps action events whose action is act to a message.

Source

pub fn on_toggle(self, f: impl Fn(bool) -> M + Send + Sync + 'static) -> Self

Maps toggle events (the new collapsed; a menu, select or trace line that opened is not collapsed) to a message.

Source

pub fn on_select(self, f: impl Fn(&str) -> M + Send + Sync + 'static) -> Self

Maps select events (the item) to a message. On a list’s item the item’s own handler runs first.

Source

pub fn on_activate(self, f: impl Fn(&str) -> M + Send + Sync + 'static) -> Self

Maps activate events (the item) to a message.

Source

pub fn on_change(self, f: impl Fn(&Change) -> M + Send + Sync + 'static) -> Self

Maps change events to a message.

Source

pub fn on_focus(self, msg: M) -> Self
where M: Clone + Send + Sync + 'static,

Sends msg on focus events (a click asked for the keys).

Source

pub fn on_edit(self, f: impl Fn(&Edit) -> M + Send + Sync + 'static) -> Self

Maps edit events (native editing) to a message.

Source

pub fn on_undo(self, msg: M) -> Self
where M: Clone + Send + Sync + 'static,

Sends msg on undo events.

Source

pub fn on_send(self, f: impl Fn(&str) -> M + Send + Sync + 'static) -> Self

Maps send events (the text to submit) to a message.

Source

pub fn child(self, child: impl Into<Node<M>>) -> Self

Adds a child.

Examples found in repository ?

examples/ask.rs (line 22)

19fn choice(value: &str, label: &str) -> El<()> {
20	html::label()
21		.key(value)
22		.child(html::radio("size", value).key("r"))
23		.child(html::span(label).key("t"))
24}
25
26/// The form: a card of radios and a primary Create button, styled by the
27/// kinds alone.
28fn view() -> View<()> {
29	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
30	View::new().main([html::form().key("ask").child(
31		ui::card()
32			.key("card")
33			.head("Which size?")
34			.max(Bound::w(Extent::Ch(48.0)))
35			.child(ui::row().key("sizes").gap("lg").children(sizes))
36			.child(
37				ui::button("Create")
38					.key("go")
39					.variant("primary")
40					.actions(Actions::new().click("submit")),
41			),
42	)])
43}