VoidableUI.Components (live_voidable v0.1.0)

Copy Markdown View Source

HEEx function components for all Voidable web components.

Each function component renders the corresponding <void-*> custom element tag. Interactive components include phx-hook="VoidEvent" and data-void-events attributes to bridge CustomEvents to LiveView's pushEvent.

Summary

Functions

accordion(assigns)

Renders a <void-accordion> container.

accordion_item(assigns)

Renders a <void-accordion-item> collapsible section.

alert(assigns)

Renders a <void-alert> message.

avatar(assigns)

Renders a <void-avatar> user avatar.

badge(assigns)

Renders a <void-badge> status badge.

banner(assigns)

Renders a <void-banner> announcement.

breadcrumbs(assigns)

Renders a <void-breadcrumbs> navigation trail.

button(assigns)

Renders a <void-button> element.

calendar(assigns)

Renders a <void-calendar> date picker grid.

card(assigns)

Renders a <void-card> container.

carousel(assigns)

Renders a <void-carousel> image/content slider.

carousel_slide(assigns)

Renders a <void-carousel-slide> inside a carousel.

checkbox(assigns)

Renders a <void-checkbox> toggle.

checkbox_group(assigns)

Renders a <void-checkbox-group> container.

combobox(assigns)

Renders a <void-combobox> searchable dropdown.

compose_input(assigns)

Renders a <void-compose-input> chat-style input.

date_picker(assigns)

Renders a <void-date-picker> input with calendar dropdown.

dialog(assigns)

Renders a <void-dialog> modal.

divider(assigns)

Renders a <void-divider> separator.

drawer(assigns)

Renders a <void-drawer> slide-out panel.

dropdown_menu(assigns)

Renders a <void-dropdown-menu> dropdown.

dropdown_menu_item(assigns)

Renders a <void-dropdown-menu-item> inside a dropdown menu.

error_fallback(assigns)

Renders a <void-error-fallback> error display.

field(assigns)

Renders a <void-field> form field wrapper.

file_upload(assigns)

Renders a <void-file-upload> drop zone.

hamburger(assigns)

Renders a <void-hamburger> menu toggle.

indicator(assigns)

Renders a <void-indicator> badge/notification dot.

input(assigns)

Renders a <void-input> text field.

list(assigns)

Renders a <void-list> container.

list_item(assigns)

Renders a <void-list-item> element.

menu(assigns)

Renders a <void-menu> command menu.

menu_group(assigns)

Renders a <void-menu-group> label inside a menu.

menu_item(assigns)

Renders a <void-menu-item> inside a menu.

multiselect(assigns)

Renders a <void-multiselect> multi-value dropdown.

nav_bar(assigns)

Renders a <void-nav-bar> navigation bar.

number_input(assigns)

Renders a <void-number-input> numeric stepper.

option(assigns)

Renders a <void-option> inside a multiselect or combobox.

pagination(assigns)

Renders a <void-pagination> page navigator.

panel(assigns)

Renders a <void-panel> container.

popover(assigns)

Renders a <void-popover> floating panel.

progress(assigns)

Renders a <void-progress> bar.

radio(assigns)

Renders a <void-radio> button.

radio_group(assigns)

Renders a <void-radio-group> container.

scroll_area(assigns)

Renders a <void-scroll-area> scrollable container.

segmented_control(assigns)

Renders a <void-segmented-control> selector.

segmented_control_item(assigns)

Renders a <void-segmented-control-item> inside a segmented control.

select(assigns)

Renders a <void-select> dropdown.

sidebar(assigns)

Renders a <void-sidebar> navigation sidebar.

skeleton(assigns)

Renders a <void-skeleton> placeholder.

slider(assigns)

Renders a <void-slider> range input.

spinner(assigns)

Renders a <void-spinner> loading indicator.

stat(assigns)

Renders a <void-stat> metric display.

status_dot(assigns)

Renders a <void-status-dot> indicator.

stepper(assigns)

Renders a <void-stepper> progress indicator.

switch(assigns)

Renders a <void-switch> toggle.

tab_panel(assigns)

Renders a <void-tab-panel> inside tabs.

table(assigns)

Renders a <void-table> wrapper.

tabs(assigns)

Renders a <void-tabs> tab container.

tag(assigns)

Renders a <void-tag> label.

textarea(assigns)

Renders a <void-textarea> multi-line text field.

toast(assigns)

Renders a <void-toast> notification.

toast_container(assigns)

Renders a <void-toast-container> positioning wrapper.

toggle(assigns)

Renders a <void-toggle> button.

toggle_group(assigns)

Renders a <void-toggle-group> button group.

tooltip(assigns)

Renders a <void-tooltip> hover tip.

Functions

accordion(assigns)

Renders a <void-accordion> container.

Attributes

  • multiple (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

accordion_item(assigns)

Renders a <void-accordion-item> collapsible section.

Attributes

  • id (:string) - Defaults to nil.
  • heading (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

alert(assigns)

Renders a <void-alert> message.

Attributes

  • id (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • dismissible (:boolean) - Defaults to false.
  • variant (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

avatar(assigns)

Renders a <void-avatar> user avatar.

Attributes

  • src (:string) - Defaults to nil.
  • alt (:string) - Defaults to nil.
  • initials (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

badge(assigns)

Renders a <void-badge> status badge.

Attributes

  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

banner(assigns)

Renders a <void-banner> announcement.

Attributes

  • color (:string) - Defaults to nil.
  • dismissable (:boolean) - Defaults to false.
  • variant (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

button(assigns)

Renders a <void-button> element.

Attributes

  • id (:string) - Defaults to nil.
  • variant (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • type (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

calendar(assigns)

Renders a <void-calendar> date picker grid.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • min (:string) - Defaults to nil.
  • max (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • locale (:string) - Defaults to nil.
  • first_day (:integer) - Defaults to nil.
  • Global attributes are accepted.

card(assigns)

Renders a <void-card> container.

Attributes

  • heading (:string) - Defaults to nil.
  • variant (:string) - Defaults to nil.
  • padding (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

carousel(assigns)

Renders a <void-carousel> image/content slider.

Attributes

  • id (:string) - Defaults to nil.
  • active (:integer) - Defaults to 0.
  • loop (:boolean) - Defaults to false.
  • autoplay (:boolean) - Defaults to false.
  • interval (:integer) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • controls (:boolean) - Defaults to true.
  • indicators (:boolean) - Defaults to true.
  • orientation (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

checkbox(assigns)

Renders a <void-checkbox> toggle.

Attributes

  • id (:string) - Defaults to nil.
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • indeterminate (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

checkbox_group(assigns)

Renders a <void-checkbox-group> container.

Attributes

  • id (:string) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • orientation (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

combobox(assigns)

Renders a <void-combobox> searchable dropdown.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

compose_input(assigns)

Renders a <void-compose-input> chat-style input.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • maxlength (:integer) - Defaults to nil.
  • Global attributes are accepted.

date_picker(assigns)

Renders a <void-date-picker> input with calendar dropdown.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • min (:string) - Defaults to nil.
  • max (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • locale (:string) - Defaults to nil.
  • first_day (:integer) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • placeholder (:string) - Defaults to nil.
  • format (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • Global attributes are accepted.

dialog(assigns)

Renders a <void-dialog> modal.

Attributes

  • id (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • heading (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • closable (:boolean) - Defaults to true.
  • Global attributes are accepted.

Slots

  • inner_block (required)

divider(assigns)

Renders a <void-divider> separator.

Attributes

  • label (:string) - Defaults to nil.
  • orientation (:string) - Defaults to nil.
  • Global attributes are accepted.

drawer(assigns)

Renders a <void-drawer> slide-out panel.

Attributes

  • id (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • side (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • heading (:string) - Defaults to nil.
  • closable (:boolean) - Defaults to true.
  • Global attributes are accepted.

Slots

  • inner_block (required)

error_fallback(assigns)

Renders a <void-error-fallback> error display.

Attributes

  • heading (:string) - Defaults to nil.
  • message (:string) - Defaults to nil.
  • retryable (:boolean) - Defaults to false.
  • retry_label (:string) - Defaults to nil.
  • icon (:boolean) - Defaults to true.
  • Global attributes are accepted.

field(assigns)

Renders a <void-field> form field wrapper.

Attributes

  • label (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • helper (:string) - Defaults to nil.
  • required (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

file_upload(assigns)

Renders a <void-file-upload> drop zone.

Attributes

  • id (:string) - Defaults to nil.
  • accept (:string) - Defaults to nil.
  • multiple (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • max_size (:integer) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • Global attributes are accepted.

hamburger(assigns)

Renders a <void-hamburger> menu toggle.

Attributes

  • id (:string) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

indicator(assigns)

Renders a <void-indicator> badge/notification dot.

Attributes

  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • count (:integer) - Defaults to nil.
  • ping (:boolean) - Defaults to false.
  • overlay (:boolean) - Defaults to false.
  • position (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

input(assigns)

Renders a <void-input> text field.

Attributes

  • id (:string) - Defaults to nil.
  • type (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • Global attributes are accepted.

list(assigns)

Renders a <void-list> container.

Attributes

  • dividers (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

list_item(assigns)

Renders a <void-list-item> element.

Attributes

  • selected (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • interactive (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

multiselect(assigns)

Renders a <void-multiselect> multi-value dropdown.

Attributes

  • id (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

number_input(assigns)

Renders a <void-number-input> numeric stepper.

Attributes

  • id (:string) - Defaults to nil.
  • value (:integer) - Defaults to nil.
  • min (:integer) - Defaults to nil.
  • max (:integer) - Defaults to nil.
  • step (:integer) - Defaults to nil.
  • precision (:integer) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • controls (:string) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • Global attributes are accepted.

option(assigns)

Renders a <void-option> inside a multiselect or combobox.

Attributes

  • value (:string) (required)
  • selected (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

pagination(assigns)

Renders a <void-pagination> page navigator.

Attributes

  • id (:string) - Defaults to nil.
  • total (:integer) - Defaults to nil.
  • value (:integer) - Defaults to nil.
  • siblings (:integer) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

panel(assigns)

Renders a <void-panel> container.

Attributes

  • label (:string) - Defaults to nil.
  • variant (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

popover(assigns)

Renders a <void-popover> floating panel.

Attributes

  • id (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • position (:string) - Defaults to nil.
  • trigger (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

progress(assigns)

Renders a <void-progress> bar.

Attributes

  • value (:integer) - Defaults to nil.
  • max (:integer) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • indeterminate (:boolean) - Defaults to false.
  • Global attributes are accepted.

radio(assigns)

Renders a <void-radio> button.

Attributes

  • id (:string) - Defaults to nil.
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

radio_group(assigns)

Renders a <void-radio-group> container.

Attributes

  • id (:string) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • orientation (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

scroll_area(assigns)

Renders a <void-scroll-area> scrollable container.

Attributes

  • max_height (:string) - Defaults to nil.
  • direction (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

segmented_control(assigns)

Renders a <void-segmented-control> selector.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

segmented_control_item(assigns)

Renders a <void-segmented-control-item> inside a segmented control.

Attributes

  • value (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

select(assigns)

Renders a <void-select> dropdown.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

sidebar(assigns)

Renders a <void-sidebar> navigation sidebar.

Attributes

  • id (:string) - Defaults to nil.
  • width (:string) - Defaults to nil.
  • collapsed_width (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

skeleton(assigns)

Renders a <void-skeleton> placeholder.

Attributes

  • variant (:string) - Defaults to nil.
  • Global attributes are accepted.

slider(assigns)

Renders a <void-slider> range input.

Attributes

  • id (:string) - Defaults to nil.
  • value (:integer) - Defaults to nil.
  • min (:integer) - Defaults to nil.
  • max (:integer) - Defaults to nil.
  • step (:integer) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • show_value (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

spinner(assigns)

Renders a <void-spinner> loading indicator.

Attributes

  • size (:string) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • Global attributes are accepted.

stat(assigns)

Renders a <void-stat> metric display.

Attributes

  • label (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • delta (:string) - Defaults to nil.
  • trend (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

status_dot(assigns)

Renders a <void-status-dot> indicator.

Attributes

  • status (:string) - Defaults to nil.
  • Global attributes are accepted.

stepper(assigns)

Renders a <void-stepper> progress indicator.

Attributes

  • value (:integer) - Defaults to nil.
  • steps (:string) - Defaults to nil.
  • Global attributes are accepted.

switch(assigns)

Renders a <void-switch> toggle.

Attributes

  • id (:string) - Defaults to nil.
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

tab_panel(assigns)

Renders a <void-tab-panel> inside tabs.

Attributes

  • tab (:string) (required)
  • label (:string) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

table(assigns)

Renders a <void-table> wrapper.

Attributes

  • striped (:boolean) - Defaults to false.
  • hoverable (:boolean) - Defaults to false.
  • compact (:boolean) - Defaults to false.
  • bordered (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

tabs(assigns)

Renders a <void-tabs> tab container.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

tag(assigns)

Renders a <void-tag> label.

Attributes

  • id (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • removable (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

textarea(assigns)

Renders a <void-textarea> multi-line text field.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • rows (:integer) - Defaults to nil.
  • resize (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • Global attributes are accepted.

toast(assigns)

Renders a <void-toast> notification.

Attributes

  • id (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • duration (:integer) - Defaults to nil.
  • dismissable (:boolean) - Defaults to true.
  • heading (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

toast_container(assigns)

Renders a <void-toast-container> positioning wrapper.

Attributes

  • position (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

toggle(assigns)

Renders a <void-toggle> button.

Attributes

  • id (:string) - Defaults to nil.
  • pressed (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • color (:string) - Defaults to nil.
  • size (:string) - Defaults to nil.
  • variant (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

toggle_group(assigns)

Renders a <void-toggle-group> button group.

Attributes

  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • multiple (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • size (:string) - Defaults to nil.
  • color (:string) - Defaults to nil.
  • orientation (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

tooltip(assigns)

Renders a <void-tooltip> hover tip.

Attributes

  • text (:string) - Defaults to nil.
  • position (:string) - Defaults to nil.
  • delay (:integer) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)