egui_styled 0.5.3

Tailwind-style utility styling for egui: per-widget hover/focus/active variants, design tokens, and composable style functions.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

use egui::{CentralPanel, Color32};
use egui_styled::prelude::*;

fn basic_example(ui: &mut egui::Ui) {
    ui.heading("egui styled - Basic Demo");

    Styled::frame()
        .bg(rgb(35, 35, 35))
        .corner_radius(8.0)
        .padding(16.0)
        .border(1.0, rgb(60, 60, 60))
        .show(ui, |ui| {
            ui.label("This is inside a Styled::frame()");
            ui.label("Note the custom background, rounding, and border.");

            ui.add_space(8.0);

            let clicked = Styled::button("Primary Action")
                .bg(rgb(60, 60, 255))
                .hover_bg(rgb(90, 90, 255))
                .text_color(Color32::WHITE)
                .corner_radius(4.0)
                .full_width()
                .show(ui)
                .clicked();

            if clicked {
                println!("Primary action clicked!");
            }
        });

    ui.add_space(20.0);

    for i in 1..=3 {
        Styled::button(format!("List Item {}", i))
            .bg(Color32::TRANSPARENT)
            .border(1.0, rgb(100, 100, 100))
            .margin_top(8.0)
            .show(ui);
    }

    ui.add_space(20.0);

    ui.group(|ui| {
        ui.label("Raw egui Group:");
        if ui.button("Standard egui Button").clicked() {}
    });
}

fn main() -> eframe::Result<()> {
    eframe::run_ui_native(
        "egui_styled basic",
        eframe::NativeOptions::default(),
        |ctx, _| {
            CentralPanel::default().show_inside(ctx, basic_example);
        },
    )
}