revue 2.71.1

A Vue-style TUI framework for Rust with CSS styling
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

//! CSS Features Showcase
//!
//! Demonstrates all CSS features supported by revue:
//! - Named colors (50+), HSL, hex, rgb
//! - CSS variables with fallback
//! - text-align, font-weight, text-decoration
//! - overflow, flex-wrap, align-self, order
//! - Border shorthand, nth-child selectors
//!
//! Run: `cargo run --example css_features`

use revue::prelude::*;

const CSS: &str = r#"
:root {
    --primary: hsl(220, 90%, 56%);
    --success: #a6e3a1;
    --warning: orange;
    --error: crimson;
    --bg: #1e1e2e;
    --surface: #313244;
}

.title {
    text-align: center;
    font-weight: bold;
    color: var(--primary);
}

.card {
    border: rounded;
    border-color: var(--primary);
}

.success { color: var(--success); }
.warning { color: var(--warning); }
.error { color: var(--error); }

.muted {
    color: slategray;
    opacity: 0.8;
}

.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.bold { font-weight: bold; }

.right-align { text-align: right; }
.center { text-align: center; }
"#;

struct CssShowcase;

impl View for CssShowcase {
    fn render(&self, ctx: &mut RenderContext) {
        vstack()
            .gap(1)
            // Title
            .child(Text::new("CSS Features Showcase").class("title"))
            .child(Divider::new())
            // Colors section
            .child(
                Border::rounded().title("Named Colors & HSL").child(
                    vstack()
                        .child(Text::new("success: green").class("success"))
                        .child(Text::new("warning: orange").class("warning"))
                        .child(Text::new("error: crimson").class("error"))
                        .child(Text::new("muted: slategray").class("muted")),
                ),
            )
            // Text styling
            .child(
                Border::rounded().title("Text Styling").child(
                    vstack()
                        .child(Text::new("Bold text").class("bold"))
                        .child(Text::new("Underlined text").class("underline"))
                        .child(Text::new("Strikethrough text").class("strikethrough"))
                        .child(Text::new("Right-aligned").class("right-align"))
                        .child(Text::new("Centered").class("center")),
                ),
            )
            // Variables with fallback
            .child(
                Border::rounded().title("CSS Variables").child(
                    vstack()
                        .child(Text::new("var(--primary) = blue"))
                        .child(Text::new("var(--undefined, orange) = fallback")),
                ),
            )
            .child(Text::info("Press 'q' to quit").class("center"))
            .render(ctx);
    }

    fn meta(&self) -> WidgetMeta {
        WidgetMeta::new("CssShowcase")
    }
}

fn main() -> Result<()> {
    App::builder()
        .css(CSS)
        .build()
        .run(CssShowcase, |event, _view, _app| {
            if let Event::Key(KeyEvent {
                key: Key::Char('q'),
                ..
            }) = event
            {
                std::process::exit(0);
            }
            false
        })
}