Packages
corex
0.1.0
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
lib/components/image.ex
defmodule Corex.Image do
@moduledoc ~S'''
Data struct for image slides in [`Corex.Carousel`](Corex.Carousel.html).
Not a Phoenix component — there is no `<.image>` function. Use [`Corex.Image.new/2`](Corex.Image.html#new/2)
to build `items` for a carousel image gallery; the carousel renders each entry as a plain HTML `<img>`.
For custom slide markup (cards, blog posts, mixed content), pass arbitrary `items` and use
`<:item :let={item}>` on [`<.carousel>`](Corex.Carousel.html#carousel/1) instead.
## Fields
| Field | Type | Required | Description |
| ----- | ---- | -------- | ----------- |
| `src` | `String.t()` | yes | Image URL or path (e.g. from `~p"/images/photo.jpg"`) |
| `alt` | `String.t()` | no | Accessible alternative text (defaults to `""`) |
| `class` | `String.t()` | no | Optional class on the rendered `<img>` |
## Examples
iex> Corex.Image.new("/images/beach.jpg", alt: "Beach")
%Corex.Image{src: "/images/beach.jpg", alt: "Beach", class: nil}
iex> Corex.Image.new("/images/logo.png", alt: "Logo", class: "rounded-md")
%Corex.Image{src: "/images/logo.png", alt: "Logo", class: "rounded-md"}
```heex
<.carousel
class="carousel"
items={[
Corex.Image.new(~p"/images/beach.jpg", alt: "Beach"),
Corex.Image.new(~p"/images/fall.jpg", alt: "Fall")
]}
>
<:prev_trigger><.heroicon name="hero-arrow-left" /></:prev_trigger>
<:next_trigger><.heroicon name="hero-arrow-right" /></:next_trigger>
</.carousel>
```
'''
@enforce_keys [:src]
defstruct [:src, :alt, :class]
@type t :: %__MODULE__{
src: String.t(),
alt: String.t(),
class: String.t() | nil
}
@doc """
Builds an image slide value for carousel `items`.
## Examples
Corex.Image.new(~p"/images/beach.jpg", alt: "Beach")
"""
@spec new(String.t(), keyword()) :: t()
def new(src, opts \\ []) when is_binary(src) do
%__MODULE__{
src: src,
alt: Keyword.get(opts, :alt, ""),
class: Keyword.get(opts, :class)
}
end
end