yew-infinite-for

Crates.ioyew-infinite-for
lib.rsyew-infinite-for
version0.1.3
sourcesrc
created_at2022-10-22 12:50:18.852452
updated_at2022-10-24 03:12:24.673155
descriptionA list component that scrolls infinitely for Yew..
homepage
repositoryhttps://github.com/1216892614/Yew-InfiniteFor.rs
max_upload_size
id694399
size27,397
Nerd (1216892614)

documentation

README

✨Yew-InfiniteFor.rs✨

中文

Yew-InfiniteFor.rs is a list component that scrolls infinitely for Yew.

🔥What's the highlight🔥

  • It support function_component style!
  • It can smart change how many items render in once by view size.
  • It support row mode and column mode.
  • And, it's easy to use!

📑How to use it?📑

Just 3 Simple steps, do like this:

  1. Get Yew-Canvas.rs!

    #Cargo.toml
[dependencies]
yew="0.19"
yew-infinite-list="..."

  2. Create a request Callback in the function_component!

    // This callback accept a Two-tuple:
// - n: usize: the serial number of the item
// - ret: Callback<Html>: Html setter of the item
let request = Callback::from(|(n, ret): (usize, Callback<Html>)| {
    gloo::console::log!("Tag ", n, " rendered!");
    ret.emit(html!(
        <h1>
            {format!("This is tag {n}")}
        </h1>
    ))
});

  3. Return the component as InfiniteFor!

    html! {
    <div
        // You have to be sure `InfiniteFor` can be overflow.
        // Generally this is not a problem in other components.
        // If you plan to put `InfiniteFor` directly in the
        // `body`, you can use a style like this:
        style="\
            height: 100vh;\
            width: 100vw;\
        "
    >
        <InfiniteFor
            // use this attribute to switch mode from column to row
            is_direction_row={true}
            // use this callback to offer Html of the items
            {request}
        >
            // children is the load sign
            // at the bottom of the page
            <h4>
                { "This is the end of page\n这里是页面底部" }
            </h4>
        </InfiniteFor>
    </div>
}

👌Run Exmple👌

  1. This requires you to set up the Yew.rs development environment in advance, the following is a Trunk packaging example:
  2. cd ./examples/base-use
  3. trunk server

⚖️License⚖️

Yew-InfiniteFor.rs is dual licensed under the MIT license and the Apache License (Version 2.0).

Commit count: 8

cargo fmt