Skip to content

edger-dev/dioxus-class

Repository files navigation

When using dioxus for GUI development, by default plain strings are used for CSS class, which is not ideal IMO, there is no compile time validation, and also the auto completion is only text based, and it's not easy to reuse class constants.

Class type been provided, which is just a wrapper struct around Vec<String>, some basic From<> and Add<> implementation make it easier to be used.

constant! macro for easier definition for css values, e.g.

constant!(table column group);

will be transformed to:

pub const table_column_group: &'static str = "table-column-group";

class! macro provided for easier definition using string constants, e.g.

rsx! {
    div {
        class: class!(card_body text_center items_center hover(scale_105)),
        div {
            class: class!(card_title text_sm text_base_content),
            "text"
        }
    }
}

Defined constants and modifiers for tailwindcss

Defined constants and modifiers for daisyui

Open web app in new tab

Search emoji by shortcode, built as demo project.

Build All Used CSS Classes

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •