Search documentation of Plushie

# Plushie.Widget.Radio (Plushie v0.7.2)

Copy Markdown View Source

Radio button, one-of-many selection.

All radios in a group should share the same `group` prop value. The `selected` prop should be set to the currently selected value across all radios in the group.

## Props

Name | Type | Default | Description
--- | --- | --- | ---
`value` | `String.t() | atom()` | required | The value this radio represents.
`selected` | `String.t() | atom()` | `nil` | Currently selected value in the group.
`label` | `String.t() | atom()` | `nil` | Label text. Defaults to `value` if omitted.
`group` | `String.t() | atom()` | `nil` | Group identifier for event routing.
`spacing` | `number()` | `nil` | Space between radio and label in pixels.
`width` | `:fill | :shrink | {:fill_portion, pos_integer()} | number()` | `nil` | Widget width. Default: shrink.
`size` | `number()` | `nil` | Radio button size in pixels.
`text_size` | `number()` | `nil` | Label text size in pixels.
`font` | `:default | :monospace | String.t() | %Plushie.Type.Font{}` | `nil` | Label font.
`line_height` | `number() | %{relative: number()} | %{absolute: number()}` | `nil` | Label line height.
`shaping` | `:basic | :advanced | :auto` | `nil` | Text shaping strategy.
`wrapping` | `:none | :word | :glyph | :word_or_glyph` | `nil` | Text wrapping mode.

| `style` | `:default \| :primary \| :secondary \| :success \| :danger \| :warning \| :dark \| :weak \| :rounded_box \| term()` | `nil` | Named preset or custom `StyleMap`. | | `event_rate` | `integer()` | `nil` | Max events per second for coalescable events. | | `a11y` | `%Plushie.Type.A11y{} \| map() \| keyword()` | `%{role: :radio_button, label_from: :label}` | Accessibility annotations. |

## Events

Event | Type | Description
--- | --- | ---
`:select` | `value: String.t() | atom()` | Emitted when this radio is selected.

## Constructor

    Radio.new(id, value, selected)
    Radio.new(id, value, selected, opts)

## Summary

### Types

option()
t()

### Functions

a11y(widget, descriptor)

Accessibility annotations.

build(widget)

Converts this widget struct to a `ui_node()` map.

event_rate(widget, descriptor)

Max events per second for coalescable events.

font(widget, descriptor)

Label font.

group(widget, descriptor)

Group identifier for event routing.

label(widget, descriptor)

Label text. Defaults to `value` if omitted.

line_height(widget, descriptor)

Label line height.

new(id, value, selected, opts \\ [])

Creates a new widget struct with the given positional args and keyword options.

radio(id, opts \\ [])

Creates a `:radio` widget.

selected(widget, descriptor)

Currently selected value in the group.

shaping(widget, descriptor)

Text shaping strategy.

size(widget, descriptor)

Radio button size in pixels.

spacing(widget, descriptor)

Space between radio and label in pixels.

style(widget, descriptor)

Named preset or custom `StyleMap`.

text_size(widget, descriptor)

Label text size in pixels.

value(widget, descriptor)

The value this radio represents.

width(widget, descriptor)

Widget width. Default: shrink.

with_options(widget, opts)

Applies keyword options to an existing widget struct.

wrapping(widget, descriptor)

Text wrapping mode.

## Types

# option()

    @type option() ::
      ((((((((((({:label, String.t() | atom()} | {:group, String.t() | atom()})
                | {:spacing, number()})
               | {:width,
                  :fill | :shrink | {:fill_portion, pos_integer()} | number()})
              | {:size, number()})
             | {:text_size, number()})
            | {:font,
               :default
               | :monospace
               | String.t()
               | %Plushie.Type.Font{
                   family: term(),
                   stretch: term(),
                   style: term(),
                   weight: term()
                 }})
           | {:line_height,
              number() | %{relative: number()} | %{absolute: number()}})
          | {:shaping, :basic | :advanced | :auto})
         | {:wrapping, :none | :word | :glyph | :word_or_glyph})
        | {:style,
           :default
           | :primary
           | :secondary
           | :success
           | :danger
           | :warning
           | :dark
           | :weak
           | :rounded_box
           | term()})
       | {:event_rate, integer()})
      | {:a11y,
         %Plushie.Type.A11y{
           active_descendant: term(),
           busy: term(),
           described_by: term(),
           description: term(),
           disabled: term(),
           error_message: term(),
           expanded: term(),
           has_popup: term(),
           hidden: term(),
           invalid: term(),
           label: term(),
           label_from: term(),
           labelled_by: term(),
           level: term(),
           live: term(),
           mnemonic: term(),
           modal: term(),
           orientation: term(),
           position_in_set: term(),
           radio_group: term(),
           read_only: term(),
           required: term(),
           role: term(),
           selected: term(),
           size_of_set: term(),
           toggled: term(),
           value: term()
         }
         | map()
         | keyword()}

# t()

    @type t() :: %Plushie.Widget.Radio{
      a11y:
        (%Plushie.Type.A11y{
           active_descendant: term(),
           busy: term(),
           described_by: term(),
           description: term(),
           disabled: term(),
           error_message: term(),
           expanded: term(),
           has_popup: term(),
           hidden: term(),
           invalid: term(),
           label: term(),
           label_from: term(),
           labelled_by: term(),
           level: term(),
           live: term(),
           mnemonic: term(),
           modal: term(),
           orientation: term(),
           position_in_set: term(),
           radio_group: term(),
           read_only: term(),
           required: term(),
           role: term(),
           selected: term(),
           size_of_set: term(),
           toggled: term(),
           value: term()
         }
         | map()
         | keyword())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      event_rate:
        integer()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      font:
        (:default
         | :monospace
         | String.t()
         | %Plushie.Type.Font{
             family: term(),
             stretch: term(),
             style: term(),
             weight: term()
           })
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      group:
        (String.t() | atom())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      id: String.t(),
      label:
        (String.t() | atom())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      line_height:
        (number() | %{relative: number()} | %{absolute: number()})
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      selected:
        (String.t() | atom())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      shaping:
        (:basic | :advanced | :auto)
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      size:
        number()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      spacing:
        number()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      style:
        (:default
         | :primary
         | :secondary
         | :success
         | :danger
         | :warning
         | :dark
         | :weak
         | :rounded_box
         | term())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      text_size:
        number()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      value:
        (String.t() | atom())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      width:
        (:fill | :shrink | {:fill_portion, pos_integer()} | number())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      wrapping:
        (:none | :word | :glyph | :word_or_glyph)
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil
    }

## Functions

# a11y(widget, descriptor)

    @spec a11y(
      widget :: t(),
      value ::
        (%Plushie.Type.A11y{
           active_descendant: term(),
           busy: term(),
           described_by: term(),
           description: term(),
           disabled: term(),
           error_message: term(),
           expanded: term(),
           has_popup: term(),
           hidden: term(),
           invalid: term(),
           label: term(),
           label_from: term(),
           labelled_by: term(),
           level: term(),
           live: term(),
           mnemonic: term(),
           modal: term(),
           orientation: term(),
           position_in_set: term(),
           radio_group: term(),
           read_only: term(),
           required: term(),
           role: term(),
           selected: term(),
           size_of_set: term(),
           toggled: term(),
           value: term()
         }
         | map()
         | keyword())
        | nil
    ) :: t()

Accessibility annotations.

Accepts `%Plushie.Type.A11y{} | map() | keyword()`.

# build(widget)

    @spec build(widget :: t()) :: Plushie.Widget.ui_node()

Converts this widget struct to a `ui_node()` map.

# event_rate(widget, descriptor)

    @spec event_rate(widget :: t(), value :: integer() | nil) :: t()

Max events per second for coalescable events.

Accepts `integer()`.

# font(widget, descriptor)

    @spec font(
      widget :: t(),
      value ::
        (:default
         | :monospace
         | String.t()
         | %Plushie.Type.Font{
             family: term(),
             stretch: term(),
             style: term(),
             weight: term()
           })
        | nil
    ) :: t()

Label font.

Accepts `:default | :monospace | String.t() | %Plushie.Type.Font{}`.

# group(widget, descriptor)

    @spec group(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Group identifier for event routing.

Accepts `String.t() | atom()`.

# label(widget, descriptor)

    @spec label(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Label text. Defaults to `value` if omitted.

Accepts `String.t() | atom()`.

# line_height(widget, descriptor)

    @spec line_height(
      widget :: t(),
      value :: (number() | %{relative: number()} | %{absolute: number()}) | nil
    ) :: t()

Label line height.

Accepts `number() | %{relative: number()} | %{absolute: number()}`.

# new(id, value, selected, opts \\ [])

Creates a new widget struct with the given positional args and keyword options.

## Arguments

- `id` - unique widget identifier
- `value` - The value this radio represents.
- `selected` - Currently selected value in the group.
- `opts` - keyword list of optional props

# radio(id, opts \\ [])

(macro)

Creates a `:radio` widget.

Shorthand for `new/2`. Import this macro to use the widget name directly in view functions:

    import Plushie.Widget.Radio, only: [radio: 2]

    radio("my-id", prop: value)

# selected(widget, descriptor)

    @spec selected(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Currently selected value in the group.

Accepts `String.t() | atom()`.

# shaping(widget, descriptor)

    @spec shaping(widget :: t(), value :: (:basic | :advanced | :auto) | nil) :: t()

Text shaping strategy.

Accepts `:basic | :advanced | :auto`.

# size(widget, descriptor)

    @spec size(widget :: t(), value :: number() | nil) :: t()

Radio button size in pixels.

Accepts `number()`.

# spacing(widget, descriptor)

    @spec spacing(widget :: t(), value :: number() | nil) :: t()

Space between radio and label in pixels.

Accepts `number()`.

# style(widget, descriptor)

    @spec style(
      widget :: t(),
      value ::
        (:default
         | :primary
         | :secondary
         | :success
         | :danger
         | :warning
         | :dark
         | :weak
         | :rounded_box
         | term())
        | nil
    ) :: t()

Named preset or custom `StyleMap`.

Accepts `:default | :primary | :secondary | :success | :danger | :warning | :dark | :weak | :rounded_box | term()`.

# text_size(widget, descriptor)

    @spec text_size(widget :: t(), value :: number() | nil) :: t()

Label text size in pixels.

Accepts `number()`.

# value(widget, descriptor)

    @spec value(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

The value this radio represents.

Accepts `String.t() | atom()`.

# width(widget, descriptor)

    @spec width(
      widget :: t(),
      value :: (:fill | :shrink | {:fill_portion, pos_integer()} | number()) | nil
    ) ::
      t()

Widget width. Default: shrink.

Accepts `:fill | :shrink | {:fill_portion, pos_integer()} | number()`.

# with_options(widget, opts)

    @spec with_options(widget :: t(), opts :: [option()]) :: t()

Applies keyword options to an existing widget struct.

# wrapping(widget, descriptor)

    @spec wrapping(
      widget :: t(),
      value :: (:none | :word | :glyph | :word_or_glyph) | nil
    ) :: t()

Text wrapping mode.

Accepts `:none | :word | :glyph | :word_or_glyph`.