mirror of
https://github.com/emilk/egui.git
synced 2026-09-03 23:30:04 -04:00
0b0c561a81
## Before: <img width="381" height="307" alt="image" src="https://github.com/user-attachments/assets/0528ae2a-44bf-4d9e-89a4-c3f4ab438eb2" /> It is very hard here to realize this is a scrollable area ## After <img width="383" height="310" alt="image" src="https://github.com/user-attachments/assets/9e0ee6de-8b96-4e5c-a505-f57977010990" /> The fade at the bottom tells the user they should try scrolling. You can turn if off with `style.spacing.scroll.fade.enabled`
122 lines
5.0 KiB
Rust
122 lines
5.0 KiB
Rust
use egui::{Color32, TextStyle};
|
|
use egui_extras::{Size, StripBuilder};
|
|
|
|
/// Shows off a table with dynamic layout
|
|
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
|
|
#[derive(Default)]
|
|
pub struct StripDemo {}
|
|
|
|
impl crate::Demo for StripDemo {
|
|
fn name(&self) -> &'static str {
|
|
"▣ Strip"
|
|
}
|
|
|
|
fn show(&mut self, ui: &mut egui::Ui, open: &mut bool) {
|
|
egui::Window::new(self.name())
|
|
.open(open)
|
|
.resizable(true)
|
|
.default_width(400.0)
|
|
.constrain_to(ui.available_rect_before_wrap())
|
|
.show(ui, |ui| {
|
|
use crate::View as _;
|
|
self.ui(ui);
|
|
});
|
|
}
|
|
}
|
|
|
|
impl crate::View for StripDemo {
|
|
fn ui(&mut self, ui: &mut egui::Ui) {
|
|
let dark_mode = ui.visuals().dark_mode;
|
|
let faded_color = ui.stack().bg_color();
|
|
let faded_color = |color: Color32| -> Color32 {
|
|
use egui::Rgba;
|
|
let t = if dark_mode { 0.95 } else { 0.8 };
|
|
egui::lerp(Rgba::from(color)..=Rgba::from(faded_color), t).into()
|
|
};
|
|
|
|
let body_text_size = TextStyle::Body.resolve(ui.style()).size;
|
|
StripBuilder::new(ui)
|
|
.size(Size::exact(50.0))
|
|
.size(Size::remainder())
|
|
.size(Size::relative(0.5).at_least(60.0))
|
|
.size(Size::exact(body_text_size))
|
|
.vertical(|mut strip| {
|
|
strip.cell(|ui| {
|
|
ui.painter().rect_filled(
|
|
ui.available_rect_before_wrap(),
|
|
0.0,
|
|
faded_color(Color32::BLUE),
|
|
);
|
|
ui.label("width: 100%\nheight: 50px");
|
|
});
|
|
strip.strip(|builder| {
|
|
builder.sizes(Size::remainder(), 2).horizontal(|mut strip| {
|
|
strip.cell(|ui| {
|
|
ui.painter().rect_filled(
|
|
ui.available_rect_before_wrap(),
|
|
0.0,
|
|
faded_color(Color32::RED),
|
|
);
|
|
ui.label("width: 50%\nheight: remaining");
|
|
});
|
|
strip.strip(|builder| {
|
|
builder.sizes(Size::remainder(), 3).vertical(|mut strip| {
|
|
strip.empty();
|
|
strip.cell(|ui| {
|
|
ui.painter().rect_filled(
|
|
ui.available_rect_before_wrap(),
|
|
0.0,
|
|
faded_color(Color32::YELLOW),
|
|
);
|
|
ui.label("width: 50%\nheight: 1/3 of the red region");
|
|
});
|
|
strip.empty();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
strip.strip(|builder| {
|
|
builder
|
|
.size(Size::remainder())
|
|
.size(Size::exact(120.0))
|
|
.size(Size::remainder())
|
|
.size(Size::exact(70.0))
|
|
.horizontal(|mut strip| {
|
|
strip.empty();
|
|
strip.strip(|builder| {
|
|
builder
|
|
.size(Size::remainder())
|
|
.size(Size::exact(60.0))
|
|
.size(Size::remainder())
|
|
.vertical(|mut strip| {
|
|
strip.empty();
|
|
strip.cell(|ui| {
|
|
ui.painter().rect_filled(
|
|
ui.available_rect_before_wrap(),
|
|
0.0,
|
|
faded_color(Color32::GOLD),
|
|
);
|
|
ui.label("width: 120px\nheight: 60px");
|
|
});
|
|
});
|
|
});
|
|
strip.empty();
|
|
strip.cell(|ui| {
|
|
ui.painter().rect_filled(
|
|
ui.available_rect_before_wrap(),
|
|
0.0,
|
|
faded_color(Color32::GREEN),
|
|
);
|
|
ui.label("width: 70px\n\nheight: 50%, but at least 60px.");
|
|
});
|
|
});
|
|
});
|
|
strip.cell(|ui| {
|
|
ui.vertical_centered(|ui| {
|
|
ui.add(crate::egui_github_link_file!());
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|