SplitPane

Cargo.toml

[dependencies]
egui = "0.21"
egui_extras = "0.21"
eframe = "0.21"

main.rs

use eframe::NativeOptions;
use egui_extras::Size;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let options = NativeOptions {
        default_theme: eframe::Theme::Light,
        ..NativeOptions::default()
    };

    eframe::run_native("Split panes", options, Box::new(|ctx| Box::new(PanesApp::new(ctx))))?;

    Ok(())
}

struct PanesApp {
    vertical: f32,
    horizontal: f32,
}

impl PanesApp {
    fn new(_cc: &eframe::CreationContext<'_>) -> Self {
        Self::default()
    }
}

impl Default for PanesApp {
    fn default() -> Self {
        Self {
            vertical: 250.0,
            horizontal: 100.0,
        }
    }
}

impl eframe::App for PanesApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        let central_panel = egui::CentralPanel::default();

        central_panel.show(ctx, |ui| {
            ui.visuals_mut().selection.bg_fill = egui::Color32::from_rgb(0x4D, 0x97, 0xFF);

            // save the current spacing
            let spacing = ui.spacing().item_spacing;

            // decrease the spacing between the strip cells
            ui.spacing_mut().item_spacing = [3.0, 3.0].into();

            egui_extras::StripBuilder::new(ui)
                .size(Size::exact(self.vertical))
                .size(Size::exact(2.0)) // separator
                .size(Size::remainder())
                .vertical(|mut strip| {
                    strip.strip(|builder| {
                        builder
                            .size(Size::exact(self.horizontal))
                            .size(Size::exact(2.0)) // separator
                            .size(Size::remainder())
                            .horizontal(|mut strip| {
                                strip.cell(|ui| {
                                    // restore the original spacing for the current cell
                                    ui.spacing_mut().item_spacing = spacing;

                                    ui.centered_and_justified(|ui| {
                                        ui.heading("Left");
                                    });
                                });

                                // separator cell
                                strip.cell(|ui| {
                                    let stroke = ui.visuals().widgets.noninteractive.bg_stroke;

                                    ui.painter().rect_filled(ui.available_rect_before_wrap(), 0.0, stroke.color);

                                    let layout = egui::Layout::left_to_right(egui::Align::Center)
                                        .with_cross_align(egui::Align::Center)
                                        .with_cross_justify(true);

                                    ui.with_layout(layout, |ui| {
                                        let sep = egui::Label::new("").sense(egui::Sense::drag());

                                        let r =
                                            ui.add(sep).on_hover_and_drag_cursor(egui::CursorIcon::ResizeHorizontal);

                                        if r.dragged() {
                                            self.horizontal += r.drag_delta()[0];
                                        }
                                    });
                                });

                                strip.cell(|ui| {
                                    ui.centered_and_justified(|ui| {
                                        ui.heading("Right");
                                    });
                                });
                            });
                    });

                    // separator cell
                    strip.cell(|ui| {
                        let stroke = ui.visuals().widgets.noninteractive.bg_stroke;

                        ui.painter().rect_filled(ui.available_rect_before_wrap(), 0.0, stroke.color);

                        let layout = egui::Layout::top_down_justified(egui::Align::Center)
                            .with_cross_align(egui::Align::Center)
                            .with_cross_justify(true);

                        ui.with_layout(layout, |ui| {
                            let sep = egui::Label::new("").sense(egui::Sense::drag());

                            let r = ui.add(sep).on_hover_and_drag_cursor(egui::CursorIcon::ResizeVertical);

                            if r.dragged() {
                                self.vertical += r.drag_delta()[1];
                            }
                        });
                    });

                    strip.cell(|ui| {
                        ui.centered_and_justified(|ui| {
                            ui.heading("Bottom");
                        });
                    });
                });
        });
    }
}