SlopUI.Components.Elements (SlopUI v0.1.0)

Copy Markdown View Source

Small building blocks: skeleton, progress, spinner, kbd, separator, breadcrumbs, pagination.

Summary

Functions

Breadcrumb trail. The last crumb is the current page.

Keyboard key.

Pagination. path is a function from page number to a path; links use patch by default.

Progress bar. Omit value for an indeterminate bar.

Separator, optionally with a label.

Loading placeholder. aria-hidden; pair with aria-busy on the region.

Spinner with an accessible label.

Functions

kbd(assigns)

Keyboard key.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

pagination(assigns)

Pagination. path is a function from page number to a path; links use patch by default.

<.pagination page={@page} total_pages={@pages} path={&~p"/posts?page=#{&1}"} />

Attributes

  • page (:integer) (required)
  • total_pages (:integer) (required)
  • path (:any) (required) - fn page -> path.
  • link (:string) - Defaults to "patch". Must be one of "patch", or "navigate".
  • siblings (:integer) - pages shown on each side of the current one. Defaults to 1.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

progress(assigns)

Progress bar. Omit value for an indeterminate bar.

<.progress value={42} label="Uploading" />

Attributes

  • value (:integer) - 0..max. Defaults to nil.
  • max (:integer) - Defaults to 100.
  • label (:string) - accessible name. Defaults to nil.
  • color (:string) - Defaults to "accent". Must be one of "accent", "success", "warning", or "danger".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

separator(assigns)

Separator, optionally with a label.

Attributes

  • orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

skeleton(assigns)

Loading placeholder. aria-hidden; pair with aria-busy on the region.

<.skeleton shape="circle" height="2.5rem" />
<.skeleton shape="text" width="60%" />

Attributes

  • shape (:string) - Defaults to "rect". Must be one of "rect", "text", or "circle".
  • width (:string) - Defaults to nil.
  • height (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

spinner(assigns)

Spinner with an accessible label.

Attributes

  • label (:string) - defaults to "Loading". Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.