https://github.com/iced-rs/iced_aw

Additional widgets for the Iced GUI library
https://github.com/iced-rs/iced_aw

Last synced: 5 days ago
JSON representation

Additional widgets for the Iced GUI library

• Host: GitHub
• URL: https://github.com/iced-rs/iced_aw
• Owner: iced-rs
• License: mit
• Created: 2020-11-26T14:07:54.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-24T13:22:51.000Z (19 days ago)
• Last Synced: 2025-01-30T18:35:20.857Z (13 days ago)
• Language: Rust
• Size: 9.1 MB
• Stars: 494
• Watchers: 11
• Forks: 116
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-iced - iced_aw - An assortment of additional widgets (Custom Widgets)

README

        
# Iced - Additional Widgets

[![Documentation](https://docs.rs/iced_aw/badge.svg)](https://docs.rs/iced_aw)

[![Crates.io](https://img.shields.io/crates/v/iced_aw.svg)](https://crates.io/crates/iced)

[![License](https://img.shields.io/crates/l/iced_aw.svg)](https://github.com/iced-rs/iced/blob/master/LICENSE)

[![Discord Server](https://img.shields.io/discord/628993209984614400?label=&labelColor=6A7EC2&logo=discord&logoColor=ffffff&color=7389D8)](https://discord.gg/3xZJ65GAhd)

This crate contains additional widgets for the GUI library [Iced](https://github.com/hecrj/iced).

Every widget is hidden by a feature gate. This allows you to cherry pick the widgets you actually need.

## Usage

Include `iced_aw` as a dependency in your `Cargo.toml`:

```toml

[dependencies]

iced = "0.13.0"

iced_aw = { version = "0.11.0", default-features = false, features = [...] }

```

## Versioning

| `iced` version | `iced_aw` version |

| -------------- | ----------------- |

| 0.10           | 0.7               |

| 0.12           | 0.9               |

| 0.13           | 0.10, 0.11        |

## Widgets

### Badge



  ![Badge showcase](./images/showcase/badge.png)



Please take a look into our examples on how to use badges.

Enable this widget with the feature `badge`.

### Card



![Card showcase](./images/showcase/card.png)



Please take a look into our examples on how to use cards.

Enable this widget with the feature `card`.

### Color Picker



![Color Picker showcase](./images/showcase/color_picker.png)



Please take a look into our examples on how to use color pickers.

Enable this widget with the feature `color_picker`.

### Date Picker



  ![Date Picker showcase](./images/showcase/date_picker.png)



Please take a look into our examples on how to use date pickers.

Enable this widget with the feature `date_picker`.

### NumberInput

Just like TextInput, but only for numbers.



![NumberInput showcase](./images/showcase/number_input.png)



Please take a look into our examples on how to use number inputs.

Enable this widget with the feature `number_input`.

*This widget does currently not support web*

### SelectionList

A selection space to show any options passed in.



![SelectionList showcase](./images/showcase/selection_list.gif)



Enable this widget with the feature `selection_list`.

### TabBar and Tabs



![Tabs showcase](./images/showcase/tabs_example.gif)



Please take a look into our examples on how to use TabBars and Tabs.

Enable TabBars with the feature `tab_bar` and Tabs with `tabs`.

### Time Picker



![Modal showcase](./images/showcase/time_picker.png)



Please take a look into our examples on how to use time pickers.

Enable this widget with the feature `time_picker`.

### Menu



![Menu showcase](./images/showcase/menu.gif)



Please take a look into our examples on how to use menus.

Enable this widget with the feature `menu`.

You might also want to enable the feature `quad` for drawing separators.

### Slide Bar

Please take a look into our examples on how to use slidebars.

Enable this widget with the feature `slide_bar`.

### Context Menu

See the example [here](./examples/context_menu.rs)

### Drop Down Menu

See the example [here](./examples/drop_down.rs)

### Sidebar



![Modal showcase](./images/showcase/sidebar.png)



Please take a look into our examples on how to use Sidebar.

Enable Sidebar with the feature `sidebar`.

Also included in this feature, are two widgets `sidebar::column::FlushColumn` and `sidebar::row::FlushRow` that flushes the end/start element to the opposite direction to the alignment of the container.

### Color palette

This crate adds a predefined color palette based on the [CSS color palette](https://www.w3schools.com/cssref/css_colors.asp).