iced_m3

Implementation of the Material Design 3 system for the Iced GUI library

Features

• Motion Physics system
• Dynamic Color system
• Elevation system
• Support for text or SVG icons
• Widgets
  • Badges
  • Common Buttons
  • Connected Button Groups
  • Cards
  • Dialog
  • Floating Action Buttons (FABs)
  • Floating Action Button Menu (FAB Menu)
  • Loading Indicator
  • Navigation Bar
  • Navigation Rail
  • Progress Bar
  • Vertical Menu
  • Shapes
  • Switch
  • Slider
  • Text Field

You can go see the demos here!

Chilen uses iced_m3 extensively, you can check how the library is used there too!

Usage

Run this in your project:

cargo add iced_m3 --git https://github.com/tpaau/iced_m3.git

This library is largely for use in my personal projects (like Chilen), and constantly changing, so consider pinning a commit if you wish to use it in your project. I also don't plan on releasing this on crates.io anytime soon, largely for the same reason.

iced_m3 is compatible with Iced 0.14.0 and will most likely be kept up to date with stable Iced releases.

Widgets

Badges

Badges show notifications, counts, or status information on navigation items and icons

Reference

Common Buttons

Buttons prompt most actions in a UI

Reference

TODOs:

• Animated ripple effect

Connected Button Groups

Connected button groups help people select options, switch views, or sort elements in a page.

Reference

TODOs:

• Animated ripple effect

Cards

Cards display content and actions about a single subject

Reference

TODOs:

• Animated ripple affect
• Drag-and-drop

Dialog

demo

Dialogs provide important prompts in a user flow

Reference

Floating Action Buttons

Floating action buttons (FABs) help people take primary actions

Reference: FABs, Extended FABs (yes, adding a label makes it a separate widget somehow)

TODOs:

• Animated ripple affect

FAB Menu

The floating action button (FAB) menu opens from a FAB to display multiple related actions

Reference

TODOs:

• Item animation
• Item ripple effect

Loading Indicator

Loading indicators show the progress of a process for a short wait time

Reference

Navigation Bar

demo

Navigation bars let people switch between UI views on smaller devices

Reference

TODOs:

• Item ripple effect

Navigation Rail

Navigation rails let people switch between UI views on mid-sized devices

Reference

TODOs:

• Expand/Contract animation
• Item ripple effect

Progress Bar

Progress indicators show the status of a process in real time

Reference

TODOs:

• Circular progress indicator
• Squiggly variant!!
• Fix jank in animation

Vertical Menu

demo

Menus display a list of choices on a temporary surface

Reference

TODOs:

• Nested menus
• Menu item ripple effect

Shapes

Shapes are expressive elements of Material 3 that echo key visual attributes of M3 typography.

Reference

Switch

Switches toggle the selection of an item on and off

Reference

TODOs:

• State layer ripple effect

Slider

demo

Sliders allow users to make selections from a range of values

Reference

TODOs:

• Other value type variants
• Snapping

Text Field

demo

Text fields let users enter text into a UI

Reference

Advanced

Widgets used internally by iced_m3 for other widgets that may also be useful outside of iced_m3. Those are gated behind the advanced feature.