Module bottom_sheet

Module bottom_sheet 

Source
Expand description

A component that displays content sliding up from the bottom of the screen.

The bottom_sheet_provider is the core of this module. It manages the presentation and dismissal of a “bottom sheet” — a common UI pattern for showing contextual information or actions.

§Key Components

  • bottom_sheet_provider: The main component function that you call to create the UI. It orchestrates the main content, the scrim (background overlay), and the sheet content itself.
  • BottomSheetProviderState: A state object that you must create and manage to control the bottom sheet. Use its open() and close() methods to show and hide the sheet.
  • BottomSheetProviderArgs: Configuration for the provider, including the visual style and the mandatory on_close_request callback.
  • BottomSheetStyle: Defines the appearance of the background scrim, either Material (a simple dark overlay) or Glass (a blurred, translucent effect).

§Behavior

  • The sheet animates smoothly into and out of view.
  • It displays a background scrim that blocks interaction with the main content.
  • Clicking the scrim or pressing the Escape key triggers the on_close_request callback.

§Example

use std::sync::Arc;
use parking_lot::RwLock;
use tessera_ui::{tessera, Renderer};
use tessera_ui_basic_components::{
    bottom_sheet::{
        bottom_sheet_provider, BottomSheetProviderArgsBuilder, BottomSheetProviderState
    },
    button::{button, ButtonArgsBuilder},
    ripple_state::RippleState,
    text::{text, TextArgsBuilder},
};

// 1. Define an application state to hold the bottom sheet's state.
#[derive(Default)]
struct AppState {
    sheet_state: Arc<RwLock<BottomSheetProviderState>>,
    ripple_state: Arc<RippleState>,
}

#[tessera]
fn app(state: Arc<RwLock<AppState>>) {
    let sheet_state = state.read().sheet_state.clone();

    // 2. Use the bottom_sheet_provider.
    bottom_sheet_provider(
        BottomSheetProviderArgsBuilder::default()
            // 3. Provide a callback to handle close requests.
            .on_close_request(Arc::new({
                let sheet_state = sheet_state.clone();
                move || sheet_state.write().close()
            }))
            .build()
            .unwrap(),
        sheet_state.clone(),
        // 4. Define the main content that is always visible.
        move || {
            button(
                ButtonArgsBuilder::default()
                    .on_click(Arc::new({
                        let sheet_state = sheet_state.clone();
                        move || sheet_state.write().open()
                    }))
                    .build()
                    .unwrap(),
                state.read().ripple_state.clone(),
                || text(TextArgsBuilder::default().text("Show Sheet".to_string()).build().unwrap())
            );
        },
        // 5. Define the content of the bottom sheet itself.
        || {
            text(TextArgsBuilder::default().text("This is the bottom sheet!".to_string()).build().unwrap());
        }
    );
}

Structs§

BottomSheetProviderArgs
Configuration arguments for the bottom_sheet_provider.
BottomSheetProviderArgsBuilder
Builder for BottomSheetProviderArgs.
BottomSheetProviderState
Manages the open/closed state of a bottom_sheet_provider.

Enums§

BottomSheetProviderArgsBuilderError
Error type for BottomSheetProviderArgsBuilder
BottomSheetStyle
Defines the visual style of the bottom sheet’s scrim.

Functions§

bottom_sheet_provider
Renders a bottom sheet UI group, managing its animation, scrim, and content.