egui_styled 0.7.0

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

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

fn containers_example(ui: &mut egui::Ui) {
    ui.heading("Containers Demo");
    ui.add_space(12.0);

    Styled::column()
        .gap(8.0)
        .bg(rgb(28, 28, 32))
        .corner_radius(8.0)
        .padding(16.0)
        .border(1.0, rgb(60, 60, 70))
        .show(ui, |ui| {
            ui.label("Outer column: gap=8, padded, bordered.");

            Styled::row().gap(12.0).show(ui, |ui| {
                for label in ["One", "Two", "Three"] {
                    Styled::button(label)
                        .bg(rgb(50, 50, 80))
                        .hover_bg(rgb(70, 70, 110))
                        .text_color(Color32::WHITE)
                        .corner_radius(4.0)
                        .show(ui);
                }
            });

            Styled::row()
                .gap(8.0)
                .bg(rgb(40, 40, 50))
                .corner_radius(6.0)
                .padding(10.0)
                .show(ui, |ui| {
                    ui.label("Styled row with its own bg+padding:");
                    Styled::button("Action")
                        .bg(rgb(80, 140, 90))
                        .text_color(Color32::WHITE)
                        .corner_radius(4.0)
                        .show(ui);
                });

            Styled::column().gap(4.0).show(ui, |ui| {
                for i in 1..=3 {
                    ui.label(format!("Nested column item {}", i));
                }
            });

            ui.separator();
            ui.label("space_between — pins children to opposite edges:");

            // [Left] ........ [Right] — measured, so nothing overflows.
            Styled::row()
                .full_width()
                .bg(rgb(40, 40, 50))
                .corner_radius(6.0)
                .padding(8.0)
                .space_between()
                .item(|ui| {
                    Styled::label("Left").text_color(Color32::WHITE).show(ui);
                })
                .item(|ui| {
                    Styled::label("Right").text_color(Color32::WHITE).show(ui);
                })
                .show(ui);

            ui.separator();
            ui.label("Percentage sizing — width_pct(50).max_width(200):");

            // Two cards: each 50% wide, capped at 200px. Responsive as window resizes.
            Styled::row().gap(8.0).show(ui, |ui| {
                for label in ["Card A", "Card B"] {
                    Styled::frame()
                        .width_pct(50.0)
                        .max_width(200.0)
                        .bg(rgb(50, 60, 90))
                        .corner_radius(6.0)
                        .padding(12.0)
                        .show(ui, |ui| {
                            ui.label(label);
                        });
                }
            });
        });
}

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