Prefer server-side-rendering and hydration (SSR) when you want the best performing and feature rich (server functions) solution.
Use client-side-rendering (CSR) when big bundle-sizes and slow initial load times are not an issue for you or when you want a solution with less complexity involved.
The way you use Leptonic will stay the same either way.
Start by adding leptonic as a dependency of your app.
cargo add leptonic
Leptonic comes with default styling in form of the leptonic-theme crate. The themes, as well as other static files, are automatically copied to your project root directory when building your application. You have to tell Leptonic where you want these files to be stored. We recommend not excluding them from your VCS.
Add the following to your Cargo.toml. We will assume that the 'style' directory also contains your 'main.scss' file.
[package.metadata.leptonic]
# REQUIRED: Leptonic's build-script will copy the Leptonic themes to this directory.
style-dir = "style"
# REQUIRED: Leptonic's build-script will copy static JS dependencies to this directory.
js-dir = "public/js"
To incorporate the Leptonic themes in your app, add the following to your style/main.scss file.
@import "./leptonic/leptonic-themes";
You can overwrite or add styles for a particular theme using a [data-theme="..."] selector like so:
Leptonic depends on the leptos-use crate. Some of the features used require an opt-in. In order for your app to compile properly, add a folder named .cargo besides your Cargo.toml file. Place a config.toml file inside it containing the following content:
[build]
# `leptonic` depends on some `leptos-use` functions requiring this opt-in. This may change in the future.
rustflags = ["--cfg=web_sys_unstable_apis"]
You should now be ready to use leptonic components in your leptos app. Let's set up your first component.
Similar to Leptos, this crate comes with a prelude module.
Just use leptonic::prelude::*; and you are ready to use any component mentioned in this book.
Leptonic provides the <Root> component. It is responsible for enabling the Theming, Modal and Toast functionality of Leptonic as well as providing global event-listening capabilities.You have to include it in your app once, and render all your content inside it.
