Crate dioxus_element_plug 

Dioxus Element Plug

Element UI components for Dioxus applications with pure Rust styling system.

This crate provides a set of UI components styled with the popular Element UI theme-chalk design, designed specifically for use with the Dioxus framework. All styling is generated in pure Rust for zero runtime overhead and maximum performance.

Features

• 🎨 Pure Rust styling - Zero runtime overhead with compile-time CSS generation
• 🦀 Rust-native components - Type-safe components built for Dioxus
• 📦 Ready to use - Components work out of the box with proper styling
• 🎯 Consistent API - Intuitive props and events matching Dioxus patterns
• 📱 Responsive design - Mobile-friendly components with flexible grid system
• 🔥 Tree-shaking friendly - Only include styles for components you use
• ⚡ Zero dependencies - No SCSS compilation required at runtime

Usage

Basic Usage with Pure Rust Styling

use dioxus::prelude::*;
use dioxus_element_plug::prelude::*;
use dioxus_element_plug::style_system::CompleteStyleManager;

fn App() -> Element {
    // Generate styles for specific components
    let styles = CompleteStyleManager::new()
        .generate_styles_for_components(&["button", "input", "alert"]);

    rsx! {
        style { "{styles}" }
         
        div {
            Button {
                variant: ButtonVariant::Primary,
                "Click me!"
            }
             
            Input {
                placeholder: "Enter text...",
                size: Some(InputSize::Medium),
            }
        }
    }
}

Generate Complete Stylesheet

use dioxus::prelude::*;
use dioxus_element_plug::prelude::*;

fn App() -> Element {
    // Generate complete Element Plus styles
    let complete_styles = CompleteStyleManager::new()
        .generate_complete_styles();

    rsx! {
        style { "{complete_styles}" }
         
        // Use any Element Plus component
        Button {
            variant: ButtonVariant::Primary,
            "Primary Button"
        }
         
        Alert {
            title: "Success!".to_string(),
            alert_type: AlertType::Success,
        }
    }
}

Re-exports

pub use style_system::Theme;

pub use style_system::CompleteStyleManager;

pub use style_system::CompleteCssBuilder;

pub use crate::styles::prelude::*;

pub use components::*;

Modules

components

Re-export commonly used components Component modules for Element Plus Dioxus integration Auto-generated module declarations

prelude

Prelude module for easy importing

style_system

Pure Rust CSS generation system - zero runtime overhead styling solution 🎨 最完整的 Element Plus 纯 Rust 样式系统

styles

Modular Element Plus style system (SCSS to Rust converted)