Module side_bar

Module side_bar 

Source
Expand description

A component that displays content sliding in from the left side of the screen.

The side_bar_provider manages the presentation and dismissal of a “side bar” — a common UI pattern for showing navigation or contextual controls.

§Key Components

  • side_bar_provider: The main component function that orchestrates the main content, the scrim (background overlay), and the side bar content itself.
  • SideBarProviderState: A state object that applications create and manipulate to control the side bar visibility. Call its [open()] and [close()] methods to change state.
  • SideBarProviderArgs: Configuration for the provider, including the visual [style] and the mandatory on_close_request callback.
  • SideBarStyle: Visual variants for scrim and container (Material or Glass).

§Behavior

  • The side bar animates smoothly in and out from the left edge.
  • A scrim blocks interaction with the main content while the side bar is visible.
  • Clicking the scrim or pressing the Escape key will invoke the provided on_close_request callback.

§Example

use std::sync::Arc;
use parking_lot::RwLock;
use tessera_ui::{tessera, Renderer};
use tessera_ui_basic_components::{
    side_bar::{side_bar_provider, SideBarProviderArgsBuilder, SideBarProviderState, SideBarStyle},
    button::{button, ButtonArgsBuilder},
    ripple_state::RippleState,
    text::{text, TextArgsBuilder},
};

// 1. Define an application state to hold the side bar's state.
#[derive(Default)]
struct AppState {
    bar_state: Arc<RwLock<SideBarProviderState>>,
    ripple_state: Arc<RippleState>,
}

#[tessera]
fn app(state: Arc<RwLock<AppState>>) {
    let bar_state = state.read().bar_state.clone();
    // 2. Use the side_bar_provider.
    side_bar_provider(
        SideBarProviderArgsBuilder::default()
            // 3. Provide a callback to handle close requests.
            .on_close_request(Arc::new({
                let bar_state = bar_state.clone();
                move || bar_state.write().close()
            }))
            .build()
            .unwrap(),
        bar_state.clone(),
        // 4. Define the main content that is always visible.
        move || {
            button(
                ButtonArgsBuilder::default()
                    .on_click(Arc::new({
                        let bar_state = bar_state.clone();
                        move || bar_state.write().open()
                    }))
                    .build()
                    .unwrap(),
                state.read().ripple_state.clone(),
                || text(TextArgsBuilder::default().text("Open Side Bar".to_string()).build().unwrap())
            );
        },
        // 5. Define the content of the side bar itself.
        || {
            text(TextArgsBuilder::default().text("This is the side bar!").build().unwrap());
        }
    );
}

Structs§

SideBarProviderArgs
SideBarProviderArgsBuilder
Builder for SideBarProviderArgs.
SideBarProviderState
Manages the open/closed state of a side_bar_provider.

Enums§

SideBarProviderArgsBuilderError
Error type for SideBarProviderArgsBuilder
SideBarStyle
Defines the visual style of the side bar and its scrim.

Functions§

side_bar_provider
Renders a side bar UI group, managing its animation, scrim, keyboard handling and content.