Plushie.Widget.Svg (Plushie v0.7.0)

Copy Markdown View Source

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

Props

NameTypeDefaultDescription
sourceString.t() | atom()requiredPath to the SVG file.
width:fill | :shrink | {:fill_portion, pos_integer()} | number()nilSVG width. Default: shrink.
height:fill | :shrink | {:fill_portion, pos_integer()} | number()nilSVG height. Default: shrink.
content_fit:contain | :cover | :fill | :none | :scale_downnilHow the SVG fits its bounds.
rotationnumber()nilRotation angle in degrees.
opacitynumber()nilOpacity from 0.0 (transparent) to 1.0 (opaque).
colorString.t()nilColor tint applied to the SVG.
altString.t() | atom()nilAccessible label for the SVG.
descriptionString.t() | atom()nilExtended accessible description for the SVG.
decorativeboolean()nilWhen true, hides the SVG from assistive technology.
event_rateinteger()nilMax 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.