PhiaUi.Components.Thumbnav (phia_ui v0.1.17)

Thumbnail navigation strip for image galleries and slideshows.

Renders a row (or column) of clickable thumbnail images. The active item is highlighted with a ring. Commonly paired with a carousel or lightbox component.

Examples

<.thumbnav>
  <.thumbnav_item src="/images/photo1-thumb.jpg" active={true} on_click="select_slide" value="0" />
  <.thumbnav_item src="/images/photo2-thumb.jpg" on_click="select_slide" value="1" />
  <.thumbnav_item src="/images/photo3-thumb.jpg" on_click="select_slide" value="2" />
</.thumbnav>

Vertical orientation

<.thumbnav orientation={:vertical}>
  <.thumbnav_item src="/img/1.jpg" active={true} />
  <.thumbnav_item src="/img/2.jpg" />
</.thumbnav>

Summary

Functions

thumbnav(assigns)

Renders a thumbnail navigation strip container.

thumbnav_item(assigns)

Renders a single thumbnail navigation item.

Functions

thumbnav(assigns)

Renders a thumbnail navigation strip container.

Attributes

orientation (:atom) - Layout direction. Defaults to :horizontal. Must be one of :horizontal, or :vertical.
gap (:atom) - Gap between thumbnails. Defaults to :md. Must be one of :sm, :md, or :lg.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the <nav> element.

Slots

inner_block (required) - thumbnav_item children.

thumbnav_item(assigns)

Renders a single thumbnail navigation item.

Attributes

src (:string) (required) - Thumbnail image URL.
alt (:string) - Image alt text. Defaults to "".
active (:boolean) - Whether this item is selected. Defaults to false.
href (:string) - Optional link URL. Defaults to nil.
on_click (:string) - phx-click event name. Defaults to nil.
value (:string) - phx-value-index or similar. Defaults to nil.
width (:string) - Thumbnail width class. Defaults to "w-16".
height (:string) - Thumbnail height class. Defaults to "h-16".
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the item element.