scrollable

Function scrollable 

Source
pub fn scrollable(
    args: impl Into<ScrollableArgs>,
    state: ScrollableState,
    child: impl FnOnce() + Send + Sync + 'static,
)
Expand description

§scrollable

Creates a container that makes its content scrollable when it overflows.

§Usage

Wrap a large component or a long list of items to allow the user to scroll through them.

§Parameters

  • args — configures the scrollable area’s dimensions, direction, and scrollbar appearance; see ScrollableArgs.
  • state — a clonable ScrollableState to manage the scroll position.
  • child — a closure that renders the content to be scrolled.

§Examples

use tessera_ui::{DimensionValue, Dp};
use tessera_ui_basic_components::{
    scrollable::{scrollable, ScrollableArgs, ScrollableState},
    column::{column, ColumnArgs},
    text::{text, TextArgsBuilder},
};

// In a real app, you would manage this state.
let scrollable_state = ScrollableState::new();

scrollable(
    ScrollableArgs {
        height: DimensionValue::Fixed(Dp(100.0).into()),
        ..Default::default()
    },
    scrollable_state,
    || {
        column(ColumnArgs::default(), |scope| {
            for i in 0..20 {
                let text_content = format!("Item #{}", i + 1);
                scope.child(|| {
                    text(TextArgsBuilder::default().text(text_content).build().expect("builder construction failed"));
                });
            }
        });
    },
);