Crate material_dioxus
source ·Expand description
Material Dioxus
Material Dioxus is a components library wrapper around Google’s
Material Web Components
for the Dioxus framework. Only the dioxus-web
renderer is supported.
Example
use material_dioxus::MatButton;
use dioxus::prelude::*;
rsx! {
MatButton {
label: "Click me!",
}
};
Getting started
Installation
Cargo.toml
:
cargo add material-dioxus --features full
Material icons and a Material font must be imported for full functionality.
Dioxus.toml
:
[web.resource]
style = [
"https://fonts.googleapis.com/css?family=Roboto:300,400,500",
"https://fonts.googleapis.com/css?family=Material+Icons&display=block",
# ...
]
Feature flags
There is one cargo feature for each component:
button
circular-progress
checkbox
circular-progress-four-color
icon-button
fab
formfield
icon
radio
switch
dialog
list
textfield
textarea
The all-components
feature enables all components.
Additionally, there are two features related to theming.
theming
&emdash; Provides aMatTheme
component for setting a color theme.palette
&emdash; Provides constants for the material color palette (automatically enabled bytheming
).
The full
feature enables all features.
Theming
These components respect the theming applied to Material Web Components using stylesheets. Learn about how to theme Material Web Components.
For convenience, the theming
feature provides a MatTheme
component, which
takes a few colors and sets all required CSS variables. Just include that in the
root of your application once.
Event handling
Due to lifetime limitations of the normal Dioxus event handlers, material-dioxus
cannot make use of them. The exposed events instead use a custom callback type.
For simple buttons that are never disabled you can also just wrap them in a
span
and use a normal event handler on that. For example
use dioxus::prelude::*;
use material_dioxus::MatButton;
#[allow(non_snake_case)]
fn Counter(cx: Scope) -> Element {
let mut counter = use_state(cx, || 0);
render! {
// option 1: wrap the component in a span and use normal event handling
span {
onclick: move |_| counter += 1,
MatButton { label: "click me: {counter}" }
}
// option 2: use the event handlers exposed by the component to respect
// thinks like a button being disabled.
// The closure must be 'static so we make use of `to_owned!`.
MatButton {
label: "click me: {counter}",
_onclick: {
to_owned![counter];
move |_| counter += 1
},
}
}
}
Documentation
Full API documentation can be found here. Demos of components can be found here.
Modules
- Constants color definitions of the material color palette.