m3e/icon_button

icon_button provides Lustre support for the M3E Icon Button component

Types

Config

Config holds the configuration for an IconButton

pub type Config(msg) {
  Config(
    interaction: Interaction,
    form_submission: option.Option(form_submission.FormSubmission),
    link: option.Option(link.Link),
    purpose: option.Option(attribute.Attribute(msg)),
    selection: state.SelectionState,
    shape: Shape,
    size: config.Size,
    toggle: ToggleMode,
    variant: Variant,
    width: Width,
  )
}

Constructors

Config(
  interaction: Interaction,
  form_submission: option.Option(form_submission.FormSubmission),
  link: option.Option(link.Link),
  purpose: option.Option(attribute.Attribute(msg)),
  selection: state.SelectionState,
  shape: Shape,
  size: config.Size,
  toggle: ToggleMode,
  variant: Variant,
  width: Width,
)

IconButton

opaque </>

IconButton(msg) is an icon button users interact with to perform a supplementary action

Fields:

interaction: Whether the element is enabled or disabled
form_submission: Whether the element is involved in a form submission
link: Whether the element is a link
purpose: A slot value defined by a parent element
selection: Whether the toggle button is selected
shape: The shape of the button
size: The size of the button
toggle: Whether the button will toggle between selected and unselected states
variant: The appearance variant of the button
width: The width of the button

pub opaque type IconButton(msg)

Interaction

</>

Interaction specifies if the element is enabled or disabled

pub type Interaction {
  Enabled
  Disabled
  DisabledInteractive
}

Constructors

```
Enabled
```
```
Disabled
```
```
DisabledInteractive
```

Shape

</>

Shape

pub type Shape {
  Rounded
  Square
}

Constructors

```
Rounded
```
```
Square
```

Slot

</>

Slot gives type-safe names to each of the defined HTML named slots

pub type Slot {
  SelectedIcon
}

Constructors

```
SelectedIcon
```

ToggleMode

</>

ToggleMode specifies if the button will toggle between states

pub type ToggleMode {
  Toggle
  NotToggle
}

Constructors

```
Toggle
```
```
NotToggle
```

Variant

</>

Variant is the appearance variant of the button

pub type Variant {
  Filled
  Tonal
  Outlined
  Standard
}

Constructors

```
Filled
```
```
Tonal
```
```
Outlined
```
```
Standard
```

Width

</>

Width is the width of the button

pub type Width {
  Default
  Narrow
  Wide
}

Constructors

```
Default
```
```
Narrow
```
```
Wide
```

Values

default_config

</>

pub fn default_config() -> Config(msg)

default_config creates a new Config with default values

default_interaction

</>

pub const default_interaction: Interaction

default_shape

</>

pub const default_shape: Shape

default_toggle

</>

pub const default_toggle: ToggleMode

default_variant

</>

pub const default_variant: Variant

default_width

</>

pub const default_width: Width

disabled

</>

pub fn disabled(
  i: IconButton(msg),
  interaction: Interaction,
) -> IconButton(msg)

disabled sets the interaction field

form

</>

pub fn form(
  i: IconButton(msg),
  form: option.Option(form_submission.FormSubmission),
) -> IconButton(msg)

form sets the form_submission field

from_config

</>

pub fn from_config(c: Config(msg)) -> IconButton(msg)

from_config creates an IconButton from a Config record

link

</>

pub fn link(
  i: IconButton(msg),
  link: option.Option(link.Link),
) -> IconButton(msg)

new

</>

pub fn new() -> IconButton(msg)

new creates an icon button with default values

purpose

</>

pub fn purpose(
  i: IconButton(msg),
  purpose: option.Option(attribute.Attribute(msg)),
) -> IconButton(msg)

purpose sets the purpose field

render

</>

pub fn render(
  i: IconButton(msg),
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

render creates a Lustre Element from an IconButton(msg)

Parameters:

i: an IconButton(msg)
attributes: a list of additional Attributes
children: a list of child Elements

render_config

</>

pub fn render_config(
  config: Config(msg),
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

render_config creates a Lustre Element directly from a Config

selected

</>

pub fn selected(
  i: IconButton(msg),
  selection: state.SelectionState,
) -> IconButton(msg)

selected sets the selection field

shape

</>

pub fn shape(i: IconButton(msg), shape: Shape) -> IconButton(msg)

shape sets the shape field

size

</>

pub fn size(
  i: IconButton(msg),
  size: config.Size,
) -> IconButton(msg)

size sets the size field

slot

</>

pub fn slot(s: Slot) -> attribute.Attribute(msg)

slot creates a Lustre ‘slot’ Attribute(msg) for a Slot

toggle

</>

pub fn toggle(
  i: IconButton(msg),
  toggle: ToggleMode,
) -> IconButton(msg)

toggle sets the toggle field

variant

</>

pub fn variant(
  i: IconButton(msg),
  variant: Variant,
) -> IconButton(msg)

variant sets the variant field

width

</>

pub fn width(i: IconButton(msg), width: Width) -> IconButton(msg)

width sets the width field