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};