iced_aw 0.13.1

# 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_aw)
[![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.14.0"
iced_aw = { version = "0.13.0", features = ["full"] }
```

## Versioning


| `iced` version | `iced_aw` version |
| -------------- | ----------------- |
| 0.13           | 0.11, 0.12        |
| 0.14           | 0.13              |

## Widgets


### Badge


<div align="center">

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

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

Enable this widget with the feature `badge`.

### Card


<div align="center">

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

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

Enable this widget with the feature `card`.

### Color Picker


<div align="center">

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

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

Enable this widget with the feature `color_picker`.

### Date Picker


<div align="center">

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

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.

<div align="center">

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

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.

<div align="center">

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

Enable this widget with the feature `selection_list`.

### TabBar and Tabs


<div align="center">

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

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


<div align="center">

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

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

Enable this widget with the feature `time_picker`.

### Menu


<div align="center">

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

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


<div align="center">

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

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).

### LabeledFrame

A frame with a title.

<div align="center">

![LabeledFrame showcase](./images/showcase/labeled_frame.png)
</div>