Ajoutez rs-grid-leptos a votre Cargo.toml :
Cargo.toml
[dependencies]
rs-grid-leptos = { path = "../rs-grid-leptos" }
Importez le composant et montez-le dans une vue Leptos :
src/main.rs
use leptos::*;
use rs_grid_leptos::GridCanvas;
#[component]
pub fn App() -> impl IntoView {
view! {
<main style="width: 100vw; height: 100vh;">
<GridCanvas
rows=1_000_000_u64
cols=50_usize
/>
</main>
}
}
fn main() {
leptos::mount_to_body(App);
}
Lancez l'exemple :
cd examples/basic-leptos
trunk serve
Compilez le package WASM :
cd crates/rs-grid-web
wasm-pack build --target web
Utilisez-le dans votre HTML :
index.html
<canvas id="grid" style="width: 100vw; height: 100vh;"></canvas>
<script type="module">
import init, { JsGrid } from './pkg/rs_grid_web.js';
await init();
const canvas = document.getElementById('grid');
const grid = new JsGrid(canvas, 1_000_000, 50);
</script>
Ajoutez rs-grid-dioxus a votre Cargo.toml :
Cargo.toml
[dependencies]
rs-grid-dioxus = { path = "../rs-grid-dioxus" }
Importez le composant et montez-le dans une application Dioxus :
src/main.rs
use dioxus::prelude::*;
use rs_grid_dioxus::{GridCanvas, ModelSlot};
use rs_grid_core::model::GridModel;
fn App() -> Element {
let model = use_hook(|| {
ModelSlot::new(GridModel::new(1_000_000, 50))
});
rsx! {
main { style: "width:100vw;height:100vh;",
GridCanvas { model: model.clone() }
}
}
}
fn main() {
dioxus::launch(App);
}
Lancez l'exemple :
cd examples/basic-dioxus
trunk serve
Ajoutez rs-grid-yew a votre Cargo.toml :
Cargo.toml
[dependencies]
rs-grid-yew = { path = "../rs-grid-yew" }
Importez le composant et montez-le dans une application Yew :
src/main.rs
use yew::prelude::*;
use rs_grid_yew::{GridCanvas, wrap_model};
use rs_grid_core::model::GridModel;
#[function_component]
fn App() -> Html {
let model = wrap_model(GridModel::new(1_000_000, 50));
html! {
<main style="width:100vw;height:100vh;">
<GridCanvas model={model} />
</main>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
Lancez l'exemple :
cd examples/basic-yew
trunk serve