Created
August 20, 2025 17:57
-
-
Save Omustardo/8fdd2e8234548feb16cecb8e3c14a774 to your computer and use it in GitHub Desktop.
making a text label match the width of another
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated with https://claude.ai/public/artifacts/f8a4ae9b-7ad9-48bc-b867-f5e6652e9287 | |
| use eframe::egui; | |
| use egui::{Color32, RichText}; | |
| pub struct MyApp { | |
| text_input1: String, | |
| text_input2: String, | |
| text_input3: String, | |
| } | |
| impl Default for MyApp { | |
| fn default() -> Self { | |
| Self { | |
| text_input1: String::new(), | |
| text_input2: String::new(), | |
| text_input3: String::new(), | |
| } | |
| } | |
| } | |
| impl eframe::App for MyApp { | |
| fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) { | |
| egui::CentralPanel::default().show(ctx, |ui| { | |
| ui.heading("Label Background Width Demo"); | |
| ui.add_space(20.0); | |
| // Option 1: Using Button | |
| ui.label("Option 1: Using Button"); | |
| let text_edit1 = egui::TextEdit::singleline(&mut self.text_input1) | |
| .horizontal_align(egui::Align::Center) | |
| .vertical_align(egui::Align::Center); | |
| let label_button = egui::Button::new( | |
| RichText::new("A") | |
| .color(Color32::RED) | |
| .text_style(egui::TextStyle::Body) | |
| ) | |
| .fill(Color32::BLACK) | |
| .sense(egui::Sense::hover()); // Make it non-clickable | |
| ui.add_sized([150.0, 30.0], text_edit1); | |
| ui.add_sized([150.0, 20.0], label_button); | |
| ui.add_space(30.0); | |
| // Option 2: Using Frame with Label inside | |
| ui.label("Option 2: Using Frame with Label"); | |
| let text_edit2 = egui::TextEdit::singleline(&mut self.text_input2) | |
| .horizontal_align(egui::Align::Center) | |
| .vertical_align(egui::Align::Center); | |
| ui.add_sized([150.0, 30.0], text_edit2); | |
| ui.allocate_ui_with_layout( | |
| [150.0, 20.0].into(), | |
| egui::Layout::centered_and_justified(egui::Direction::LeftToRight), | |
| |ui| { | |
| egui::Frame::new() | |
| .fill(Color32::BLACK) | |
| .show(ui, |ui| { | |
| ui.label( | |
| RichText::new("A") | |
| .color(Color32::RED) | |
| .text_style(egui::TextStyle::Body) | |
| ); | |
| }); | |
| } | |
| ); | |
| ui.add_space(30.0); | |
| // Option 3: Custom painting | |
| ui.label("Option 3: Custom Painting"); | |
| let text_edit3 = egui::TextEdit::singleline(&mut self.text_input3) | |
| .horizontal_align(egui::Align::Center) | |
| .vertical_align(egui::Align::Center); | |
| ui.add_sized([150.0, 30.0], text_edit3); | |
| let (rect, _) = ui.allocate_exact_size([150.0, 20.0].into(), egui::Sense::hover()); | |
| ui.painter().rect_filled(rect, 0.0, Color32::BLACK); | |
| ui.painter().text( | |
| rect.center(), | |
| egui::Align2::CENTER_CENTER, | |
| "A", | |
| egui::FontId::new(14.0, egui::FontFamily::Proportional), | |
| Color32::RED, | |
| ); | |
| ui.add_space(20.0); | |
| ui.separator(); | |
| ui.label("All three options should show the red 'A' with black background extending the full width"); | |
| }); | |
| } | |
| } | |
| fn main() -> Result<(), eframe::Error> { | |
| let options = eframe::NativeOptions { | |
| viewport: egui::ViewportBuilder::default().with_inner_size([400.0, 400.0]), | |
| ..Default::default() | |
| }; | |
| eframe::run_native( | |
| "Background Width Demo", | |
| options, | |
| Box::new(|_cc| Ok(Box::new(MyApp::default()))), | |
| ) | |
| } |
Author
Omustardo
commented
Aug 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment