nav_button Widget

The user can tap a nav_button widget to perform a list of actions.

The button has a chevron "⟩" symbol. Users expect the button to navigate to another page.

Attributes:

• text: "Page 1"
  • Required
  • Text to display on the button
  • Must contain a non-whitespace symbol
• sub_text: "Some info about Page 1."
  • Text to display under the main text.
• actions: [action]
  • A list of actions to perform when the user taps the button
  • When the list is empty or missing, the button is disabled.
• badge_text: "5"
  • Text to display in a badge on the button.
• photo_url: "/image.png"
  • URL of an image to fetch and display. This may be a relative URL like "/image.png" or an absolute URL on any server like "https://example.com/image.png".
  • The iOS frontend supports PNG and JPEG file formats.

Example

# Ruby
nav_page(title: "Nav Button") {
  scroll {
    form(widgets: [
      nav_button(text: "Page 1", actions: [push("/p1")]),
      nav_button(
        text: "Page 2",
        sub_text: "A very nice page",
        actions: [push("/p2")],
      ),
      nav_button(text: "Page 3", badge_text: "5", actions: [push("/p3")]),
      nav_button(
        text: "Page 4",
        badge_text: "123456789012345678901234567890",
        actions: [push("/p4")],
      ),
      nav_button(
        text: "Page 5",
        photo_url: "/image.png",
        actions: [push("/p5")],
      ),
      nav_button(
        text: "Page 6",
        photo_url: "/nonexistent.png",
        actions: [push("/p6")],
      ),
      nav_button(text: "Disabled", actions: []),
      nav_button(
        text: "MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM",
        actions: [push("/mmmm_mmmm")],
      ),
      nav_button(
        text: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM",
        actions: [push("/mmmmmmmm")],
      ),
    ])
  }
}

#![allow(unused)]
fn main() {
// Rust
nav_page(
    "Nav Button",
    scroll(form((
        nav_button("Page 1", [push("/p1")]),
        nav_button("Page 2", [push("/p2")]).with_sub_text("A very nice page"),
        nav_button("Page 3", [push("/p3")]).with_badge_text("5"),
        nav_button("Page 4", [push("/p4")]).with_badge_text("123456789012345678901234567890"),
        nav_button("Page 5", [push("/p5")]).with_photo_url(PLACEHOLDER_IMAGE_KEY),
        nav_button("Page 6", [push("/p6")]).with_photo_url("/nonexistent.png"),
        nav_button("Disabled", []),
        nav_button(
            "MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM MMMM",
            [push("/mmmm_mmmm")],
        ),
        nav_button(
            "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM",
            [push("/mmmmmmmm")],
        ),
    ))),
)
}