howdy_ui - v1.0.0

howdy/ui/resizable

Resizable panels: panels side by side, or stacked, with handles that can be dragged to share the space differently.

resizable.group(resizable.Horizontal, [attribute.style("height", "20rem")], [
  resizable.panel(30, [], [folders]),
  resizable.handle("Resize folders"),
  resizable.panel(70, [], [messages]),
])

Sizes are shares of the group: give the panels sizes that add up to 100. A handle can be dragged, or focused and moved with the arrow keys, Home and End; screen readers hear the size of the panel before it.

No panel shrinks below a tenth of the group, or the share given with minimum. A collapsible panel folds away, and back, when the handle after it is double-clicked or focused and Enter pressed. With remember, sizes are kept in a cookie called resizable-<id>: read it with sizes_from_cookie and pass the sizes back to render the panels as they were left.

Types

Direction

</> 
pub type Direction {
  Horizontal
  Vertical
}

Constructors 

  • Horizontal

    Panels side by side.

  • Vertical

    Panels one above the other.

Values

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

collapsible

</> 
pub fn collapsible() -> attribute.Attribute(msg)

Let a panel fold away with the handle after it.

group

</> 
pub fn group(
  direction: Direction,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

group_class

</> 
pub fn group_class(direction: Direction) -> css.Class

handle

</> 
pub fn handle(label: String) -> element.Element(msg)

A handle between two panels. label names what it resizes.

handle_class

</> 
pub fn handle_class() -> css.Class

minimum

</> 
pub fn minimum(share: Int) -> attribute.Attribute(msg)

The smallest share a panel can shrink to, out of 100.

panel

</> 
pub fn panel(
  size: Int,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A panel taking size shares of the group.

panel_class

</> 
pub fn panel_class() -> css.Class

remember

</> 
pub fn remember(id: String) -> attribute.Attribute(msg)

Keep the group’s sizes in a resizable-<id> cookie as they change.

</> 
pub fn sizes_from_cookie(
  value: String,
  default default: List(Int),
) -> List(Int)

Read sizes kept by remember, such as 30_70. Returns default when the cookie is missing or does not have one size per panel.

✨ Search Document