yew-scroll-area

用法

如果您想使用滚动条，只需将您想滚动的项用 <ScrollArea></ScrollArea> 组件包裹。

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

<ScrollArea></ScrollArea> 组件将占父元素的 100% 宽度和高度，并允许滚动超出其范围的任何子元素。

<ScrollArea></ScrollArea> 组件使用 yew-style-in-rs 进行样式设计。换句话说，您需要复制并将 build 艺术品中的 style.css 放置好。

垂直滚动条显示

如果您想使用垂直滚动条，请添加 vertical=true。

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

水平滚动条显示

如果您想使用水平滚动条，请添加 horizontal=true。

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

垂直和水平方向滚动条显示

如果您想使用垂直和水平滚动条，请添加 vertical=true 和 horizontal=true。

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

滚动条着色

如果您想对滚动条进行着色，请添加 color={Color::rgba(128, 255, 0, 0.8)}。

#[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>
    }
}

滚动条的其他属性

添加 width、round、hide_time 和 smooth_time 属性以进行滚动条样式设计。

#[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>
    }
}

特性

• dry-run：不将 CSS 文件写入磁盘。如果没有此功能，此 crate 依赖于 yew-style-in-rs，因此需要创建并写入磁盘上的 CSS 文件。此功能对文档构建很有用。

如果您想将使用 yew-scroll-area 的组件发布到 crates.io，您可能需要在 Cargo.toml 中写入以下内容，因为 crates.io 文档构建环境无法写入文件系统。

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

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

您可能需要使用 dry-run 来进行发布。

$ cargo publish --features dry-run