Expand description
§egui_alignments
Simple alignment tools for egui
§Example Usage
§Align a single widget
use egui::{Button, Label};
use egui_alignments::Alignable;
Label::new("This label will be shown at the top")
.top(ui);
if Button::new("This label will be shown at the center")
.center(ui)
.clicked()
{
println!("Center button clicked!");
}
Label::new("This label will be shown at the bottom")
.bottom(ui);§Align multiple widgets
The following buttons will be shown at the center of the screen horizontally with the tip text above and click results below.
use egui::{Button, Widget};
use egui_alignments::{center_horizontal, center_vertical};
let mut clicked_button = None;
center_vertical(ui, |ui| {
ui.label("Click a button");
ui.add_space(20.0);
center_horizontal(ui, |ui| {
for i in 1..=10 {
if Button::new(format!("Button {}", i))
.ui(ui)
.clicked()
{
clicked_button = Some(i);
}
}
});
ui.add_space(20.0);
if let Some(i) = clicked_button {
ui.label(format!("You clicked button {}", i));
};
});§Use containers
Sometimes nested calls to alignment functions like center_horizontal, top_vertical, …
may cause layout confusion due to interaction between inner and outer layouts.
To prevent inner layouts from disrupting the outer ones, you may use containers for inner layouts
Containers only cares about its inner alignments and act like a simple widget in the outer layout
The following is an example usage of containers
use egui::Align;
use egui_alignments::{center_horizontal, column, row};
center_horizontal(ui, |ui| {
ui.image("path/to/left/image");
column(ui, Align::Center, |ui| {
ui.label("top of right text");
row(ui, Align::Center, |ui| {
ui.label("left");
ui.label("middle");
ui.label("right");
});
ui.label("bottom of right text");
});
});This will show an image on the left, and a column of text on the right which contains a row of three labels in the middle.
§Use stretches
Sometimes you may want to make a widget stretch to fill the remaining space between widgets instead of besides them in a container.
Use stretch to achieve this.
use egui::Align;
use egui_alignments::{column, stretch};
column(ui, Align::Center, |ui| {
ui.label("Top");
stretch(ui);
ui.label("Bottom");
});If you want to have stretches with different sizes, you may use stretch_with_weight.
use egui::Align;
use egui_alignments::{column, stretch_with_weight};
column(ui, Align::Center, |ui| {
ui.label("100% height");
stretch_with_weight(ui, 1.0);
ui.label("75% height");
stretch_with_weight(ui, 3.0);
ui.label("0% height");
});