egui_styled 0.4.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

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));
                }
            });
        });
}

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