Search documentation of Plushie

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

Copy Markdown View Source

SVG display, renders a vector image from a file path.

## Props

Name | Type | Default | Description
--- | --- | --- | ---
`source` | `String.t() | atom()` | required | Path to the SVG file.
`width` | `:fill | :shrink | {:fill_portion, pos_integer()} | number()` | `nil` | SVG width. Default: shrink.
`height` | `:fill | :shrink | {:fill_portion, pos_integer()} | number()` | `nil` | SVG height. Default: shrink.
`content_fit` | `:contain | :cover | :fill | :none | :scale_down` | `nil` | How the SVG fits its bounds.
`rotation` | `number()` | `nil` | Rotation angle in degrees.
`opacity` | `number()` | `nil` | Opacity from 0.0 (transparent) to 1.0 (opaque).
`color` | `String.t()` | `nil` | Color tint applied to the SVG.
`alt` | `String.t() | atom()` | `nil` | Accessible label for the SVG.
`description` | `String.t() | atom()` | `nil` | Extended accessible description for the SVG.
`decorative` | `boolean()` | `nil` | When true, hides the SVG from assistive technology.
`event_rate` | `integer()` | `nil` | Max events per second for coalescable events.
`a11y` | `%Plushie.Type.A11y{} | map() | keyword()` | `%{role: :image}` | Accessibility annotations.

## Constructor

    Svg.new(id, source)
    Svg.new(id, source, opts)

## Summary

### Types

option()
t()

### Functions

a11y(widget, descriptor)

Accessibility annotations.

alt(widget, descriptor)

Accessible label for the SVG.

build(widget)

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

color(widget, descriptor)

Color tint applied to the SVG.

content_fit(widget, descriptor)

How the SVG fits its bounds.

decorative(widget, descriptor)

When true, hides the SVG from assistive technology.

description(widget, descriptor)

Extended accessible description for the SVG.

event_rate(widget, descriptor)

Max events per second for coalescable events.

height(widget, descriptor)

SVG height. Default: shrink.

new(id, source, opts \\ [])

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

opacity(widget, descriptor)

Opacity from 0.0 (transparent) to 1.0 (opaque).

rotation(widget, descriptor)

Rotation angle in degrees.

source(widget, descriptor)

Path to the SVG file.

svg(id, opts \\ [])

Creates a `:svg` widget.

width(widget, descriptor)

SVG width. Default: shrink.

with_options(widget, opts)

Applies keyword options to an existing widget struct.

## Types

# option()

    @type option() ::
      ((((((((({:width, :fill | :shrink | {:fill_portion, pos_integer()} | number()}
               | {:height,
                  :fill | :shrink | {:fill_portion, pos_integer()} | number()})
              | {:content_fit, :contain | :cover | :fill | :none | :scale_down})
             | {:rotation, number()})
            | {:opacity, number()})
           | {:color, atom() | String.t() | map()})
          | {:alt, String.t() | atom()})
         | {:description, String.t() | atom()})
        | {:decorative, boolean()})
       | {: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.Svg{
      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,
      alt:
        (String.t() | atom())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      color:
        String.t()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      content_fit:
        (:contain | :cover | :fill | :none | :scale_down)
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      decorative:
        boolean()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      description:
        (String.t() | atom())
        | 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,
      height:
        (:fill | :shrink | {:fill_portion, pos_integer()} | number())
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      id: String.t(),
      opacity:
        number()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      rotation:
        number()
        | Plushie.Animation.Transition.t()
        | Plushie.Animation.Spring.t()
        | Plushie.Animation.Sequence.t()
        | nil,
      source:
        (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
    }

## 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()`.

# alt(widget, descriptor)

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

Accessible label for the SVG.

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

# build(widget)

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

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

# color(widget, descriptor)

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

Color tint applied to the SVG.

Accepts `String.t()`.

# content_fit(widget, descriptor)

    @spec content_fit(
      widget :: t(),
      value :: (:contain | :cover | :fill | :none | :scale_down) | nil
    ) ::
      t()

How the SVG fits its bounds.

Accepts `:contain | :cover | :fill | :none | :scale_down`.

# decorative(widget, descriptor)

    @spec decorative(widget :: t(), value :: boolean() | nil) :: t()

When true, hides the SVG from assistive technology.

Accepts `boolean()`.

# description(widget, descriptor)

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

Extended accessible description for the SVG.

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

# event_rate(widget, descriptor)

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

Max events per second for coalescable events.

Accepts `integer()`.

# height(widget, descriptor)

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

SVG height. Default: shrink.

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

# new(id, source, opts \\ [])

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

## Arguments

- `id` - unique widget identifier
- `source` - Path to the SVG file.
- `opts` - keyword list of optional props

# opacity(widget, descriptor)

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

Opacity from 0.0 (transparent) to 1.0 (opaque).

Accepts `number()`.

# rotation(widget, descriptor)

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

Rotation angle in degrees.

Accepts `number()`.

# source(widget, descriptor)

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

Path to the SVG file.

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

# svg(id, opts \\ [])

(macro)

Creates a `:svg` widget.

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

    import Plushie.Widget.Svg, only: [svg: 2]

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

# width(widget, descriptor)

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

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