howdy_ui - v1.0.0

howdy/ui

Ready-made elements that follow the theme.

Every element here is a Sketch class built from howdy/ui/theme/tokens, so it looks right under any theme in howdy/ui/theme. Use them in pages and in live views alike:

import howdy/ui
import howdy/ui/button.{Primary, Secondary}
import lustre/element.{text}
import lustre/event

ui.card([], [
  ui.h2("Counter"),
  ui.row([], [
    ui.button(Secondary, [event.on_click(Decrement)], [text("-")]),
    ui.button(Primary, [event.on_click(Increment)], [text("+")]),
  ]),
])

Each component lives in its own module under howdy/ui, and this module re-exports them. To make one your own, copy it into your project:

gleam run -m howdy/ui add button

That writes src/<app>/ui/button.gleam, the same source as the built-in, for you to edit. gleam run -m howdy/ui list shows what is available and gleam run -m howdy/ui diff button compares your copy with the version this package ships.

To add a component from scratch, keep the classes in a styles module, build each from tokens, and attach it with class:

// src/my_styles.gleam
pub fn badge() -> css.Class {
  css.class([css.background(tokens.primary), css.color(tokens.on_primary)])
}

pub fn classes() -> List(css.Class) {
  [badge()]
}

html.span([ui.class(my_styles.badge())], [text(content)])

The classes list is what howdy/ui/export uses to write the CSS file for a published site.

Where the CSS goes

Pages embed the CSS they need by default. In development, mount stylesheet and link it with page.stylesheet to serve it as one file instead:

howdy.new()
|> howdy.controller(pages())
|> howdy.controller(ui.stylesheet(at: "/assets/ui.css", themes: theme.default_themes()))

To publish, write a static file with howdy/ui/export and serve it with howdy/static. Live components carry the CSS for their own classes either way, so they are always styled.

Values

accordion

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

See howdy/ui/accordion.

accordion_item

</> 
pub fn accordion_item(
  group: String,
  open open: Bool,
  summary summary: List(element.Element(msg)),
  content content: List(element.Element(msg)),
) -> element.Element(msg)

alert

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

See howdy/ui/alert.

alert_description

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

alert_dialog

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

alert_title

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

aspect_ratio

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

See howdy/ui/aspect_ratio.

attachment

</> 
pub fn attachment(
  words words: attachment.Words,
  name name: String,
  detail detail: String,
  status status: attachment.Status,
  media media: option.Option(element.Element(msg)),
  actions actions: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/attachment.

attachment_group

</> 
pub fn attachment_group(
  attachments: List(element.Element(msg)),
) -> element.Element(msg)

avatar

</> 
pub fn avatar(
  src src: String,
  alt alt: String,
  initials initials: String,
) -> element.Element(msg)

See howdy/ui/avatar.

avatar_initials

</> 
pub fn avatar_initials(initials: String) -> element.Element(msg)

badge

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

See howdy/ui/badge.

</> 
pub fn breadcrumb(
  words: words.Words,
  attributes: List(attribute.Attribute(msg)),
  items: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/breadcrumb.

</> 
pub fn breadcrumb_ellipsis() -> element.Element(msg)
</> 
pub fn breadcrumb_link(
  href: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

breadcrumb_page

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

button

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

See howdy/ui/button. Variants are button.Primary, Secondary, Outline, Ghost, Link and Danger.

button_group

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

See howdy/ui/button_group.

card

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

See howdy/ui/card.

card_action

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

card_content

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

card_description

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

card_header

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

card_title

</> 
pub fn card_title(
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn carousel(
  words: words.Words,
  id: String,
  label label: String,
  attributes attributes: List(attribute.Attribute(msg)),
  slides slides: List(carousel.Slide(msg)),
) -> element.Element(msg)

See howdy/ui/carousel.

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

chat_bubble

</> 
pub fn chat_bubble(
  side: chat.Side,
  children: List(element.Element(msg)),
) -> element.Element(msg)

chat_conversation

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

See howdy/ui/chat.

chat_message

</> 
pub fn chat_message(
  side: chat.Side,
  attributes attributes: List(attribute.Attribute(msg)),
  avatar avatar_element: element.Element(msg),
  header header: List(element.Element(msg)),
  content content: List(element.Element(msg)),
  footer footer: List(element.Element(msg)),
) -> element.Element(msg)

chat_note

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

checkbox

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

See howdy/ui/checkbox.

choice

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

class

</> 
pub fn class(class: css.Class) -> attribute.Attribute(msg)

Register a Sketch class and use it on an element. The CSS is included by howdy/ui/page and howdy/ui/live, or by styles.

classes

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

Every class the built-in components use. howdy/ui/export includes these in the file it writes.

collapsible

</> 
pub fn collapsible(
  attributes: List(attribute.Attribute(msg)),
  open open: Bool,
  summary summary: List(element.Element(msg)),
  content content: List(element.Element(msg)),
) -> element.Element(msg)

combobox

</> 
pub fn combobox(
  words words: words.Words,
  id id: String,
  name name: String,
  value value: String,
  label label: String,
  placeholder placeholder: String,
  search search: String,
  attributes attributes: List(attribute.Attribute(msg)),
  options options: List(element.Element(msg)),
) -> element.Element(msg)

combobox_option

</> 
pub fn combobox_option(
  value: String,
  selected selected: Bool,
  children children: List(element.Element(msg)),
) -> element.Element(msg)

command

</> 
pub fn command(
  id: String,
  placeholder placeholder: String,
  attributes attributes: List(attribute.Attribute(msg)),
  children children: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/command.

command_dialog

</> 
pub fn command_dialog(
  words: words.Words,
  id: String,
  shortcut shortcut: String,
  attributes attributes: List(attribute.Attribute(msg)),
  command command_element: element.Element(msg),
) -> element.Element(msg)

command_empty

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

command_group

</> 
pub fn command_group(
  heading: String,
  items: List(element.Element(msg)),
) -> element.Element(msg)

command_item

</> 
pub fn command_item(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn command_link(
  href: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

container

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

See howdy/ui/layout.

context_menu

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

context_menu_area

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

See howdy/ui/context_menu. Its items are menu_item and friends.

dialog

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

See howdy/ui/dialog.

dialog_close

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

dialog_description

</> 
pub fn dialog_description(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn dialog_footer(
  children: List(element.Element(msg)),
) -> element.Element(msg)

dialog_header

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

dialog_title

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

dialog_trigger

</> 
pub fn dialog_trigger(
  id: String,
) -> List(attribute.Attribute(msg))

direction

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

See howdy/ui/direction.

drawer

</> 
pub fn drawer(
  words: words.Words,
  id: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/drawer. Its header, title, description and footer are the dialog’s.

drawer_trigger

</> 
pub fn drawer_trigger(
  id: String,
) -> List(attribute.Attribute(msg))

empty

</> 
pub fn empty(
  icon icon: element.Element(msg),
  title title: String,
  description description: String,
  actions actions: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/empty.

field

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

See howdy/ui/field.

field_description

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

field_error

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

fieldset

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

h1

</> 
pub fn h1(content: String) -> element.Element(msg)

See howdy/ui/heading.

h2

</> 
pub fn h2(content: String) -> element.Element(msg)

h3

</> 
pub fn h3(content: String) -> element.Element(msg)

h4

</> 
pub fn h4(content: String) -> element.Element(msg)

hover_card

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

See howdy/ui/hover_card.

hover_card_trigger

</> 
pub fn hover_card_trigger(
  id: String,
) -> List(attribute.Attribute(msg))

input

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

See howdy/ui/input.

input_group

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

See howdy/ui/input_group.

input_group_addon

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

input_group_input

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

input_otp

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

See howdy/ui/input_otp.

islands

</> 
pub fn islands() -> controller.Builder(Nil)

A controller serving the browser code for howdy/ui/island, under /_howdy/islands. Mount it in any app that mounts islands.

In development it rebuilds the islands for JavaScript whenever a page loads them, so the browser always runs the current source, under gleam run as well as gleam dev. Compile errors appear on the page.

A release serves the bundle written by gleam run -m howdy/ui export, which bundles the islands and then exports. It checks the bundle as it starts and logs what to run if the bundle is missing or was built from different code.

item

</> 
pub fn item(
  media media: element.Element(msg),
  title title: List(element.Element(msg)),
  description description: List(element.Element(msg)),
  actions actions: List(element.Element(msg)),
) -> element.Element(msg)

item_group

</> 
pub fn item_group(
  items: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/item.

</> 
pub fn item_link(
  href: String,
  media media: element.Element(msg),
  title title: List(element.Element(msg)),
  description description: List(element.Element(msg)),
) -> element.Element(msg)

kbd

</> 
pub fn kbd(key: String) -> element.Element(msg)

See howdy/ui/kbd.

label

</> 
pub fn label(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn link(
  href: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

main

</> 
pub fn main() -> Nil

The command line: gleam run -m howdy/ui list|search|view|add|diff|init|registry.

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

See howdy/ui/menu.

</> 
pub fn menu_checkbox_item(
  checked: Bool,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_item(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_label(
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_link(
  href: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_radio_group(
  label: String,
  items: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_radio_item(
  checked: Bool,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_separator() -> element.Element(msg)
</> 
pub fn menu_submenu(
  id: String,
  label label: List(element.Element(msg)),
  items items: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_trigger(id: String) -> List(attribute.Attribute(msg))
</> 
pub fn menubar(
  attributes: List(attribute.Attribute(msg)),
  buttons: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/menubar. Its menus are menus.

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

multiple_combobox

</> 
pub fn multiple_combobox(
  words words: words.Words,
  id id: String,
  name name: String,
  values values: List(String),
  placeholder placeholder: String,
  search search: String,
  attributes attributes: List(attribute.Attribute(msg)),
  options options: List(#(String, String)),
) -> element.Element(msg)

muted

</> 
pub fn muted(content: String) -> element.Element(msg)

native_select

</> 
pub fn native_select(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn navigation_link(
  href: String,
  active active: Bool,
  children children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn navigation_menu(
  attributes: List(attribute.Attribute(msg)),
  items: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/navigation_menu.

</> 
pub fn navigation_panel(
  id: String,
  label label: List(element.Element(msg)),
  links links: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn navigation_panel_link(
  href: String,
  title title: String,
  description description: String,
) -> element.Element(msg)

p

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

See howdy/ui/typography.

pagination

</> 
pub fn pagination(
  words words: words.Words,
  current current: Int,
  total total: Int,
  href href: fn(Int) -> String,
) -> element.Element(msg)

See howdy/ui/pagination.

popover

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

See howdy/ui/popover.

popover_close

</> 
pub fn popover_close(
  id: String,
) -> List(attribute.Attribute(msg))

popover_trigger

</> 
pub fn popover_trigger(
  id: String,
) -> List(attribute.Attribute(msg))

progress

</> 
pub fn progress(
  label label: String,
  value value: Int,
  max max: Int,
) -> element.Element(msg)

See howdy/ui/progress.

progress_indeterminate

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

prose

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

Styles the plain elements inside it, such as rendered Markdown.

radio

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

radio_group

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

resizable_group

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

See howdy/ui/resizable.

resizable_handle

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

resizable_panel

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

rich_text

</> 
pub fn rich_text() -> controller.Builder(Nil)

A controller serving the browser code for howdy/ui/rich_text, under /_howdy/rich-text. Mount it in any app with a rich text editor. The code is loaded only by pages that have one, and is cached for good, since its URL changes whenever it does.

row

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

rules

</> 
pub fn rules() -> List(#(String, String))

The CSS the built-in components register with style.rule, such as their @keyframes. howdy/ui/export includes these in the file it writes.

scroll_area

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

See howdy/ui/scroll_area.

scroll_fade

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

See howdy/ui/effects.

select

</> 
pub fn select(
  id id: String,
  name name: String,
  value value: String,
  placeholder placeholder: String,
  attributes attributes: List(attribute.Attribute(msg)),
  items items: List(select.Item),
) -> element.Element(msg)

See howdy/ui/select. For the browser’s own select, see native_select.

select_group

</> 
pub fn select_group(
  label: String,
  items: List(select.Item),
) -> select.Item

select_item

</> 
pub fn select_item(value: String, label: String) -> select.Item

separator

</> 
pub fn separator(
  orientation: layout.Orientation,
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

sheet

</> 
pub fn sheet(
  id: String,
  side: dialog.Side,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

shimmer

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

shortcut

</> 
pub fn shortcut(keys: List(String)) -> element.Element(msg)
</> 
pub fn sidebar(
  id: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_button(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

sidebar_content

</> 
pub fn sidebar_content(
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_footer(
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_group(
  label: String,
  items: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_header(
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_layout(
  collapsed collapsed: Bool,
  attributes attributes: List(attribute.Attribute(msg)),
  sidebar sidebar_element: element.Element(msg),
  main main: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/sidebar.

</> 
pub fn sidebar_link(
  href: String,
  active active: Bool,
  attributes attributes: List(attribute.Attribute(msg)),
  children children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_trigger(
  id: String,
) -> List(attribute.Attribute(msg))

sized_button

</> 
pub fn sized_button(
  variant: button.Variant,
  size: button.Size,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A button of a given size: button.Small, Medium, Large or Icon.

skeleton

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

See howdy/ui/loading.

slider

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

See howdy/ui/slider.

spinner

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

stack

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

styles

</> 
pub fn styles() -> element.Element(msg)

A <style> element holding the CSS for every class used so far. Build it after the elements it styles. Pages and live views include this for you.

stylesheet

</> 
pub fn stylesheet(
  at path: String,
  themes themes: theme.Themes,
) -> controller.Builder(Nil)

A controller for development that serves the theme variables, base styles and every class registered so far as one text/css file at path. Link it with page.stylesheet. It is sent with an ETag and cache-control: no-cache, so browsers revalidate on each page load and see new classes as soon as they exist.

For a published site, write a static file with howdy/ui/export and serve it with howdy/static instead.

submit_button

</> 
pub fn submit_button(
  variant: button.Variant,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A button that submits its form.

switch

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

See howdy/ui/switch.

tab

</> 
pub fn tab(
  value: String,
  attributes: List(attribute.Attribute(msg)),
  label label: List(element.Element(msg)),
  panel panel: List(element.Element(msg)),
) -> tabs.Tab(msg)

table

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

See howdy/ui/table.

table_body

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

table_caption

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

table_cell

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

table_head

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

table_header

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

table_row

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

tabs

</> 
pub fn tabs(
  id: String,
  selected selected: String,
  attributes attributes: List(attribute.Attribute(msg)),
  tabs items: List(tabs.Tab(msg)),
) -> element.Element(msg)

See howdy/ui/tabs.

textarea

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

theme_toggle

</> 
pub fn theme_toggle(
  children: List(element.Element(msg)),
  from a: String,
  to b: String,
) -> element.Element(msg)

toast

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

toast_close

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

toast_description

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

toast_region

</> 
pub fn toast_region(
  words: words.Words,
  attributes: List(attribute.Attribute(msg)),
  toasts: List(element.Element(msg)),
) -> element.Element(msg)

See howdy/ui/toast.

toast_title

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

toggle

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

See howdy/ui/toggle.

toggle_group

</> 
pub fn toggle_group(
  selection: toggle.Selection,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

tooltip

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

See howdy/ui/tooltip.

tooltip_trigger

</> 
pub fn tooltip_trigger(
  id: String,
) -> List(attribute.Attribute(msg))
✨ Search Document