Code Monkey home page Code Monkey logo

egui_dock's Introduction

egui_dock: docking support for egui

Credit goes to @Iain-dono for implementing the actual library.

This fork aims to provide documentation and further development if necessary.

Demo

demo

Usage

First, create your context type and your tab widget:

use egui::{Frame, Ui, style::Margin};
use egui_dock::Tab;

struct MyContext;

struct MyTab {
    text: String,
}

impl MyTab {
    fn new(text: impl ToString) -> Self {
        Self {
            text: text.to_string(),
        }
    }
}

impl Tab<MyContext> for MyTab {
    fn title(&self) -> &str {
        &self.title
    }

    fn ui(&mut self, ui: &mut Ui, _ctx: &mut MyContext) {
        let margin = Margin::same(4.0);

        Frame::none().inner_margin(margin).show(ui, |ui| {
            ui.label(&self.text);
        });
    }
}

Then construct the initial tree using your tab widget:

use egui_dock::{NodeIndex, Tree};

let tab1 = Box::new(MyTab::new("Tab 1"));
let tab2 = Box::new(MyTab::new("Tab 2"));
let tab3 = Box::new(MyTab::new("Tab 3"));
let tab4 = Box::new(MyTab::new("Tab 4"));
let tab5 = Box::new(MyTab::new("Tab 5"));

let mut tree = Tree::new(vec![tab1, tab2]);

// You can modify the tree in runtime
let [a, b] = tree.split_left(NodeIndex::root(), 0.3, vec![tab3]);
let [_, _] = tree.split_below(a, 0.7, vec![tab4]);
let [_, _] = tree.split_below(b, 0.5, vec![tab5]);

Finally, you can show the tree.

let id = ui.id();
egui_dock::show(&mut ui, id, style, tree, context);

Contribution

Feel free to open issues and pull requests.

egui_dock's People

Contributors

adanos020 avatar lain-dono avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.