diff --git a/crates/egui_demo_app/src/backend_panel.rs b/crates/egui_demo_app/src/backend_panel.rs index 51225587..2176d57a 100644 --- a/crates/egui_demo_app/src/backend_panel.rs +++ b/crates/egui_demo_app/src/backend_panel.rs @@ -305,6 +305,7 @@ fn integration_ui(ui: &mut egui::Ui, _frame: &mut eframe::Frame) { Some(egui::vec2(375.0, 667.0)), "📱 iPhone SE 2nd Gen", ); + ui.selectable_value(&mut size, Some(egui::vec2(393.0, 852.0)), "📱 iPhone 15"); ui.selectable_value( &mut size, Some(egui::vec2(1280.0, 720.0)), diff --git a/crates/egui_demo_lib/src/demo/code_example.rs b/crates/egui_demo_lib/src/demo/code_example.rs index 6786e55a..8e109ca4 100644 --- a/crates/egui_demo_lib/src/demo/code_example.rs +++ b/crates/egui_demo_lib/src/demo/code_example.rs @@ -15,51 +15,92 @@ impl Default for CodeExample { impl CodeExample { fn samples_in_grid(&mut self, ui: &mut egui::Ui) { - show_code(ui, r#"ui.heading("Code samples");"#); - ui.heading("Code samples"); + // Note: we keep the code narrow so that the example fits on a mobile screen. + + let Self { name, age } = self; // for brevity later on + + show_code(ui, r#"ui.heading("Example");"#); + ui.heading("Example"); ui.end_row(); show_code( ui, r#" - // Putting things on the same line using ui.horizontal: ui.horizontal(|ui| { - ui.label("Your name: "); - ui.text_edit_singleline(&mut self.name); + ui.label("Name"); + ui.text_edit_singleline(name); });"#, ); // Putting things on the same line using ui.horizontal: ui.horizontal(|ui| { - ui.label("Your name: "); - ui.text_edit_singleline(&mut self.name); + ui.label("Name"); + ui.text_edit_singleline(name); }); ui.end_row(); show_code( ui, - r#"ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));"#, + r#" + ui.add( + egui::DragValue::new(age) + .clamp_range(0..=120) + .suffix(" years"), + );"#, + ); + ui.add( + egui::DragValue::new(age) + .clamp_range(0..=120) + .suffix(" years"), ); - ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age")); ui.end_row(); show_code( ui, r#" if ui.button("Increment").clicked() { - self.age += 1; + *age += 1; }"#, ); if ui.button("Increment").clicked() { - self.age += 1; + *age += 1; } ui.end_row(); + show_code(ui, r#"ui.label(format!("{name} is {age}"));"#); + ui.label(format!("{name} is {age}")); + ui.end_row(); + } + + fn code(&mut self, ui: &mut egui::Ui) { show_code( ui, - r#"ui.label(format!("Hello '{}', age {}", self.name, self.age));"#, + r" +pub struct CodeExample { + name: String, + age: u32, +} + +impl CodeExample { + fn ui(&mut self, ui: &mut egui::Ui) { + // Saves us from writing `&mut self.name` etc + let Self { name, age } = self;", ); - ui.label(format!("Hello '{}', age {}", self.name, self.age)); - ui.end_row(); + + ui.horizontal(|ui| { + let font_id = egui::TextStyle::Monospace.resolve(ui.style()); + let indentation = 8.0 * ui.fonts(|f| f.glyph_width(&font_id, ' ')); + let item_spacing = ui.spacing_mut().item_spacing; + ui.add_space(indentation - item_spacing.x); + + egui::Grid::new("code_samples") + .striped(true) + .num_columns(2) + .show(ui, |ui| { + self.samples_in_grid(ui); + }); + }); + + crate::rust_view_ui(ui, " }\n}"); } } @@ -72,9 +113,9 @@ impl super::Demo for CodeExample { use super::View; egui::Window::new(self.name()) .open(open) - .default_size([800.0, 400.0]) - .vscroll(false) - .hscroll(true) + .min_width(375.0) + .default_size([390.0, 500.0]) + .scroll2(false) .resizable([true, false]) .show(ctx, |ui| self.ui(ui)); } @@ -82,42 +123,11 @@ impl super::Demo for CodeExample { impl super::View for CodeExample { fn ui(&mut self, ui: &mut egui::Ui) { - ui.vertical_centered(|ui| { - ui.add(crate::egui_github_link_file!()); + ui.scope(|ui| { + ui.spacing_mut().item_spacing = egui::vec2(8.0, 8.0); + self.code(ui); }); - crate::rust_view_ui( - ui, - r" -pub struct CodeExample { - name: String, - age: u32, -} - -impl CodeExample { - fn ui(&mut self, ui: &mut egui::Ui) { -" - .trim(), - ); - - ui.horizontal(|ui| { - let font_id = egui::TextStyle::Monospace.resolve(ui.style()); - let indentation = 8.0 * ui.fonts(|f| f.glyph_width(&font_id, ' ')); - let item_spacing = ui.spacing_mut().item_spacing; - ui.add_space(indentation - item_spacing.x); - - egui::Grid::new("code_samples") - .striped(true) - .num_columns(2) - .min_col_width(16.0) - .spacing([16.0, 8.0]) - .show(ui, |ui| { - self.samples_in_grid(ui); - }); - }); - - crate::rust_view_ui(ui, " }\n}"); - ui.separator(); crate::rust_view_ui(ui, &format!("{self:#?}")); @@ -129,6 +139,12 @@ impl CodeExample { theme.ui(ui); theme.store_in_memory(ui.ctx()); }); + + ui.separator(); + + ui.vertical_centered(|ui| { + ui.add(crate::egui_github_link_file!()); + }); } } diff --git a/crates/egui_demo_lib/src/demo/demo_app_windows.rs b/crates/egui_demo_lib/src/demo/demo_app_windows.rs index 505e938d..0910df4e 100644 --- a/crates/egui_demo_lib/src/demo/demo_app_windows.rs +++ b/crates/egui_demo_lib/src/demo/demo_app_windows.rs @@ -52,6 +52,15 @@ impl Default for Demos { impl Demos { pub fn from_demos(demos: Vec>) -> Self { let mut open = BTreeSet::new(); + + // Explains egui very well + open.insert( + super::code_example::CodeExample::default() + .name() + .to_owned(), + ); + + // Shows off the features open.insert( super::widget_gallery::WidgetGallery::default() .name()