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 mandatoryon_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 providedon_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§
- Side
BarProvider Args - Side
BarProvider Args Builder - Builder for
SideBarProviderArgs
. - Side
BarProvider State - Manages the open/closed state of a
side_bar_provider
.
Enums§
- Side
BarProvider Args Builder Error - Error type for SideBarProviderArgsBuilder
- Side
BarStyle - 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.