4 releases
0.1.3 | Oct 24, 2022 |
---|---|
0.1.2 | Oct 22, 2022 |
0.1.1 | Oct 22, 2022 |
0.1.0 | Oct 22, 2022 |
#1086 in WebAssembly
49 downloads per month
13KB
172 lines
✨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:
-
Get
Yew-Canvas.rs
!#Cargo.toml [dependencies] yew="0.19" yew-infinite-list="..."
-
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> )) });
-
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👌
- This requires you to set up the
Yew.rs
development environment in advance, the following is aTrunk
packaging example: cd ./examples/base-use
trunk server
⚖️License⚖️
Yew-InfiniteFor.rs
is dual licensed under the MIT license and the Apache License (Version 2.0).
Dependencies
~12MB
~222K SLoC