yew-scroll-area

Usage

If you want scrollbars, simply surround the item you want to scroll with a <ScrollArea></ScrollArea> component.

#[function_component(App)]
fn app() -> Html {
    html!{
        <div style="width: 100%; height: 100%;">
            <ScrollArea vertical=true>
                { contents here ... }
            </ScrollArea>
        </div>
    }
}

The <ScrollArea></ScrollArea> component will be 100% of the width and height of the parent element and will allow scrolling for any child elements that extend beyond it.

The <ScrollArea></ScrollArea> component is styled using yew-style-in-rs.In other words, you need to copy and place style.css from the build artifact.

Display of vertical scrollbars

Add vertical=true if you want to use vertical scrollbars.

#[function_component(App)]
fn app() -> Html {
    html!{
        <div style="width: 100%; height: 100%;">
            <ScrollArea vertical=true>
                { contents here ... }
            </ScrollArea>
        </div>
    }
}

Display of horizontal scrollbars

Add horizontal=true if you want to use horizontal scrollbars.

#[function_component(App)]
fn app() -> Html {
    html!{
        <div style="width: 100%; height: 100%;">
            <ScrollArea horizontal=true>
                { contents here ... }
            </ScrollArea>
        </div>
    }
}

Display of scrollbars in both vertical and horizontal directions

Add vertical=true and horizontal=true if you want to use vertical and horizontal scrollbars.

#[function_component(App)]
fn app() -> Html {
    html!{
        <div style="width: 100%; height: 100%;">
            <ScrollArea vertical=true horizontal=true>
                { contents here ... }
            </ScrollArea>
        </div>
    }
}

Colorize of scrollbar

Add color={Color::rgba(128, 255, 0, 0.8)} if you want to colorize scrollbars.

#[function_component(App)]
fn app() -> Html {
    html!{
        <div style="width: 100%; height: 100%;">
            <ScrollArea vertical=true color={Color::rgba(128, 255, 0, 0.8)}>
                { contents here ... }
            </ScrollArea>
        </div>
    }
}

Other property of scrollbars

Add attributes width, round, hide_time and smooth_time for styling scrollbars.

#[function_component(App)]
fn app() -> Html {
    html!{
        <div style="width: 100%; height: 100%;">
            <ScrollArea vertical=true width={4.0} round=false hide_time={0.5} smooth_time={0.3}>
                { contents here ... }
            </ScrollArea>
        </div>
    }
}

Features

dry-run: No write css file to disk. Without this feature, this crate depends on yew-style-in-rs, so create and write a CSS file to disk. This feature is useful for document build.

If you would like to publish some components uses yew-scroll-area to crates.io, you might need to write following contents to Cargo.toml because crates.io docs build environment can't write filesystem:

[features]
default = []
dry-run = ["yew-scroll-area/dry-run"]

[package.metadata.docs.rs]
cargo-args = ["--features=dry-run"]

You might need to publish with dry-run.

$ cargo publish --features dry-run

yew-scroll-area 0.3.0