Struct Col 

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

col: a vertical stack.

Implementations

impl<M> Col<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/dashboard.rs (line 808)

	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

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

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.

Examples found in repository

examples/dashboard.rs (line 810)

	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

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.

Examples found in repository

examples/dashboard.rs (line 811)

	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

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

Sets any prop untyped; null removes it.

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

Lower size bounds.

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.

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; a menu, select or trace line that opened is not 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.

impl<M> Col<M>

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

Adds a child.

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

Adds children.

Examples found in repository

examples/chat.rs (line 77)

	fn view(&self) -> View<Msg> {
		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
			let node = ui::md(text.clone()).key(i);
			if *who == "you" {
				ui::card().key(i).tone("user").child(node.key("t"))
			} else {
				ui::card().key(i).variant("bare").child(node.key("t"))
			}
		});
		let cursor: usize = self
			.draft
			.chars()
			.take(self.cursor)
			.map(char::len_utf16)
			.sum();
		View::new().main(ui::col().children(messages)).dock(nodes![
			ui::editor()
				.key("ed")
				.text(self.draft.clone())
				.cursor(cursor)
				.placeholder("Message (Enter sends, Escape quits)")
				.sendable(true)
				.on_send(|text| Msg::Send(text.to_owned()))
				.on_focus(Msg::Focus),
			ui::status()
				.key("bar")
				.child(ui::seg("chat").icon("message"))
				.child(
					ui::seg(format!("{} messages", self.transcript.len()))
						.side(Side::Right)
						.tone(if self.transcript.is_empty() {
							Tone::Muted
						} else {
							Tone::Success
						}),
				),
		])
	}

examples/dashboard.rs (line 812)

	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

impl<M> Col<M>

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

Space between children.

Examples found in repository

examples/dashboard.rs (line 809)

	fn body(&self, plain: bool) -> Node<Msg> {
		let page = self.page;
		let selected = self.selected[page.index()];
		let (list, detail) = match page {
			Page::Services => (
				nodes![self.services_table()],
				selected
					.and_then(|id| self.services.iter().find(|s| s.id == id))
					.map(service_card),
			),
			Page::Deploys => (
				nodes![self.deploys_bar(), self.deploys_table()],
				selected
					.and_then(|id| self.deploys.iter().find(|d| d.id == id))
					.map(deploy_card),
			),
			Page::Incidents => (
				nodes![self.incidents_table()],
				selected
					.and_then(|id| self.incidents.iter().find(|i| i.id == id))
					.map(incident_card),
			),
		};
		let mut parts: Vec<Node<Msg>> = nodes![
			ui::col()
				.key("list")
				.gap("sm")
				.grow(1.0)
				.basis(0.0)
				.children(list)
		];
		if let Some(card) = detail {
			parts.push(
				card
					.key("detail")
					.min(Bound::w(Extent::Ch(44.0)))
					.max(Bound::w(Extent::Ch(56.0)))
					.into(),
			);
		}
		if plain {
			ui::col().key(page.id()).gap("md").children(parts).into()
		} else {
			ui::row()
				.key(page.id())
				.align("stretch")
				.gap("lg")
				.children(parts)
				.into()
		}
	}

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

Cross-axis alignment.

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

Main-axis distribution.

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

Adds class wrap.

Trait Implementations

impl<M> Clone for Col<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 Col<M>

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

Formats the value using the given formatter.

impl<M> From<Col<M>> for Slot<M>

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

Converts to this type from the input type.

impl<M> From<Col<M>> for Node<M>

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

Converts to this type from the input type.

impl<M> From<Col<M>> for View<M>

A bare node is main’s one child.

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

Converts to this type from the input type.

impl<M> From<Node<M>> for Col<M>

fn from(node: Node<M>) -> Self

Converts to this type from the input type.