Function scrollable

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

A container that makes its content scrollable when it exceeds the container’s size.

The scrollable component is a fundamental building block for creating areas with content that may not fit within the allocated space. It supports vertical and/or horizontal scrolling, which can be configured via ScrollableArgs.

The component offers two scrollbar layout options:

• Alongside: Scrollbars take up space in the layout alongside the content
• Overlay: Scrollbars are overlaid on top of the content without taking up space

State management is handled by ScrollableState, which must be provided to persist the scroll position across recompositions. The scrolling behavior is animated with a configurable smoothing factor for a better user experience.

Example

use std::sync::Arc;
use parking_lot::RwLock;
use tessera_ui::{DimensionValue, Dp};
use tessera_ui_basic_components::{
    column::{column_ui, ColumnArgs},
    scrollable::{scrollable, ScrollableArgs, ScrollableState, ScrollBarLayout},
    text::text,
};

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

// Example with alongside scrollbars (default)
scrollable(
    ScrollableArgs {
        height: DimensionValue::Fixed(Dp(100.0).into()),
        scrollbar_layout: ScrollBarLayout::Alongside,
        ..Default::default()
    },
    scrollable_state.clone(),
    || {
        column_ui!(
            ColumnArgs::default(),
            || text("Item 1".to_string()),
            || text("Item 2".to_string()),
            || text("Item 3".to_string()),
            || text("Item 4".to_string()),
            || text("Item 5".to_string()),
            || text("Item 6".to_string()),
            || text("Item 7".to_string()),
            || text("Item 8".to_string()),
            || text("Item 9".to_string()),
            || text("Item 10".to_string()),
        );
    },
);

// Example with overlay scrollbars
scrollable(
    ScrollableArgs {
        height: DimensionValue::Fixed(Dp(100.0).into()),
        scrollbar_layout: ScrollBarLayout::Overlay,
        ..Default::default()
    },
    scrollable_state,
    || {
        column_ui!(
            ColumnArgs::default(),
            || text("Item 1".to_string()),
            || text("Item 2".to_string()),
            || text("Item 3".to_string()),
            || text("Item 4".to_string()),
            || text("Item 5".to_string()),
            || text("Item 6".to_string()),
            || text("Item 7".to_string()),
            || text("Item 8".to_string()),
            || text("Item 9".to_string()),
            || text("Item 10".to_string()),
        );
    },
);

Panics

This component will panic if it does not have exactly one child.

Arguments

• args: An instance of ScrollableArgs or ScrollableArgsBuilder to configure the scrollable area’s behavior, such as dimensions and scroll directions.
• state: An Arc<RwLock<ScrollableState>> to hold and manage the component’s state.
• child: A closure that defines the content to be placed inside the scrollable container. This closure is executed once to build the component tree.