howdy_ui - v1.0.0

howdy/ui/input_group

Input groups: a text input with text, icons or buttons inside its border.

input_group.group([], [
  input_group.addon([text("https://")]),
  input_group.input([attribute.aria_label("Website"), attribute.placeholder("example.com")]),
  input_group.addon([button.sized(Ghost, Small, [], [text("Check")])]),
])

The group draws the border and the focus ring, so the whole thing reads as one field. Use input for the text field inside it: the plain howdy/ui/input brings its own border.

Values

addon

</> 
pub fn addon(
  children: List(element.Element(msg)),
) -> element.Element(msg)

Text, an icon or a button at either end of the field.

addon_class

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

block_class

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

block_end

</> 
pub fn block_end(
  children: List(element.Element(msg)),
) -> element.Element(msg)

A row below the field, across its whole width, such as a character count and a send button.

block_end_class

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

block_start

</> 
pub fn block_start(
  children: List(element.Element(msg)),
) -> element.Element(msg)

A row above the field, across its whole width, such as a label or a toolbar.

block_start_class

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

classes

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

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

group

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

group_class

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

input

</> 
pub fn input(
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

The text field inside a group.

input_class

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

textarea

</> 
pub fn textarea(
  attributes: List(attribute.Attribute(msg)),
  content: String,
) -> element.Element(msg)

A multiline text field inside a group, such as a message composer.

textarea_class

</> 
pub fn textarea_class() -> css.Class
✨ Search Document