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
Breadcrumb trail. The last crumb is the current page.
<.breadcrumbs>
<:crumb navigate={~p"/"}>Home</:crumb>
<:crumb navigate={~p"/posts"}>Posts</:crumb>
<:crumb>Editing</:crumb>
</.breadcrumbs>Attributes
class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
crumb(required) - Accepts attributes:navigate(:string)patch(:string)href(:string)
Keyboard key.
Attributes
class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
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 to1.class(:any) - Defaults tonil.- Global attributes are accepted.
Progress bar. Omit value for an indeterminate bar.
<.progress value={42} label="Uploading" />Attributes
value(:integer) - 0..max. Defaults tonil.max(:integer) - Defaults to100.label(:string) - accessible name. Defaults tonil.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 tonil.- Global attributes are accepted.
Separator, optionally with a label.
Attributes
orientation(:string) - Defaults to"horizontal". Must be one of"horizontal", or"vertical".class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block
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 tonil.height(:string) - Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.
Spinner with an accessible label.
Attributes
label(:string) - defaults to "Loading". Defaults tonil.size(:string) - Defaults to"md". Must be one of"sm","md", or"lg".class(:any) - Defaults tonil.- Global attributes are accepted.