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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
//! Text Styling Example
//!
//! Text carries content; how it looks is declared on an enclosing container and
//! inherited by everything below it, down to the nearest container that
//! overrides that particular property.
//!
//! Run with: cargo run --example text_styling_example
use guido::prelude::*;
fn main() {
// Set an app-level default font (widgets will use this unless overridden)
// Note: The actual font availability depends on the system
App::new()
.default_font_family(FontFamily::SansSerif)
.run(|app| {
app.add_surface(
SurfaceConfig::new()
.width(600)
.height(600)
.anchor(Anchor::TOP | Anchor::LEFT)
.background_color(Color::rgb(0.08, 0.08, 0.12)),
|| {
container()
.background(Color::rgb(0.08, 0.08, 0.12))
.padding(24.0)
.layout(Flex::column().spacing(20.0))
.child(
text("Text Styling Demo")
.font_size(28.0)
.bold()
.color(Color::rgb(0.9, 0.9, 0.95)),
)
.child(create_font_family_section())
.child(create_font_weight_section())
.child(create_combined_section())
.child(create_text_input_section())
},
);
});
}
/// A section heading — the one place its style is written.
fn heading(label: &str) -> Text {
text(label)
.font_size(16.0)
.bold()
.color(Color::rgb(0.7, 0.7, 0.8))
}
/// The card each section's samples sit in. It declares nothing about text, so
/// the colour set at the root passes straight through it.
fn card() -> Container {
container()
.padding(12.0)
.background(Color::rgb(0.12, 0.12, 0.18))
.corners(8.0)
.layout(Flex::column().spacing(8.0))
}
/// Section demonstrating different font families
fn create_font_family_section() -> Container {
let sample = |label: &'static str, family: FontFamily| {
text(label).font_family(family).color(Color::WHITE)
};
container()
.layout(Flex::column().spacing(8.0))
.child(heading("Font Families:"))
.child(
card()
.child(sample("Sans-Serif (default)", FontFamily::SansSerif))
.child(sample("Serif font family", FontFamily::Serif))
.child(sample("Monospace font family", FontFamily::Monospace))
.child(
text("Using .mono() shorthand")
.mono()
.color(Color::rgb(0.6, 0.9, 0.6)),
),
)
}
/// Section demonstrating different font weights
fn create_font_weight_section() -> Container {
let sample = |label: &'static str, weight: FontWeight| {
text(label).font_weight(weight).color(Color::WHITE)
};
container()
.layout(Flex::column().spacing(8.0))
.child(heading("Font Weights:"))
.child(
card()
.child(sample("Thin (100)", FontWeight::THIN))
.child(sample("Light (300)", FontWeight::LIGHT))
.child(sample("Normal (400)", FontWeight::NORMAL))
.child(sample("Medium (500)", FontWeight::MEDIUM))
.child(sample("Semi-Bold (600)", FontWeight::SEMI_BOLD))
.child(sample("Bold (700)", FontWeight::BOLD))
.child(
text("Using .bold() shorthand")
.bold()
.color(Color::rgb(0.9, 0.7, 0.4)),
),
)
}
/// Section demonstrating combined font family and weight
fn create_combined_section() -> Container {
container()
.layout(Flex::column().spacing(8.0))
.child(heading("Combined Styling:"))
.child(
card()
.child(
text("Bold Monospace")
.mono()
.bold()
.color(Color::rgb(0.4, 0.8, 1.0)),
)
.child(
text("Light Serif")
.font_family(FontFamily::Serif)
.font_weight(FontWeight::LIGHT)
.color(Color::rgb(0.9, 0.8, 0.7)),
)
.child(
text("Bold Serif")
.font_family(FontFamily::Serif)
.bold()
.color(Color::rgb(1.0, 0.9, 0.8)),
),
)
}
/// Section demonstrating text input with styling
///
/// The field reads the same declarations a `text` would, and says three more
/// that only it can draw: the caret, the selection band and the placeholder.
fn create_text_input_section() -> Container {
let input_value = create_signal("Type here...".to_string());
container()
.layout(Flex::column().spacing(8.0))
.child(heading("Styled Text Input:"))
.child(
container()
.padding(12.0)
.background(Color::rgb(0.15, 0.15, 0.2))
.corners(8.0)
.child(
text_input(input_value)
.mono()
.font_size(16.0)
.color(Color::rgb(0.4, 1.0, 0.6)),
),
)
}