shore - v1.3.0

shore/ui

Values

align

</> 
pub fn align(
  alignment: style.Align,
  node: @internal Node(msg),
) -> @internal Node(msg)

Sets alignment of all child nodes

bar

</> 
pub fn bar(color: style.Color) -> @internal Node(msg)

A row with a background color

bar2

</> 
pub fn bar2(
  color: style.Color,
  node: @internal Node(msg),
) -> @internal Node(msg)

A row with a background color, containing items

box

</> 
pub fn box(
  children: List(@internal Node(msg)),
  title: option.Option(String),
) -> @internal Node(msg)

A box container element for holding other nodes

box_styled

</> 
pub fn box_styled(
  children: List(@internal Node(msg)),
  title: option.Option(String),
  fg: option.Option(style.Color),
) -> @internal Node(msg)

A box container element for holding other nodes.

Can be provided with a custom colour for the outline and title.

br

</> 
pub fn br() -> @internal Node(msg)

An empty line

button

</> 
pub fn button(
  text: String,
  key: key.Key,
  event: msg,
) -> @internal Node(msg)

A button assigned to a key press to execute an event

button_id

</> 
pub fn button_id(
  id: String,
  text: String,
  key: key.Key,
  event: msg,
) -> @internal Node(msg)

A button assigned to a key press to execute an event

Takes an id value which uniquely identifies it, allowing two buttons to share the same display text but operate independently, contrary to a button, where the text is the id and so all button text must be unique.

button_id_styled

</> 
pub fn button_id_styled(
  id: String,
  text: String,
  key: key.Key,
  event: msg,
  fg: option.Option(style.Color),
  bg: option.Option(style.Color),
  focus_fg: option.Option(style.Color),
  focus_bg: option.Option(style.Color),
) -> @internal Node(msg)

A button assigned to a key press to execute an event.

Takes an id value which uniquely identifies it, allowing two buttons to share the same display text but operate independently, contrary to a button, where the text is the id and so all button text must be unique.

Can be provided with custom colours both for when focused/pressed or not.

Default colors for buttons are:

 fg: Some(style.Black),
 bg: Some(style.Blue),
 focus_fg: Some(style.Black),
 focus_bg: Some(style.Green),

button_styled

</> 
pub fn button_styled(
  text: String,
  key: key.Key,
  event: msg,
  fg: option.Option(style.Color),
  bg: option.Option(style.Color),
  focus_fg: option.Option(style.Color),
  focus_bg: option.Option(style.Color),
) -> @internal Node(msg)

A button assigned to a key press to execute an event. Can be provided with custom colours both for when focused/pressed or not.

Default colors for buttons are:

 fg: Some(style.Black),
 bg: Some(style.Blue),
 focus_fg: Some(style.Black),
 focus_bg: Some(style.Green),

col

</> 
pub fn col(
  children: List(@internal Node(msg)),
) -> @internal Node(msg)

A container element for holding other nodes over multiple lines

debug

</> 
pub fn debug() -> @internal Node(msg)

Prints some positional information for developer debugging

graph

</> 
pub fn graph(
  width: style.Size,
  height: style.Size,
  points: List(Float),
) -> @internal Node(msg)

An extremely simple plot

hr

</> 
pub fn hr() -> @internal Node(msg)

A horizontal line

hr_styled

</> 
pub fn hr_styled(color: style.Color) -> @internal Node(msg)

A colored horizontal line

image_unstable

</> 
pub fn image_unstable(base64: String) -> @internal Node(msg)

UNSTABLE: A base64 encoded png image drawn using the Kitty Graphics Protocol

This is currently a unstable implementation/exploration of using the kitty graphics protocol, some general notes are:

  • visually large pngs and file sizes over 500kb~ have performance issues
  • performance is typically even worse in render on_timer mode as it will redraw the images every frame
  • size of image is not detected for purposes of layout, as such, it should probably be in its own grid cell
  • only pngs stored as a base64 string are supported
  • only some terminals support this protocol
  • this function is likely to change significantly as the implementation of image support is refined
  • expect bugs

input

</> 
pub fn input(
  label: String,
  value: String,
  width: style.Size,
  event: fn(String) -> msg,
) -> @internal Node(msg)

A field for text input

input_hidden

</> 
pub fn input_hidden(
  label: String,
  value: String,
  width: style.Size,
  event: fn(String) -> msg,
) -> @internal Node(msg)

A field for text input with the content display hidden, useful for password fields

input_submit

</> 
pub fn input_submit(
  label: String,
  value: String,
  width: style.Size,
  event: fn(String) -> msg,
  submit: msg,
  hidden: Bool,
) -> @internal Node(msg)

A field for text input. Allows setting a submit event which can be triggered by the submit keybind while the field is currently focused.

Useful for scenarios where a separate submit button would be inconvenient, such as a chat box or 2fa prompt.

keybind

</> 
pub fn keybind(key: key.Key, event: msg) -> @internal Node(msg)

A non-visible button assigned to a key press to execute an event

progress

</> 
pub fn progress(
  width: style.Size,
  max: Int,
  value: Int,
  color: style.Color,
) -> @internal Node(msg)

A progress bar, will automatically calculate fill percent based off max and current values

row

</> 
pub fn row(
  children: List(@internal Node(msg)),
) -> @internal Node(msg)

A container element for holding other nodes in a single line

table

</> 
pub fn table(
  width: style.Size,
  table: List(List(String)),
) -> @internal Node(msg)

A table layout

table_kv

</> 
pub fn table_kv(
  width: style.Size,
  table: List(List(String)),
) -> @internal Node(msg)

A Key-Value style table layout

text

</> 
pub fn text(text: String) -> @internal Node(msg)

A text string

text_styled

</> 
pub fn text_styled(
  text: String,
  fg: option.Option(style.Color),
  bg: option.Option(style.Color),
) -> @internal Node(msg)

A text string with colored foreground and/or background

text_wrapped

</> 
pub fn text_wrapped(text: String) -> @internal Node(msg)

A text string with automatic line wrapping

text_wrapped_styled

</> 
pub fn text_wrapped_styled(
  text: String,
  fg: option.Option(style.Color),
  bg: option.Option(style.Color),
) -> @internal Node(msg)

A text string with automatic line wrapping and colored foreground and/or background

✨ Search Document