docs.rs failed to build dioxus-element-plug-0.1.4
Please check the build logs for more information.
See Builds for ideas on how to fix a failed build, or Metadata for how to configure docs.rs builds.
If you believe this is docs.rs' fault, open an issue.

Dioxus Element Plug

Element UI theme-chalk components for Dioxus applications with built-in SCSS support.

This crate provides a set of UI components styled with the popular Element UI theme-chalk CSS framework, designed specifically for use with the Dioxus framework. Hosted on GitHub: pauljohn21/dioxus-element-plug

Features

🎨 Complete Element UI styling - All components use authentic theme-chalk CSS
🦀 Rust-native components - Type-safe components built for Dioxus 0.7
📦 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
🔧 Active Development - Regular updates and community contributions
🎨 SCSS Support - Built-in SCSS compilation and theme customization

Quick Start

🎉 最简单的开始方式：只需 5 分钟就能创建运行的应用！

完整的端到端示例，请看 SIMPLE_START.md。

1. Add to your Cargo.toml

For production use:

[dependencies]
dioxus = { version = "0.7", features = ["web"] }
dioxus-element-plug = "0.1.2"

Or use directly from GitHub:

dioxus-element-plug = { git = "https://github.com/pauljohn21/dioxus-element-plug.git" }

2. Add CSS to Your Application

Option A: Pre-compiled CSS (Recommended)

或者使用 Dioxus 组件方式（在 Rust 代码中动态引入）:

document::Link {
    rel: "stylesheet",
    href: "//unpkg.com/element-plus/dist/index.css"
}

你也可以指定特定版本以确保稳定性：

document::Link {
    rel: "stylesheet", 
    href: "//unpkg.com/element-plus@2.4.4/dist/index.css"
}

Option B: Custom SCSS with Manganis

For custom theming with manganis:

use manganis::asset;

static STYLES: Asset = asset!("/assets/theme-chalk.scss");

See Usage Guide for detailed instructions on both approaches.

查看 examples/with-scss-asset/ 示例了解完整用法。

关于 Dioxus 0.7 的样式支持说明：

🎉 Dioxus 0.7 支持内置 SCSS 编译 (通过 manganis asset 宏)
传统的外部 Sass 编译器方式仍然可用
两种方式都支持，开发者可以根据项目需求选择

3. Add CSS to your HTML

Add this to your index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/dist/theme-chalk.css">
</head>
<body>
    <div id="main"></div>
</body>
</html>

4. Use the components

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

fn App() -> Element {
    rsx! {
        Container {
            Header {
                h1 { "My App" }
            }
            Main {
                Row {
                    Col { span: Some(12) {
                        h2 { "Welcome!" }
                        Button {
                            variant: ButtonVariant::Primary,
                            "Click me!",
                        }
                        Input {
                            placeholder: "Enter text...",
                            size: Some(InputSize::Medium),
                        }
                    }}
                }
            }
        }
    }
}

Available Components

Layout

Container - Main container wrapper
Header - Page header
Aside - Sidebar
Main - Main content area
Footer - Page footer
Row/Col - Grid system

Form Controls

Button - Various button styles and sizes
Input - Text inputs with validation
SearchInput - Search input with icon
PasswordInput - Password input with toggle
Form - Form wrapper with layout options
FormItem - Individual form fields with validation
Select - Dropdown selection
Checkbox/Radio - Boolean selection controls
Slider - Range input with tooltip

Card & Container Components

Card - Content container with shadow options
Panel - Collapsible content panels
Box - Flexible box container with styling options
Accordion - Collapsible section groups

Alert & Notification

Alert - Important information display
Callout - Prominent information boxes
Notification - Toast-style temporary messages
Tooltip - Contextual help information

Data Display

Table - Feature-rich data tables with sorting and selection
DataList - Flexible list component with custom templates

Component Examples

Buttons

use dioxus_element_plug::components::button::*;

rsx! {
    div {
        Button { variant: ButtonVariant::Primary, "Primary" }
        Button { variant: ButtonVariant::Success, "Success" }
        Button { variant: ButtonVariant::Warning, "Warning" }
        Button { variant: ButtonVariant::Danger, "Danger" }
        OutlineButton { variant: ButtonVariant::Info, "Info Outline" }
        TextButton { "Text Button" }
    }
}

Input

use dioxus_element_plug::components::input::*;

rsx! {
    div {
        Input {
            placeholder: "Enter your name",
            size: Some(InputSize::Large),
            on_input: move |evt| println!("Input: {}", evt.value()),
        }
        PasswordInput {
            placeholder: "Password",
            clearable: true,
        }
        SearchInput {
            placeholder: "Search...",
            prefix_icon: Some("el-icon-search".to_string()),
        }
    }
}

Layout Grid

use dioxus_element_plug::components::layout::*;

rsx! {
    Container {
        Header { height: 60 {
            h1 { "My App" }
        }}
        Main {
            Row { gutter: Some(20) {
                Col { span: Some(8) {
                    p { "Column 1" }
                }}
                Col { span: Some(8) {
                    p { "Column 2" }
                }}
                Col { span: Some(8) {
                    p { "Column 3" }
                }}
            }}
        }
        Footer { height: 60 {
            p { "Footer" }
        }}
    }
}

Forms

use dioxus_element_plug::components::form::*;

rsx! {
    Form {
        layout: "horizontal".to_string(),
        
        FormItem {
            label: "Email".to_string(),
            required: true,
            
            Input {
                input_type: InputType::Email,
                placeholder: "Enter your email",
            }
        }
        
        FormItem {
            label: "Country".to_string(),
            
            Select {
                options: vec![
                    SelectOption { value: "us".to_string(), label: "United States".to_string(), disabled: false },
                    SelectOption { value: "ca".to_string(), label: "Canada".to_string(), disabled: false },
                ],
                placeholder: "Select your country",
            }
        }
    }
}

Alerts

use dioxus_element_plug::components::alert::*;

rsx! {
    Alert {
        title: "Success!".to_string(),
        description: Some("Operation completed successfully".to_string()),
        alert_type: AlertType::Success,
        closable: true,
        show_icon: true,
    }
}

Cards

use dioxus_element_plug::components::card::*;

rsx! {
    Card {
        header: Some("User Profile".to_string()),
        shadow: "hover".to_string(),
        
        div {
            h3 { "John Doe" }
            p { "Software Developer" }
        }
    }
}

Data Tables

use dioxus_element_plug::components::table::*;
use serde_json::json;

let columns = vec![
    TableColumn {
        title: "Name".to_string(),
        key: "name".to_string(),
        width: Some("200px".to_string()),
        sortable: true,
        fixed: None,
        render: None,
    },
];

let data = vec![
    json!({"name": "John Doe", "age": 30}),
    json!({"name": "Jane Smith", "age": 25}),
];

rsx! {
    Table {
        columns: columns,
        data: data,
        stripe: true,
        border: true,
    }
}

Building CSS

The theme CSS needs to be compiled from SCSS:

Prerequisites

Node.js 16+
npm or yarn

Setup and Build

# Setup (installs sass compiler)
make setup

# Build CSS
make build-css

# Watch for changes during development
make watch-css

# Full build (Rust + CSS)
make build

Development

Project Structure

dioxus-theme-chalk/
├── src/               # Rust component library
│   ├── components/    # UI components
│   └── theme.rs       # Theme constants
├── build.rs           # Build script
├── Cargo.toml         # Rust dependencies
├── Makefile          # Build automation
├── README.md         # Documentation
└── example/          # Example app (coming soon)

Working with SCSS

The original SCSS files are in the parent src/ directory. The Makefile compiles them to the dist/ directory.

To watch for changes while developing:

# Terminal 1: Watch Rust code
cargo watch -x run

# Terminal 2: Watch SCSS changes
make watch-css

Theming

This library uses the exact same CSS classes and variables as Element UI. You can customize the theme by:

Override CSS variables in your custom CSS
Modify the SCSS source before building
Use custom classes via the class prop on components

CSS Variables

Key variables you can override:

:root {
    --el-color-primary: #409eff;
    --el-font-size-base: 14px;
    --el-border-radius-base: 4px;
    /* ... */
}

License

MIT License - see LICENSE file for details.

Contributing

We welcome contributions from the community! Please feel free to submit issues and pull requests on our GitHub repository.

Development Setup

Fork the repository on GitHub

Clone your fork:

git clone https://github.com/YOUR_USERNAME/dioxus-element-plug.git
cd dioxus-element-plug

Create a feature branch:

git checkout -b feature/your-feature-name

Make your changes and test locally

Commit with a clear message:

git commit -m "feat: add new awesome feature"

Push and create a Pull Request on GitHub

GitHub Workflow

Issues: Report bugs and feature requests here
Pull Requests: Submit improvements here
Discussions: Join conversations here

We use conventional commit messages and semantic versioning. Please ensure your code follows the existing style and includes appropriate tests.

Credits

Element UI - Original design system and theme-chalk CSS
Dioxus - React-like framework for Rust
GitHub Contributors - Open source community

License

MIT License - see LICENSE file for details.

Star History

If you find this project helpful, please consider giving it a ⭐ on GitHub!

Ready to level up your Dioxus apps with beautiful Element UI styling? Start building today! 🚀

Project Status

This project is actively maintained on GitHub. Check out our:

Join the Community

Together, we're building the future of Dioxus UI development! 🎉

dioxus-element-plug 0.1.4

Dioxus Element Plug

Features

Quick Start

1. Add to your Cargo.toml

2. Add CSS to Your Application

Option A: Pre-compiled CSS (Recommended)

Option B: Custom SCSS with Manganis

3. Add CSS to your HTML

4. Use the components

Available Components

Layout

Form Controls

Card & Container Components

Alert & Notification

Data Display

Component Examples

Buttons

Input

Layout Grid

Forms

Alerts

Cards

Data Tables

Building CSS

Prerequisites

Setup and Build

Development

Project Structure

Working with SCSS

Theming

CSS Variables

License

Contributing

Development Setup

GitHub Workflow

Credits

License

Star History

Project Status

Join the Community