AppBar

A material design app bar.

Example

page.appbar = app_bar(
  leading: icon(Ruflet::MaterialIcons::MENU),
  title: text(value: "Dashboard"),
  bgcolor: "#1f2937",
  actions: [
    icon_button(icon: "search"),
    icon_button(icon: "more_vert")
  ]
)

Common properties

• title
• leading
• actions
• bgcolor
• color
• center_title
• leading_width
• elevation
• toolbar_height

Usage

Create the app bar with the free app_bar(...) helper and attach it to the page with page.appbar=:

page.appbar = app_bar(
  title: text(value: "Gallery", style: { size: 20 }),
  actions: []
)

page.add(
  container(content: text(value: "Body"))
)

Notes

• Attach an app bar with page.appbar = app_bar(...); do not add it to view(...)
• title is a control, usually text(...)
• actions takes an array of controls
• leading is commonly an icon_button(...) or icon(...)

Complete API

Helpers

• app_bar(**props)
• appbar(**props)

Accepted properties

• actions — Controls shown in the trailing action area.
• actions_padding — Actions padding.
• adaptive — Adapts to the platform (Material/Cupertino) when true.
• automatically_imply_leading — Sets the automatically imply leading property.
• badge — Badge drawn on the corner of the control.
• bgcolor — Background color.
• center_title — Sets the center title property.
• clip_behavior — How content overflowing the bounds is clipped.
• col — Responsive column span (1-12) per breakpoint.
• color — Foreground color.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• elevation — Shadow depth (z-height).
• elevation_on_scroll — Sets the elevation on scroll property.
• exclude_header_semantics — Sets the exclude header semantics property.
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• force_material_transparency — Sets the force material transparency property.
• key — Stable identity used to preserve state across rebuilds.
• leading — Control placed before the main content (e.g. an icon or avatar).
• leading_width — Leading width.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• rtl — Renders right-to-left when true.
• secondary — Sets the secondary property.
• shadow_color — Color of the drop shadow.
• shape — Shape/border of the control.
• title — The control shown as the title.
• title_spacing — Sets the title spacing property.
• title_text_style — Title text style.
• toolbar_height — Toolbar height.
• toolbar_opacity — Sets the toolbar opacity property.
• toolbar_text_style — Toolbar text style.
• tooltip — Text shown on hover/long-press.
• visible — Hides the control when false.

Wire reference

• Family: materials
• Widget type: appbar