Crates.io | dioxus-class |
lib.rs | dioxus-class |
version | 0.7.0 |
source | src |
created_at | 2023-02-21 04:58:37.627404 |
updated_at | 2024-04-09 12:14:42.595335 |
description | Dioxus class |
homepage | https://github.com/edger-dev/dioxus-class |
repository | https://github.com/edger-dev/dioxus-class |
max_upload_size | |
id | 790380 |
size | 9,966 |
Most dioxus samples are using plain strings for classes, e.g.
button {
class: "inline-flex border-0 py-1 px-3 focus:outline-none hover:bg-gray-700",
"Button"
RightArrowIcon {}
}
This is the common way in web development, it's very powerful, but not providing any checks, typos in the classes will be hard to notice.
To support a certain CSS framework, Simple CSS values are defined as string constants, modifiers like hover:
are defined as functions, then you can write the previous example as following:
button {
class: class!(inline_flex border_0 py_1 px_3 focus(outline_none) hover(bg_gray_700)),
"Button"
RightArrowIcon {}
}
It looks very clean, and show the original values clearly, most importantly, the compiler will catch any typo now.
check dioxus-tailwindcss for more details.
To create constants for your custom css, or creating a crate for existing frameworks, constants are created for compile time check.
Since css use -
as separator, macros are provided to generate rust const for them by replacing -
to _
These macros are accessable in dioxus_class::ext::*
;
constant!(btn success);
constant!(btn warning);
Will be expanded to:
pub const btn_success: &'static str = "btn-success";
pub const btn_warning: &'static str = "btn-warning";
There are many similar value groups, which is not easy to define manually, simple macro rules can be created to make this easier.
#[macro_export]
macro_rules! colors {
( $( $prefix:ident )* ) => {
constant!($( $prefix )* inherit);
constant!($( $prefix )* current);
constant!($( $prefix )* transparent);
constant!($( $prefix )* black);
constant!($( $prefix )* white);
constant!($( $prefix )* slate 50);
constant!($( $prefix )* slate 100);
constant!($( $prefix )* slate 200);
constant!($( $prefix )* slate 300);
constant!($( $prefix )* slate 400);
constant!($( $prefix )* slate 500);
constant!($( $prefix )* slate 600);
constant!($( $prefix )* slate 700);
constant!($( $prefix )* slate 800);
constant!($( $prefix )* slate 900);
constant!($( $prefix )* gray 50);
constant!($( $prefix )* gray 100);
constant!($( $prefix )* gray 200);
constant!($( $prefix )* gray 300);
constant!($( $prefix )* gray 400);
constant!($( $prefix )* gray 500);
constant!($( $prefix )* gray 600);
constant!($( $prefix )* gray 700);
constant!($( $prefix )* gray 800);
constant!($( $prefix )* gray 900);
...
}
}
// https://tailwindcss.com/docs/border-color
colors!(border);
colors!(border x);
colors!(border y);
colors!(border t);
colors!(border r);
colors!(border b);
colors!(border l);
Since tailwindcss need to get all used values, when using class!
, the default build process is not working.
Check BUILD.md for how to handle this process.