Crate ambient_ui

source ·
Expand description

A UI library for Ambient. Built on top of ambient_element.

Ambient’s UI system is heavily inspired by React (with hooks), and follows many of the same patterns. Take a look at the React documentation to learn how hooks work in general.

Getting started

Here’s a minimal, complete example of a counter app:

ⓘ
use ambient_api::prelude::*;

#[element_component]
fn App(hooks: &mut Hooks) -> Element {
    let (count, set_count) = use_state(hooks,0);
    FlowColumn::el([
        Text::el(format!("We've counted to {count} now")),
        Button::new("Increase", move |_| set_count(count + 1)).el(),
    ])
}

#[main]
pub fn main() {
    App.el().spawn_interactive();
}

See all UI examples here.

Modules

  • button
    Implements a button UI element, as well as variants thereof.
  • clickarea
    Defines the ClickArea element.
  • default_theme
    Defines the default theme for the UI.
  • dropdown
    Implements a dropdown element.
  • editor
    Provides an Editor trait for values that can be edited in the UI, and implementations for common types.
  • layout
    Implements all of the Elements used for layouting.
  • prelude
    A prelude for users of the crate. Imports all the most commonly used types and functions.
  • prompt
    Defines several UI prompts, such as Alert, Prompt, and EditorPrompt.
  • screens
    Defines several kinds of window-sized screens.
  • scroll_area
    Defines a scroll area.
  • select
    Defines elements that can be used to select an item from a list.
  • tabs
    Implements basic tabs.
  • text
    Defines a text element.
  • throbber
    Defines a throbber.
  • window
    Implements a window with a title bar and a child element. Can be moved around.

Structs

  • ImageFromUrl
    Show an image loaded from a url
  • Line
    A simple UI line. Use components like line_from, line_to, line_width, background_color, border_color, border_radius and border_thickness to control its appearance.
  • Rectangle
    A simple UI rect. Use components like width, height, background_color, border_color, border_radius and border_thickness to control its appearance.
  • UIBase
    A base element for all UI elements. It contains all the components needed for a UI element to work.
  • UIElement
    This only exists so that we can implement From<String> for Text, and then use it in for instance Button.

Traits

  • UIExt
    A trait that provides helper methods for UI elements.

Functions

  • set_focus
    Update the current focus to new_focus (if it’s different from the current focus)
  • use_focus
    A hook that returns the current focus state for this element and a callback to set the focus state.
  • use_focus_for_instance_id
    A hook that returns the current focus state for this element, given a specific instance_id, and a callback to set the focus state.
  • use_keyboard_input
    Helper wrapper around use_runtime_message that listens to WindowKeyboardInput messages and parses them for you.
  • use_window_logical_resolution
    A hook that returns the current window logical resolution (i.e. taking DPI scaling into account)
  • use_window_physical_resolution
    A hook that returns the current window physical resolution (i.e. not taking DPI scaling into account)
  • with_rect
    Converts the given element into a rect.

Type Aliases