Search documentation of Plushie

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

Copy Markdown View Source

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

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