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
59
60
61
62
63
64
65
66
67
68
69
70
71
72

//! Stress test for `Styled::stack()` inside an auto-sizing centered area,
//! mirroring a game-over / scoreboard layout. Run with:
//! `cargo run --example stack`

use egui::{Align, Align2, Color32, Vec2};
use egui_styled::prelude::*;

fn ui(ctx: &egui::Context) {
    Styled::area()
        .id("stack_stress")
        .anchor(Align2::CENTER_CENTER, Vec2::ZERO)
        .bg(rgb(20, 20, 28))
        .padding(24.0)
        .corner_radius(8.0)
        .show(ctx, |ui| {
            Styled::column()
                .gap(8.0)
                .align(Align::Center)
                .show(ui, |ui| {
                    ui.label("scoreboard above");

                    // Offset chromatic stack.
                    Styled::stack()
                        .layer_offset(Vec2::new(-2.0, 0.0), |ui| {
                            Styled::label("[ENTER]")
                                .text_color(rgb(0, 220, 255))
                                .extend()
                                .show(ui);
                        })
                        .layer_offset(Vec2::new(2.0, 0.0), |ui| {
                            Styled::label("[ENTER]")
                                .text_color(rgb(255, 0, 200))
                                .extend()
                                .show(ui);
                        })
                        .layer(|ui| {
                            Styled::label("[ENTER]")
                                .text_color(Color32::WHITE)
                                .extend()
                                .show(ui);
                        })
                        .show(ui);

                    // Aligned overlay over a background layer.
                    Styled::stack()
                        .layer(|ui| {
                            Styled::label("BACKGROUND TEXT LAYER")
                                .text_color(rgb(60, 60, 80))
                                .extend()
                                .show(ui);
                        })
                        .layer_aligned(Align2::CENTER_CENTER, |ui| {
                            Styled::label("CENTERED")
                                .text_color(Color32::WHITE)
                                .extend()
                                .show(ui);
                        })
                        .show(ui);

                    ui.label("scoreboard below");
                });
        });
    ctx.request_repaint();
}

fn main() -> eframe::Result<()> {
    eframe::run_ui_native(
        "egui_styled - stack stress",
        eframe::NativeOptions::default(),
        |ctx, _| ui(ctx),
    )
}