Skip to main content

Card

tern_sdk::ui

Struct Card 

Source 
pub struct Card<M = ()>(/* private fields */);
Expand description

card: a rounded card with a head and a body, optionally folding.

Implementations§

Source§

impl<M> Card<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/progress.rs (line 66)
40fn view(build: &Build) -> View {
41	let fraction = build.done as f64 / STEPS.len() as f64;
42	let running = build.took.is_none();
43	let activity: ui::Node = if running {
44		ui::spinner()
45			.style("dots")
46			.label(STEPS[build.done.min(STEPS.len() - 1)])
47			.into()
48	} else {
49		ui::icon(if build.status == Status::Done {
50			"check"
51		} else {
52			"x"
53		})
54		.tone(if build.status == Status::Done {
55			"success"
56		} else {
57			"error"
58		})
59		.into()
60	};
61	let mut timer = ui::elapsed().age(0);
62	if let Some(took) = build.took {
63		timer = timer.stopped(took);
64	}
65	View::new().main([ui::card()
66		.key("build")
67		.head("Building demo")
68		.status(build.status.clone())
69		.child(
70			ui::row()
71				.key("head")
72				.gap("sm")
73				.children(nodes![activity.key("a"), timer.key("t")]),
74		)
75		.child(
76			ui::ansi(&build.log)
77				.key("log")
78				.follow(true)
79				.max(Bound::h(Extent::Lines(8.0))),
80		)
81		.child(ui::progress().key("bar").value(fraction).label(format!(
82			"{}/{}",
83			build.done,
84			STEPS.len()
85		)))])
86}
More examples
Hide additional examples
examples/chat.rs (line 65)
61	fn view(&self) -> View<Msg> {
62		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
63			let node = ui::md(text.clone()).key(i);
64			if *who == "you" {
65				ui::card().key(i).tone("user").child(node.key("t"))
66			} else {
67				ui::card().key(i).variant("bare").child(node.key("t"))
68			}
69		});
70		let cursor: usize = self
71			.draft
72			.chars()
73			.take(self.cursor)
74			.map(char::len_utf16)
75			.sum();
76		View::new().main(ui::col().children(messages)).dock(nodes![
77			ui::editor()
78				.key("ed")
79				.text(self.draft.clone())
80				.cursor(cursor)
81				.placeholder("Message (Enter sends, Escape quits)")
82				.sendable(true)
83				.on_send(|text| Msg::Send(text.to_owned()))
84				.on_focus(Msg::Focus),
85			ui::status()
86				.key("bar")
87				.child(ui::seg("chat").icon("message"))
88				.child(
89					ui::seg(format!("{} messages", self.transcript.len()))
90						.side(Side::Right)
91						.tone(if self.transcript.is_empty() {
92							Tone::Muted
93						} else {
94							Tone::Success
95						}),
96				),
97		])
98	}
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.

Examples found in repository?
examples/chat.rs (line 65)
61	fn view(&self) -> View<Msg> {
62		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
63			let node = ui::md(text.clone()).key(i);
64			if *who == "you" {
65				ui::card().key(i).tone("user").child(node.key("t"))
66			} else {
67				ui::card().key(i).variant("bare").child(node.key("t"))
68			}
69		});
70		let cursor: usize = self
71			.draft
72			.chars()
73			.take(self.cursor)
74			.map(char::len_utf16)
75			.sum();
76		View::new().main(ui::col().children(messages)).dock(nodes![
77			ui::editor()
78				.key("ed")
79				.text(self.draft.clone())
80				.cursor(cursor)
81				.placeholder("Message (Enter sends, Escape quits)")
82				.sendable(true)
83				.on_send(|text| Msg::Send(text.to_owned()))
84				.on_focus(Msg::Focus),
85			ui::status()
86				.key("bar")
87				.child(ui::seg("chat").icon("message"))
88				.child(
89					ui::seg(format!("{} messages", self.transcript.len()))
90						.side(Side::Right)
91						.tone(if self.transcript.is_empty() {
92							Tone::Muted
93						} else {
94							Tone::Success
95						}),
96				),
97		])
98	}
Source

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

Keeps the node mounted but not laid out.

Source

pub fn mark(self, mark: impl Into<Mark>) -> 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 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 min(self, min: Bound) -> Self

Lower size bounds.

Source

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

Sets any prop untyped; null removes it.

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

impl<M> Card<M>

Source

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

Adds a child.

Examples found in repository?
examples/progress.rs (lines 69-74)
40fn view(build: &Build) -> View {
41	let fraction = build.done as f64 / STEPS.len() as f64;
42	let running = build.took.is_none();
43	let activity: ui::Node = if running {
44		ui::spinner()
45			.style("dots")
46			.label(STEPS[build.done.min(STEPS.len() - 1)])
47			.into()
48	} else {
49		ui::icon(if build.status == Status::Done {
50			"check"
51		} else {
52			"x"
53		})
54		.tone(if build.status == Status::Done {
55			"success"
56		} else {
57			"error"
58		})
59		.into()
60	};
61	let mut timer = ui::elapsed().age(0);
62	if let Some(took) = build.took {
63		timer = timer.stopped(took);
64	}
65	View::new().main([ui::card()
66		.key("build")
67		.head("Building demo")
68		.status(build.status.clone())
69		.child(
70			ui::row()
71				.key("head")
72				.gap("sm")
73				.children(nodes![activity.key("a"), timer.key("t")]),
74		)
75		.child(
76			ui::ansi(&build.log)
77				.key("log")
78				.follow(true)
79				.max(Bound::h(Extent::Lines(8.0))),
80		)
81		.child(ui::progress().key("bar").value(fraction).label(format!(
82			"{}/{}",
83			build.done,
84			STEPS.len()
85		)))])
86}
More examples
Hide additional examples
examples/chat.rs (line 65)
61	fn view(&self) -> View<Msg> {
62		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
63			let node = ui::md(text.clone()).key(i);
64			if *who == "you" {
65				ui::card().key(i).tone("user").child(node.key("t"))
66			} else {
67				ui::card().key(i).variant("bare").child(node.key("t"))
68			}
69		});
70		let cursor: usize = self
71			.draft
72			.chars()
73			.take(self.cursor)
74			.map(char::len_utf16)
75			.sum();
76		View::new().main(ui::col().children(messages)).dock(nodes![
77			ui::editor()
78				.key("ed")
79				.text(self.draft.clone())
80				.cursor(cursor)
81				.placeholder("Message (Enter sends, Escape quits)")
82				.sendable(true)
83				.on_send(|text| Msg::Send(text.to_owned()))
84				.on_focus(Msg::Focus),
85			ui::status()
86				.key("bar")
87				.child(ui::seg("chat").icon("message"))
88				.child(
89					ui::seg(format!("{} messages", self.transcript.len()))
90						.side(Side::Right)
91						.tone(if self.transcript.is_empty() {
92							Tone::Muted
93						} else {
94							Tone::Success
95						}),
96				),
97		])
98	}
Source

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

Adds children.

Source§

impl<M> Card<M>

Source

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

Head content: text, spans, or a child’s id.

Examples found in repository?
examples/progress.rs (line 67)
40fn view(build: &Build) -> View {
41	let fraction = build.done as f64 / STEPS.len() as f64;
42	let running = build.took.is_none();
43	let activity: ui::Node = if running {
44		ui::spinner()
45			.style("dots")
46			.label(STEPS[build.done.min(STEPS.len() - 1)])
47			.into()
48	} else {
49		ui::icon(if build.status == Status::Done {
50			"check"
51		} else {
52			"x"
53		})
54		.tone(if build.status == Status::Done {
55			"success"
56		} else {
57			"error"
58		})
59		.into()
60	};
61	let mut timer = ui::elapsed().age(0);
62	if let Some(took) = build.took {
63		timer = timer.stopped(took);
64	}
65	View::new().main([ui::card()
66		.key("build")
67		.head("Building demo")
68		.status(build.status.clone())
69		.child(
70			ui::row()
71				.key("head")
72				.gap("sm")
73				.children(nodes![activity.key("a"), timer.key("t")]),
74		)
75		.child(
76			ui::ansi(&build.log)
77				.key("log")
78				.follow(true)
79				.max(Bound::h(Extent::Lines(8.0))),
80		)
81		.child(ui::progress().key("bar").value(fraction).label(format!(
82			"{}/{}",
83			build.done,
84			STEPS.len()
85		)))])
86}
Source

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

The status chip.

Examples found in repository?
examples/progress.rs (line 68)
40fn view(build: &Build) -> View {
41	let fraction = build.done as f64 / STEPS.len() as f64;
42	let running = build.took.is_none();
43	let activity: ui::Node = if running {
44		ui::spinner()
45			.style("dots")
46			.label(STEPS[build.done.min(STEPS.len() - 1)])
47			.into()
48	} else {
49		ui::icon(if build.status == Status::Done {
50			"check"
51		} else {
52			"x"
53		})
54		.tone(if build.status == Status::Done {
55			"success"
56		} else {
57			"error"
58		})
59		.into()
60	};
61	let mut timer = ui::elapsed().age(0);
62	if let Some(took) = build.took {
63		timer = timer.stopped(took);
64	}
65	View::new().main([ui::card()
66		.key("build")
67		.head("Building demo")
68		.status(build.status.clone())
69		.child(
70			ui::row()
71				.key("head")
72				.gap("sm")
73				.children(nodes![activity.key("a"), timer.key("t")]),
74		)
75		.child(
76			ui::ansi(&build.log)
77				.key("log")
78				.follow(true)
79				.max(Bound::h(Extent::Lines(8.0))),
80		)
81		.child(ui::progress().key("bar").value(fraction).label(format!(
82			"{}/{}",
83			build.done,
84			STEPS.len()
85		)))])
86}
Source

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

The head flips the fold.

Source

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

The starting fold state.

Source

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

Lines shown while collapsed.

Source

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

An accent ring and halo.

Source

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

The body has no padding.

Source

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

The bare variant.

Examples found in repository?
examples/chat.rs (line 67)
61	fn view(&self) -> View<Msg> {
62		let messages = self.transcript.iter().enumerate().map(|(i, (who, text))| {
63			let node = ui::md(text.clone()).key(i);
64			if *who == "you" {
65				ui::card().key(i).tone("user").child(node.key("t"))
66			} else {
67				ui::card().key(i).variant("bare").child(node.key("t"))
68			}
69		});
70		let cursor: usize = self
71			.draft
72			.chars()
73			.take(self.cursor)
74			.map(char::len_utf16)
75			.sum();
76		View::new().main(ui::col().children(messages)).dock(nodes![
77			ui::editor()
78				.key("ed")
79				.text(self.draft.clone())
80				.cursor(cursor)
81				.placeholder("Message (Enter sends, Escape quits)")
82				.sendable(true)
83				.on_send(|text| Msg::Send(text.to_owned()))
84				.on_focus(Msg::Focus),
85			ui::status()
86				.key("bar")
87				.child(ui::seg("chat").icon("message"))
88				.child(
89					ui::seg(format!("{} messages", self.transcript.len()))
90						.side(Side::Right)
91						.tone(if self.transcript.is_empty() {
92							Tone::Muted
93						} else {
94							Tone::Success
95						}),
96				),
97		])
98	}

Trait Implementations§

Source§

impl<M> Clone for Card<M>

Source§

fn clone(&self) -> Self

Returns a duplicate of the value. Read more
1.0.0 (const: unstable) · Source§

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

Performs copy-assignment from source. Read more
Source§

impl<M> Debug for Card<M>

Source§

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

Formats the value using the given formatter. Read more
Source§

impl<M> From<Card<M>> for Node<M>

Source§

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

Converts to this type from the input type.
Source§

impl<M> From<Card<M>> for View<M>

A bare node is main’s one child.

Source§

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

Converts to this type from the input type.
Source§

impl<M> From<Node<M>> for Card<M>

Source§

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

Converts to this type from the input type.

Auto Trait Implementations§

§

impl<M = ()> !RefUnwindSafe for Card<M>

§

impl<M = ()> !UnwindSafe for Card<M>

§

impl<M> Freeze for Card<M>
where Node<M>: Freeze,

§

impl<M> Send for Card<M>
where Node<M>: Send,

§

impl<M> Sync for Card<M>
where Node<M>: Sync,

§

impl<M> Unpin for Card<M>
where Node<M>: Unpin,

§

impl<M> UnsafeUnpin for Card<M>
where Node<M>: UnsafeUnpin,

Blanket Implementations§

Source§

impl<T> Any for T
where T: 'static + ?Sized,

Source§

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more
Source§

impl<T> Borrow<T> for T
where T: ?Sized,

Source§

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more
Source§

impl<T> BorrowMut<T> for T
where T: ?Sized,

Source§

fn borrow_mut(&mut self) -> &mut T

Mutably borrows from an owned value. Read more
Source§

impl<T> CloneToUninit for T
where T: Clone,

Source§

unsafe fn clone_to_uninit(&self, dest: *mut u8)

🔬This is a nightly-only experimental API. (clone_to_uninit)
Performs copy-assignment from self to dest. Read more
Source§

impl<T> From<T> for T

Source§

fn from(t: T) -> T

Returns the argument unchanged.

Source§

impl<T> Instrument for T

Source§

fn instrument(self, span: Span) -> Instrumented<Self> ⓘ

Instruments this type with the provided Span, returning an Instrumented wrapper. Read more
Source§

fn in_current_span(self) -> Instrumented<Self> ⓘ

Instruments this type with the current Span, returning an Instrumented wrapper. Read more
Source§

impl<T, U> Into<U> for T
where U: From<T>,

Source§

fn into(self) -> U

Calls U::from(self).

That is, this conversion is whatever the implementation of From<T> for U chooses to do.

Source§

impl<T> Same for T

Source§

type Output = T

Should always be Self
Source§

impl<T> ToOwned for T
where T: Clone,

Source§

type Owned = T

The resulting type after obtaining ownership.
Source§

fn to_owned(&self) -> T

Creates owned data from borrowed data, usually by cloning. Read more
Source§

fn clone_into(&self, target: &mut T)

Uses borrowed data to replace owned data, usually by cloning. Read more
Source§

impl<T, U> TryFrom<U> for T
where U: Into<T>,

Source§

type Error = !

The type returned in the event of a conversion error.
Source§

fn try_from(value: U) -> Result<T, !>

Performs the conversion.
Source§

impl<T, U> TryInto<U> for T
where U: TryFrom<T>,

Source§

type Error = <U as TryFrom<T>>::Error

The type returned in the event of a conversion error.
Source§

fn try_into(self) -> Result<U, <U as TryFrom<T>>::Error>

Performs the conversion.
Source§

impl<T> WithSubscriber for T

Source§

fn with_subscriber<S>(self, subscriber: S) -> WithDispatch<Self> ⓘ
where S: Into<Dispatch>,

Attaches the provided Subscriber to this type, returning a WithDispatch wrapper. Read more
Source§

fn with_current_subscriber(self) -> WithDispatch<Self> ⓘ

Attaches the current default Subscriber to this type, returning a WithDispatch wrapper. Read more