Plushie.Widget.Image (Plushie v0.7.0)

Image display, renders a raster image from a file path or an in-memory handle.

Props

Name	Type	Default	Description
`source`	`term()`	required	Path to the image file, or `%{handle: name}` for in-memory images.
`width`	`:fill \| :shrink \| {:fill_portion, pos_integer()} \| number()`	`nil`	Image width. Default: shrink.
`height`	`:fill \| :shrink \| {:fill_portion, pos_integer()} \| number()`	`nil`	Image height. Default: shrink.
`content_fit`	`:contain \| :cover \| :fill \| :none \| :scale_down`	`nil`	How the image fits its bounds.
`rotation`	`number()`	`nil`	Rotation angle in degrees.
`opacity`	`number()`	`nil`	Opacity from 0.0 (transparent) to 1.0 (opaque).
`border_radius`	`number()`	`nil`	Corner radius in pixels.
`filter_method`	`:nearest \| :linear`	`nil`	Image interpolation mode.
`expand`	`boolean()`	`nil`	Expand image to fill available space.
`scale`	`number()`	`nil`	Scale factor for the image.
`crop`	`map()`	`nil`	Crop rectangle: `%{x, y, width, height}` (integer pixel values).
`alt`	`String.t() \| atom()`	`nil`	Accessible label for the image.
`description`	`String.t() \| atom()`	`nil`	Extended accessible description for the image.
`decorative`	`boolean()`	`nil`	When true, hides the image 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

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

Summary

Types

option()

t()

Functions

a11y(widget, descriptor)

Accessibility annotations.

alt(widget, descriptor)

Accessible label for the image.

border_radius(widget, descriptor)

Corner radius in pixels.

build(widget)

Converts this widget struct to a ui_node() map.

content_fit(widget, descriptor)

How the image fits its bounds.

crop(widget, descriptor)

Crop rectangle: %{x, y, width, height} (integer pixel values).

decorative(widget, descriptor)

When true, hides the image from assistive technology.

description(widget, descriptor)

Extended accessible description for the image.

event_rate(widget, descriptor)

Max events per second for coalescable events.

expand(widget, descriptor)

Expand image to fill available space.

filter_method(widget, descriptor)

Image interpolation mode.

height(widget, descriptor)

Image height. Default: shrink.

image(id, opts \\ [])

Creates a :image widget.

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.

scale(widget, descriptor)

Scale factor for the image.

source(widget, descriptor)

Path to the image file, or %{handle: name} for in-memory images.

width(widget, descriptor)

Image 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()})
           | {:border_radius, number()})
          | {:filter_method, :nearest | :linear})
         | {:expand, boolean()})
        | {:scale, number()})
       | {:crop, 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.Image{
  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,
  border_radius:
    number()
    | 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,
  crop:
    map()
    | 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,
  expand:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  filter_method:
    (:nearest | :linear)
    | 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,
  scale:
    number()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  source:
    term()
    | 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

alt(widget, descriptor)

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

Accessible label for the image.

Accepts String.t() | atom().

border_radius(widget, descriptor)

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

Corner radius in pixels.

Accepts number().

build(widget)

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

Converts this widget struct to a ui_node() map.

content_fit(widget, descriptor)

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

How the image fits its bounds.

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

crop(widget, descriptor)

@spec crop(widget :: t(), value :: map() | nil) :: t()

Crop rectangle: %{x, y, width, height} (integer pixel values).

Accepts map().

decorative(widget, descriptor)

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

When true, hides the image from assistive technology.

Accepts boolean().

description(widget, descriptor)

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

Extended accessible description for the image.

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

expand(widget, descriptor)

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

Expand image to fill available space.

Accepts boolean().

filter_method(widget, descriptor)

@spec filter_method(widget :: t(), value :: (:nearest | :linear) | nil) :: t()

Image interpolation mode.

Accepts :nearest | :linear.

height(widget, descriptor)

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

Image height. Default: shrink.

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

image(id, opts \\ [])

(macro)

Creates a :image widget.

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

import Plushie.Widget.Image, only: [image: 2]

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

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 image file, or %{handle: name} for in-memory images.
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().

scale(widget, descriptor)

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

Scale factor for the image.

Accepts number().

source(widget, descriptor)

@spec source(widget :: t(), value :: term() | nil) :: t()

Path to the image file, or %{handle: name} for in-memory images.

Accepts term().

width(widget, descriptor)

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

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