bevy_material_ui 0.2.7

Material Design 3 UI components for Bevy game engine
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

# Icon Button

Material Design 3 icon-only button component.

## Variants

| Variant | Description |
|---------|-------------|
| `Standard` | No container, icon only |
| `Filled` | Solid background |
| `FilledTonal` | Tonal background |
| `Outlined` | Border outline |

## Basic Usage

```rust
use bevy_material_ui::prelude::*;

fn setup(mut commands: Commands, theme: Res<MaterialTheme>) {
    // Standard icon button
    MaterialIconButton::new(ICON_FAVORITE)
        .spawn(&mut commands, &theme);

    // Filled
    MaterialIconButton::new(ICON_ADD)
        .with_variant(IconButtonVariant::Filled)
        .spawn(&mut commands, &theme);

    // Tonal
    MaterialIconButton::new(ICON_EDIT)
        .with_variant(IconButtonVariant::FilledTonal)
        .spawn(&mut commands, &theme);

    // Outlined
    MaterialIconButton::new(ICON_SHARE)
        .with_variant(IconButtonVariant::Outlined)
        .spawn(&mut commands, &theme);
}
```

## Toggle Button

```rust
// Toggleable icon button
MaterialIconButton::new(ICON_FAVORITE)
    .toggleable()
    .spawn(&mut commands, &theme);

// Pre-selected toggle
MaterialIconButton::new(ICON_STAR)
    .toggleable()
    .selected(true)
    .spawn(&mut commands, &theme);
```

## Different Icons for States

```rust
// Different icon when selected
MaterialIconButton::new(ICON_FAVORITE_BORDER)
    .toggleable()
    .with_selected_icon(ICON_FAVORITE)
    .spawn(&mut commands, &theme);
```

## Disabled State

```rust
MaterialIconButton::new(ICON_DELETE)
    .disabled(true)
    .spawn(&mut commands, &theme);
```

## Handling Clicks

```rust
fn handle_icon_button_clicks(
    buttons: Query<(&Interaction, &MaterialIconButton), Changed<Interaction>>,
) {
    for (interaction, button) in buttons.iter() {
        if *interaction == Interaction::Pressed {
            println!("Icon button clicked: {}", button.icon);
        }
    }
}
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `icon` | `String` | Required | Icon character |
| `variant` | `IconButtonVariant` | `Standard` | Button style |
| `disabled` | `bool` | `false` | Disabled state |
| `toggleable` | `bool` | `false` | Enable toggle behavior |
| `selected` | `bool` | `false` | Toggle state |
| `selected_icon` | `Option<String>` | `None` | Icon when selected |

## State Layers

Icon buttons apply MD3 state layers:
- **Hover**: 8% opacity overlay
- **Pressed**: 12% opacity overlay