howtomakeaname/sumi/layout

README
U
AlertVariant
U
AttachmentItem
U
AttachmentKind
U
ButtonSize
U
ButtonVariant
U
CheckboxMenuGroup
U
CheckboxMenuItem
U
MenuAlign
U
MenuEntry
U
MenuItem
U
MenuSide
U
SegmentedItem
U
SelectVariant
U
ShortcutItem
U
ShortcutSection
U
StatusBadgeState
U
TabEntry
U
TagVariant
U
ToastVariant
U
TooltipSide
T
ThemeMode
V
add_tile
V
alert
V
attachment_strip
V
avatar
V
badge
V
button
V
card
V
card_section
V
checkbox
V
checkbox_menu
V
chip
V
context_menu
V
credits
V
dialog
V
divider
V
dropdown_menu
V
editable_text
V
empty_state
V
favorite_toggle
V
icon
V
icon_adjust
V
icon_align_left
V
icon_arrow_down
V
icon_arrow_up
V
icon_button
V
icon_caret_down
V
icon_check
V
icon_check_fill
V
icon_chevron_down
V
icon_chevron_left
V
icon_chevron_right
V
icon_chevron_up
V
icon_clock
V
icon_close_circle
V
icon_crop
V
icon_download
V
icon_expand
V
icon_folder
V
icon_grid
V
icon_image
V
icon_important
V
icon_info_circle_fill
V
icon_layers
V
icon_minus
V
icon_more
V
icon_play
V
icon_plus
V
icon_plus_fill
V
icon_ratio
V
icon_reset
V
icon_scissors
V
icon_search
V
icon_slash
V
icon_sparkle
V
icon_star
V
icon_star_fill
V
icon_target
V
icon_tick_circle_fill
V
icon_upload
V
icon_upload_fill
V
icon_x
V
icon_x_fill
V
input
V
kbd
V
menu_chevron
V
pagination
V
popover
V
progress
V
prompt_box
V
segmented
V
select
V
send_button
V
shortcuts_panel
V
skeleton
V
skeleton_lines
V
skeleton_tile
V
slider
V
slider_field
V
spinner
V
status_badge
V
stepper
V
switch
V
tabs
V
tag
V
textarea
V
theme
V
toast
V
toolbar
V
toolbar_divider
V
tooltip

howtomakeaname/sumi/layout does not have a README file

ShortcutItem

pub(all) struct ShortcutItem {
  label : String
  keys : String
}

One shortcut row: an action label and its key combination.

ShortcutItem::new

source

fn ShortcutItem::new(label : String, keys : String) -> ShortcutItem

ShortcutSection

source

pub(all) struct ShortcutSection {
  title : String
  items : Array[ShortcutItem]
}

A titled cluster of shortcuts. The title carries a hairline underline; sections are separated by an 8px gap.

ShortcutSection::new

source

fn ShortcutSection::new(title : String, items : Array[ShortcutItem]) -> ShortcutSection

TabEntry

source

pub(all) struct TabEntry {
  value : String
  label : String
  icon : @moonbit-community/rabbita/html.Html
Html?
}

One tab in a tabs control.

TabEntry::new

source

fn TabEntry::new(value : String, label : String, icon? : @moonbit-community/rabbita/html.Html
Html) -> TabEntry

card

source

fn[C : @moonbit-community/rabbita/html.IsChildren
IsChildren] card(id? : String, class? : String, title? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String], children : C) -> @moonbit-community/rabbita/html.Html
Html

A surface container for grouping content on the canvas.

card_section

source

fn[C : @moonbit-community/rabbita/html.IsChildren
IsChildren] card_section(header~ : @moonbit-community/rabbita/html.Html
Html, id? : String, class? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String], children : C) -> @moonbit-community/rabbita/html.Html
Html

A card with the design's header/content split.

divider

source

fn divider(id? : String, class? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String]) -> @moonbit-community/rabbita/html.Html
Html

A thin horizontal rule for separating stacked content.

pagination

source

fn pagination(page~ : Int, total~ : Int, on_change? : @moonbit-community/rabbita/cmd.Emit
Emit[Int], id? : String, class? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String]) -> @moonbit-community/rabbita/html.Html
Html

A minimal ‹ page / total › pager for stepping through a small result set. Controlled: the parent owns page and applies on_change. The arrow buttons clamp at the range ends and disable there.

shortcuts_panel

source

fn shortcuts_panel(sections~ : Array[ShortcutSection], title? : String, on_close? : @moonbit-community/rabbita/cmd.Cmd
Cmd, width? : Int, max_height? : Int, id? : String, class? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String]) -> @moonbit-community/rabbita/html.Html
Html

The keyboard-shortcuts reference panel from the design: an elevated 264px sheet with a titled header and close button, then titled sections of label + key-chip rows. Long lists scroll inside the body with the library's standard scrollbar.

shortcuts_panel(
  title="Shortcuts",
  sections=[
    ShortcutSection::new(
      "General",
      [
        ShortcutItem::new("Toggle sidebar", "Cmd /"),
        ShortcutItem::new("Send message", "Enter"),
      ],
    ),
  ],
  on_close=close_panel,
)

tabs

source

fn tabs(items~ : Array[TabEntry], selected~ : String, on_select? : @moonbit-community/rabbita/cmd.Emit
Emit[String], id? : String, class? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String]) -> @moonbit-community/rabbita/html.Html
Html

A tab strip. Controlled: the caller owns the selected value; render the matching panel content next to the returned strip.

tabs(
  items=[TabEntry::new("all", "All"), TabEntry::new("mine", "Mine")],
  selected=tab,
  on_select=set_tab.map(v => _ => v),
)

fn[C : @moonbit-community/rabbita/html.IsChildren
IsChildren] toolbar(id? : String, class? : String, title? : String, attrs? : @moonbit-community/rabbita/html.Attrs
Attrs, style? : Array[String], children : C) -> @moonbit-community/rabbita/html.Html
Html

A floating horizontal bar that groups controls — the design's signature pill-shaped toolbar. Compose with button(variant=Ghost), segmented, dropdown_menu and toolbar_divider.

toolbar_divider

source

fn toolbar_divider(style? : Array[String]) -> @moonbit-community/rabbita/html.Html
Html

The thin vertical separator used between control groups inside a toolbar.

Source Files

Site source Report issue Packages Build queue Skills Statistics

#ShortcutItem

#ShortcutItem::new

#ShortcutSection

#ShortcutSection::new

#TabEntry

#TabEntry::new

#card

#card_section

#divider

#pagination

#shortcuts_panel

#tabs

#toolbar

#toolbar_divider

Source Files

ShortcutItem

ShortcutItem::new

ShortcutSection

ShortcutSection::new

TabEntry

TabEntry::new

card

card_section

divider

pagination

shortcuts_panel

tabs

toolbar

toolbar_divider