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

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

#[derive(Default)]
struct App {
    name: String,
    password: String,
    bio: String,
}

impl eframe::App for App {
    fn ui(&mut self, ui: &mut egui::Ui, _: &mut eframe::Frame) {
        CentralPanel::default().show(ui, |ui| {
            ui.heading("StyledTextEdit demo");

            Styled::frame()
                .bg(rgb(30, 30, 30))
                .corner_radius(8.0)
                .padding(16.0)
                .show(ui, |ui| {
                    ui.label("Name");
                    Styled::text_edit(&mut self.name)
                        .hint("Jane Doe")
                        .bg(rgb(45, 45, 45))
                        .text_color(Color32::WHITE)
                        .border(1.0, rgb(70, 70, 70))
                        .focus_border(2.0, rgb(80, 140, 255))
                        .corner_radius(4.0)
                        .full_width()
                        .margin_bottom(8.0)
                        .show(ui);

                    ui.label("Password");
                    Styled::text_edit(&mut self.password)
                        .password()
                        .hint("••••••")
                        .bg(rgb(45, 45, 45))
                        .text_color(Color32::WHITE)
                        .border(1.0, rgb(70, 70, 70))
                        .focus_border(2.0, rgb(80, 140, 255))
                        .corner_radius(4.0)
                        .full_width()
                        .margin_bottom(8.0)
                        .show(ui);

                    ui.label("Bio");
                    Styled::text_edit(&mut self.bio)
                        .multiline()
                        .hint("Tell us about yourself...")
                        .bg(rgb(45, 45, 45))
                        .text_color(Color32::WHITE)
                        .border(1.0, rgb(70, 70, 70))
                        .focus_border(2.0, rgb(80, 140, 255))
                        .corner_radius(4.0)
                        .full_width()
                        .show(ui);
                });
        });
    }
}

fn main() -> eframe::Result<()> {
    eframe::run_native(
        "egui_styled text_edit",
        eframe::NativeOptions::default(),
        Box::new(|_| Ok(Box::new(App::default()))),
    )
}