1
0
mirror of https://github.com/emilk/egui.git synced 2026-08-31 22:00:03 -04:00

Make it easy to panels inside of Ui:s (#629)

* Allow using the layout cursor to restrict available area

* Avoid id clashes when putting panels inside a Ui

* Panels: Propagate height/width range to inner Ui

* Allow easy placement of panels inside of Ui:s

* demo: simplify Windows with Panels demo
This commit is contained in:
Emil Ernerfeldt
2021-08-20 00:10:06 +02:00
committed by GitHub
parent ee50cca696
commit 3e2746a288
6 changed files with 164 additions and 83 deletions

View File

@@ -1,5 +1,3 @@
use egui::{menu, Align, CentralPanel, Layout, ScrollArea, SidePanel, TopBottomPanel};
#[derive(Clone, PartialEq, Default)]
#[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
pub struct WindowWithPanels {}
@@ -8,6 +6,7 @@ impl super::Demo for WindowWithPanels {
fn name(&self) -> &'static str {
"🗖 Window With Panels"
}
fn show(&mut self, ctx: &egui::CtxRef, open: &mut bool) {
use super::View;
let window = egui::Window::new("Window with Panels")
@@ -23,21 +22,12 @@ impl super::Demo for WindowWithPanels {
impl super::View for WindowWithPanels {
fn ui(&mut self, ui: &mut egui::Ui) {
let left_panel_min_width = 100.;
let left_panel_max_width = left_panel_min_width * 4.;
let bottom_height = 25.;
ui.expand_to_include_rect(ui.max_rect()); // Expand frame to include it all
let mut top_rect = ui.available_rect_before_wrap_finite();
top_rect.min.y += ui.spacing().item_spacing.y;
let mut top_ui = ui.child_ui(top_rect, Layout::top_down(Align::Max));
let top_response = TopBottomPanel::top("window_menu")
egui::TopBottomPanel::top("top_panel")
.resizable(false)
.show_inside(&mut top_ui, |ui| {
menu::bar(ui, |ui| {
menu::menu(ui, "Menu", |ui| {
.min_height(0.0)
.show_inside(ui, |ui| {
egui::menu::bar(ui, |ui| {
egui::menu::menu(ui, "Menu", |ui| {
if ui.button("Option 1").clicked() {}
if ui.button("Option 2").clicked() {}
if ui.button("Option 3").clicked() {}
@@ -45,43 +35,49 @@ impl super::View for WindowWithPanels {
});
});
let mut left_rect = ui.available_rect_before_wrap_finite();
left_rect.min.y = top_response.response.rect.max.y + ui.spacing().item_spacing.y;
let mut left_ui = ui.child_ui(left_rect, Layout::top_down(Align::Max));
egui::TopBottomPanel::bottom("bottom_panel_A")
.resizable(false)
.min_height(0.0)
.show_inside(ui, |ui| {
ui.label("Bottom Panel A");
});
let left_response = SidePanel::left("Folders")
egui::SidePanel::left("left_panel")
.resizable(true)
.min_width(left_panel_min_width)
.max_width(left_panel_max_width)
.show_inside(&mut left_ui, |ui| {
ScrollArea::auto_sized().show(ui, |ui| {
.width_range(60.0..=200.0)
.show_inside(ui, |ui| {
egui::ScrollArea::auto_sized().show(ui, |ui| {
ui.vertical(|ui| {
ui.label("Left Panel");
})
})
ui.small(crate::LOREM_IPSUM_LONG);
});
});
});
let mut right_rect = ui.available_rect_before_wrap_finite();
right_rect.min.x = left_response.response.rect.max.x;
right_rect.min.y = top_response.response.rect.max.y + ui.spacing().item_spacing.y;
let mut right_ui = ui.child_ui(right_rect, Layout::top_down(Align::Max));
egui::SidePanel::right("right_panel")
.resizable(true)
.width_range(60.0..=200.0)
.show_inside(ui, |ui| {
egui::ScrollArea::auto_sized().show(ui, |ui| {
ui.vertical(|ui| {
ui.label("Right Panel");
ui.small(crate::LOREM_IPSUM_LONG);
});
});
});
CentralPanel::default().show_inside(&mut right_ui, |ui| {
let mut rect = ui.min_rect();
let mut bottom_rect = rect;
bottom_rect.min.y = ui.max_rect_finite().max.y - bottom_height;
rect.max.y = bottom_rect.min.y - ui.spacing().indent;
let mut child_ui = ui.child_ui(rect, Layout::top_down(Align::Min));
let mut bottom_ui = ui.child_ui(bottom_rect, Layout::bottom_up(Align::Max));
ScrollArea::auto_sized().show(&mut child_ui, |ui| {
egui::TopBottomPanel::bottom("bottom_panel_B")
.resizable(false)
.min_height(0.0)
.show_inside(ui, |ui| {
ui.label("Bottom Panel B");
});
egui::CentralPanel::default().show_inside(ui, |ui| {
egui::ScrollArea::auto_sized().show(ui, |ui| {
ui.vertical(|ui| {
ui.label("Central Panel");
})
});
bottom_ui.vertical(|ui| {
ui.separator();
ui.horizontal(|ui| {
ui.label("Bottom Content");
ui.small(crate::LOREM_IPSUM_LONG);
});
});
});