Skip to main content

egui_material3/
lib.rs

1//! # egui-material3
2//!
3//! A comprehensive Material Design 3 component library for [egui](https://github.com/emilk/egui),
4//! providing a complete set of Material Design components with advanced theming support.
5//!
6//! ## Features
7//!
8//! - **Complete Material Design 3 Components**: Buttons, checkboxes, sliders, dialogs, data tables, and more
9//! - **Advanced Theming System**: Support for light/dark modes, contrast levels, and custom Material Design themes
10//! - **Build-time Theme Inclusion**: Automatically include theme JSON files at compile time for optimal performance
11//! - **Runtime Theme Loading**: Load and switch themes dynamically at runtime
12//! - **Material Design Icons**: Full support for Material Symbols with built-in icon font loading
13//! - **Responsive Design**: Components adapt to different screen sizes and orientations
14//!
15//! ## Quick Start
16//!
17//! Add this to your `Cargo.toml`:
18//! ```bash
19//! $ cargo add egui-material3
20//! ```
21//!
22//! ### Basic Usage
23//!
24//! ```rust,no_run
25//! use eframe::egui;
26//! use egui_material3::{
27//!     MaterialButton, MaterialCheckbox, MaterialSlider,
28//!     theme::{setup_google_fonts, setup_local_fonts, setup_local_theme,
29//!            load_fonts, load_themes, update_window_background}
30//! };
31//!
32//! fn main() -> Result<(), eframe::Error> {
33//!     let options = eframe::NativeOptions {
34//!         viewport: egui::ViewportBuilder::default().with_inner_size([800.0, 600.0]),
35//!         ..Default::default()
36//!     };
37//!     
38//!     eframe::run_native(
39//!         "Material Design App",
40//!         options,
41//!         Box::new(|cc| {
42//!             // Setup Material Design fonts and themes
43//!             setup_google_fonts(Some("Roboto"));
44//!             setup_local_fonts(Some("resources/MaterialSymbolsOutlined.ttf"));
45//!             setup_local_theme(None); // Use default theme
46//!             
47//!             // Load fonts and themes
48//!             load_fonts(&cc.egui_ctx);
49//!             load_themes();
50//!             
51//!             // Apply theme background
52//!             update_window_background(&cc.egui_ctx);
53//!             
54//!             Ok(Box::<MyApp>::default())
55//!         }),
56//!     )
57//! }
58//!
59//! #[derive(Default)]
60//! struct MyApp {
61//!     checked: bool,
62//!     slider_value: f32,
63//! }
64//!
65//! impl eframe::App for MyApp {
66//!     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
67//!         egui::CentralPanel::default().show(ctx, |ui| {
68//!             ui.heading("Material Design Components");
69//!             
70//!             // Use Material Design components
71//!             ui.add(MaterialButton::new("Click me"));
72//!             ui.add(MaterialCheckbox::new(&mut self.checked, "Check me"));
73//!             ui.add(MaterialSlider::new(&mut self.slider_value, 0.0..=100.0));
74//!         });
75//!     }
76//! }
77//! ```
78//!
79//! ## Theme System
80//!
81//! The theme system supports Material Design 3 with comprehensive theming capabilities:
82//!
83//! ### Build-time Theme Inclusion
84//!
85//! Themes can be automatically included at build time from JSON files:
86//!
87//! ```rust,no_run
88//! use egui_material3::theme::{setup_local_theme, load_themes};
89//!
90//! // Uses themes from resources/ and examples/ directories automatically
91//! setup_local_theme(None);
92//! load_themes();
93//! ```
94//!
95//! ### Runtime Theme Loading
96//!
97//! Load custom themes dynamically:
98//!
99//! ```rust,no_run
100//! use egui_material3::theme::{setup_local_theme, load_themes};
101//!
102//! // Load specific theme file
103//! setup_local_theme(Some("path/to/my-theme.json"));
104//! load_themes();
105//! ```
106//!
107//! ### Theme Modes and Contrast
108//!
109//! Support for multiple theme modes and contrast levels:
110//!
111//! ```rust,no_run
112//! use egui_material3::theme::{get_global_theme, update_window_background, ThemeMode, ContrastLevel};
113//!
114//! // Change theme mode at runtime
115//! if let Ok(mut theme) = get_global_theme().lock() {
116//!     theme.theme_mode = ThemeMode::Dark;
117//!     theme.contrast_level = ContrastLevel::High;
118//! }
119//! // Apply changes
120//! update_window_background(ctx);
121//! ```
122//!
123//! ## Available Components
124//!
125//! ### Basic Components
126//! - [`MaterialButton`] - Material Design buttons with multiple variants
127//! - [`MaterialCheckbox`] - Checkboxes following Material Design guidelines  
128//! - [`MaterialSlider`] - Sliders with Material Design styling
129//! - [`MaterialSwitch`] - Toggle switches
130//! - [`MaterialRadio`] - Radio button groups
131//! - [`MaterialSelect`] - Dropdown selection components
132//!
133//! ### Advanced Components
134//! - [`MaterialChip`] - Filter and action chips
135//! - [`MaterialCard2`] - Material Design cards
136//! - [`MaterialDialog`] - Modal dialogs and alerts
137//! - [`MaterialFab`] - Floating Action Buttons
138//! - [`MaterialProgress`] - Progress indicators and loading states
139//! - [`MaterialDataTable`] - Data tables with sorting and selection
140//!
141//! ### Navigation Components
142//! - [`MaterialTabs`] - Tab navigation
143//! - [`MaterialDrawer`] - Navigation drawers
144//! - [`MaterialTopAppBar`] - App bars and toolbars
145//!
146//! ### Icons and Visual Elements
147//! - [`MaterialIcon`] - Material Design icons with font support
148//! - [`MaterialList`] - Lists following Material Design patterns
149//! - [`MaterialImageList`] - Image lists with online/offline support and smart caching
150//! - [`MaterialTimeline`] - Timeline component for displaying chronological events
151//!
152//! ## Image Lists and OnDemand Feature
153//!
154//! The [`MaterialImageList`] component provides comprehensive image display capabilities:
155//!
156//! ```rust,no_run
157//! use egui_material3::image_list;
158//!
159//! // Local image files
160//! ui.add(image_list()
161//!     .columns(3)
162//!     .item_spacing(8.0)
163//!     .items_from_paths(glob::glob("resources/*.png")?));
164//!
165//! // Online images (requires 'ondemand' feature)
166//! ui.add(image_list()
167//!     .columns(4)
168//!     .item_spacing(8.0)
169//!     .items_from_urls(vec![
170//!         "https://example.com/image1.jpg".to_string(),
171//!         "https://example.com/image2.png".to_string(),
172//!     ]));
173//!
174//! // Embedded images from byte arrays
175//! ui.add(image_list()
176//!     .columns(2)
177//!     .item_spacing(8.0)
178//!     .items_from_bytes(vec![
179//!         include_bytes!("image1.png").to_vec(),
180//!         include_bytes!("image2.png").to_vec(),
181//!     ]));
182//! ```
183//!
184//! ### OnDemand Feature
185//!
186//! Enable the `ondemand` feature for online image support:
187//!
188//! ```toml
189//! [dependencies]
190//! egui-material3 = { version = "0.0.6", features = ["ondemand"] }
191//! ```
192//!
193//! Key capabilities:
194//! - **Smart caching**: Downloaded images are cached locally with correct file extensions
195//! - **Format detection**: Automatically detects PNG, JPEG, GIF, and WebP formats
196//! - **Efficient loading**: Images are downloaded once and reused from cache
197//! - **Performance optimized**: UI repaints only when new images are available
198//! - **Error handling**: Graceful fallback with visual indicators for failed loads
199//!
200//! ## Examples
201//!
202//! The crate includes comprehensive examples:
203//!
204//! - `widget_gallery_example` - Showcase of all Material components with theme switching
205//! - `nobel_prizes_example` - Real-world data table implementation
206//! - `stories` - Individual component showcase windows for detailed exploration
207//! - `package` - Standalone example with bundled resources and themes
208//! - `ondemand` - Image list demonstration with online/offline images and smart caching
209//!
210//! Run examples with:
211//! ```bash
212//! cargo run --example widget_gallery_example
213//! cargo run --example nobel_prizes_example
214//! cargo run --example stories
215//!
216//! # OnDemand example with online image support
217//! cd examples/ondemand && cargo run
218//!
219//! # Package example runs independently with its own Cargo.toml
220//! cd examples/package && cargo run
221//! ```
222//!
223//! ## Material Design Resources
224//!
225//! - [Material Design 3](https://m3.material.io/)
226//! - [Material Theme Builder](https://m3.material.io/theme-builder)
227//! - [Material Design Icons](https://fonts.google.com/icons)
228//!
229//! This crate follows the Material Design 3 specifications and guidelines for consistent,
230//! accessible, and beautiful user interfaces.
231
232pub mod actionsheet;
233pub mod badge;
234pub mod breadcrumbs;
235pub mod button;
236pub mod card2;
237pub mod carousel;
238pub mod checkbox;
239pub mod chips;
240pub mod datatable;
241pub mod dialog;
242pub mod drawer;
243pub mod fab;
244pub mod icon;
245pub mod iconbutton;
246pub mod material_symbol;
247pub mod noto_emoji;
248#[cfg(feature = "svg_emoji")]
249pub mod svg_emoji;
250pub mod image_utils;
251pub mod imagelist;
252pub mod layoutgrid;
253pub mod list;
254pub mod menu;
255pub mod notification;
256pub mod progress;
257pub mod radio;
258pub mod select;
259pub mod slider;
260pub mod snackbar;
261pub mod spreadsheet;
262pub mod switch;
263pub mod tabs;
264pub mod theme;
265pub mod timeline;
266pub mod toolbar;
267pub mod tooltip;
268pub mod topappbar;
269pub mod treeview;
270
271pub use {
272    actionsheet::{action_sheet, ActionButton, ActionGroup, MaterialActionSheet},
273    badge::{badge, badge_dot, BadgeColor, BadgePosition, BadgeSize, MaterialBadge},
274    breadcrumbs::{breadcrumbs, MaterialBreadcrumbs},
275    button::{MaterialButton, MaterialButtonVariant},
276    card2::{elevated_card2, filled_card2, outlined_card2, Card2Variant, MaterialCard2},
277    carousel::{carousel, CarouselItem, MaterialCarousel},
278    checkbox::{checkbox, MaterialCheckbox},
279    chips::{assist_chip, filter_chip, input_chip, suggestion_chip, ChipVariant, MaterialChip},
280    datatable::{
281        data_table, CellContent, ColumnWidth, DataTableCell, DataTableColumn, DataTableRow,
282        DataTableSource, DataTableState, DataTableTheme, HAlign, MaterialDataTable, RowAction,
283        SortDirection, VAlign,
284    },
285    dialog::{dialog, MaterialDialog},
286    drawer::{
287        dismissible_drawer, modal_drawer, permanent_drawer, standard_drawer, DrawerAlignment,
288        DrawerHeader, DrawerItem, DrawerSection, DrawerThemeData, DrawerVariant, MaterialDrawer,
289    },
290    egui::TextEdit, // Re-export egui's TextEdit
291    fab::{
292        fab_branded, fab_primary, fab_secondary, fab_surface, fab_tertiary, google_branded_icon,
293        FabSize, FabVariant, MaterialFab, SvgIcon, SvgPath,
294    },
295    icon::{icon, MaterialIcon},
296    iconbutton::{
297        icon_button_filled, icon_button_filled_tonal, icon_button_outlined, icon_button_standard,
298        icon_button_toggle, IconButtonVariant, MaterialIconButton,
299    },
300    imagelist::{
301        image_list, masonry_image_list, woven_image_list, ImageListItem, ImageListVariant,
302        MaterialImageList,
303    },
304    layoutgrid::{debug_layout_grid, layout_grid, GridTile, GridTileBar, MaterialLayoutGrid},
305    list::{list, list_item, ListItem, ListTileStyle, ListTileTitleAlignment, MaterialList, VisualDensity},
306    menu::{
307        menu, menu_item, Corner, FocusState, MaterialMenu, MenuBarThemeData,
308        MenuButtonThemeData, MenuItem, MenuStyle, MenuThemeData, Positioning,
309    },
310    notification::{notification, MaterialNotification, MaterialNotificationWithOffset, NotificationAlign},
311    progress::{circular_progress, linear_progress, MaterialProgress, ProgressVariant},
312    radio::{radio, radio_group, radio_list_tile, MaterialRadio, MaterialRadioGroup, RadioListTile, ListTileControlAffinity},
313    select::{select, MaterialSelect, SelectVariant, MenuAlignment},
314    slider::{slider, range_slider, MaterialSlider, MaterialRangeSlider, RangeValues, SliderInteraction, ThumbShape},
315    snackbar::{snackbar, snackbar_with_action, MaterialSnackbar, SnackbarPosition, SnackBarBehavior},
316    switch::{switch, MaterialSwitch},
317    tabs::{tabs_primary, tabs_secondary, MaterialTabs, TabVariant},
318    theme::{
319        get_global_color, get_global_theme, update_global_theme, ContrastLevel,
320        MaterialThemeContext, MaterialThemeFile, ThemeMode,
321    },
322    timeline::{
323        timeline, MaterialTimeline, TimelineDot, TimelineDotColor, TimelineDotVariant,
324        TimelineItem, TimelinePosition,
325    },
326    toolbar::{toolbar, MaterialToolbar},
327    tooltip::{show_tooltip_on_hover, show_tooltip_on_hover_custom, tooltip, with_tooltip, MaterialTooltip, TooltipPosition},
328    topappbar::{
329        center_aligned_top_app_bar, large_top_app_bar, medium_top_app_bar, top_app_bar,
330        MaterialTopAppBar, TopAppBarVariant,
331    },
332    treeview::{tree_view, MaterialTreeView, TreeViewItem, TreeViewState},
333};
334
335#[cfg(feature = "spreadsheet")]
336pub use spreadsheet::{
337    column, integer_column, number_column, text_column, ColumnDef, ColumnType, FileFormat,
338    MaterialSpreadsheet, RowData, SpreadsheetAction, SpreadsheetDataModel,
339};