Struct El 

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

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

Implementations

impl<M> El<M>

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 29)

fn choice(value: &str, label: &str) -> El<()> {
	html::label()
		.key(value)
		.child(html::radio("size", value).key("r"))
		.child(html::span(label).key("t"))
}

/// The form.
fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

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

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

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

The semantic color of the node’s chrome.

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

Keeps the node mounted but not laid out.

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

A transient selection mark drawn over the node.

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

The accessible name of a node that shows no text.

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

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

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

Flex grow inside a row or col.

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

Flex shrink inside a row or col.

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

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

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

Lower size bounds.

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

Sets any prop untyped; null removes it.

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

A tooltip.

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

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

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

What a pointer does, by action name.

Examples found in repository

examples/ask.rs (line 45)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

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).

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).

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.

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).

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.

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

Maps toggle events (the new collapsed) to a message.

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.

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

Maps activate events (the item) to a message.

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

Maps change events to a message.

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).

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

Maps edit events (native editing) to a message.

pub fn on_undo(self, msg: M) -> Self

where M: Clone + Send + Sync + 'static,

Sends msg on undo events.

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

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

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

Adds a child.

Examples found in repository

examples/ask.rs (line 30)

fn choice(value: &str, label: &str) -> El<()> {
	html::label()
		.key(value)
		.child(html::radio("size", value).key("r"))
		.child(html::span(label).key("t"))
}

/// The form.
fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

examples/table.rs (line 49)

fn view(entries: &[Entry]) -> View {
	let head = html::tr()
		.child(html::th("Name"))
		.child(html::th("Size").class("size"));
	let rows = entries.iter().map(|e| {
		let name = if e.dir {
			format!("{}/", e.name)
		} else {
			e.name.clone()
		};
		let size = if e.dir { "-".to_owned() } else { human(e.size) };
		html::tr()
			.child(html::td(name).class(if e.dir { "dir" } else { "file" }))
			.child(html::td(size).class("size"))
	});
	View::new().main([html::table()
		.class("ls")
		.child(html::thead().child(head))
		.child(html::tbody().children(rows))])
}

pub fn children<C: Into<Node<M>>>( self, children: impl IntoIterator<Item = C>, ) -> Self

Adds children.

Examples found in repository

examples/ask.rs (line 41)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

examples/table.rs (line 65)

fn view(entries: &[Entry]) -> View {
	let head = html::tr()
		.child(html::th("Name"))
		.child(html::th("Size").class("size"));
	let rows = entries.iter().map(|e| {
		let name = if e.dir {
			format!("{}/", e.name)
		} else {
			e.name.clone()
		};
		let size = if e.dir { "-".to_owned() } else { human(e.size) };
		html::tr()
			.child(html::td(name).class(if e.dir { "dir" } else { "file" }))
			.child(html::td(size).class("size"))
	});
	View::new().main([html::table()
		.class("ls")
		.child(html::thead().child(head))
		.child(html::tbody().children(rows))])
}

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

The element’s tag.

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

Space-separated class names for your stylesheets.

Examples found in repository

examples/ask.rs (line 39)

fn view() -> View<()> {
	let sizes = SIZES.iter().map(|(value, label)| choice(value, label));
	View::new().main([html::form()
		.key("ask")
		.class("ask")
		.child(html::p("Which size?").key("q"))
		.child(html::div().key("sizes").class("sizes").children(sizes))
		.child(
			html::button("Create")
				.key("go")
				.actions(Actions::new().click("submit")),
		)])
}

examples/table.rs (line 50)

fn view(entries: &[Entry]) -> View {
	let head = html::tr()
		.child(html::th("Name"))
		.child(html::th("Size").class("size"));
	let rows = entries.iter().map(|e| {
		let name = if e.dir {
			format!("{}/", e.name)
		} else {
			e.name.clone()
		};
		let size = if e.dir { "-".to_owned() } else { human(e.size) };
		html::tr()
			.child(html::td(name).class(if e.dir { "dir" } else { "file" }))
			.child(html::td(size).class("size"))
	});
	View::new().main([html::table()
		.class("ls")
		.child(html::thead().child(head))
		.child(html::tbody().children(rows))])
}

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

Plain text drawn before the children.

pub fn input_type(self, value: impl Into<InputType>) -> Self

input only: checkbox or radio.

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

input only: the name in its form’s values and its radio group.

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

input only: the value it reports (default "on").

pub fn checked(self, value: impl Into<bool>) -> Self

input only: the checked state you set.

pub fn disabled(self, value: impl Into<bool>) -> Self

input only: dimmed, never flips, left out of values.

pub fn attrs(self, attrs: Map<String, Value>) -> Self

Sets all extra attributes (data-*, aria-*, role, colspan, rowspan).

pub fn attr(self, name: impl Into<String>, value: impl Serialize) -> Self

Sets one extra attribute (a string, number or boolean).

Trait Implementations

impl<M> Clone for El<M>

fn clone(&self) -> Self

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<M> Debug for El<M>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<M> From<El<M>> for Node<M>

fn from(n: El<M>) -> Self

Converts to this type from the input type.

impl<M> From<El<M>> for View<M>

A bare node is main’s one child.

fn from(n: El<M>) -> Self

Converts to this type from the input type.