Fallback

The fallback component renders a given value unless it is empty, in which case it renders a fallback value instead.

Read more Read less

The values nil, "", [] and %{} are treated as empty values.

This component optionally applies a formatter function to non-empty values.

The primary purpose of this component is to enhance accessibility. In situations where a value in a table column or property list is set to be invisible or not displayed, it’s crucial to provide an alternative text for screen readers.

Usage

Render the value of @some_value if it’s available, or display the default placeholder otherwise:

<.fallback value={@some_value} />

Apply a formatter function to @some_value if it is not nil:

<.fallback value={@some_value} formatter={&format_date/1} />

Set a custom placeholder and text for screen readers:

<.fallback
  value={@some_value}
  placeholder="n/a"
  accessibility_text="not available"
/>
George -
Attribute Type Documentation Default Value
accessibility_text :string

The text for the aria-label attribute in case the value is empty.

Read more Read less
"not set"
class :any

Any additional classes to be added.

Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.

formatter :any

A 1-arity function that takes the value and returns the value for display.

Read more Read less

The formatter function is only applied if value is not an empty value.

placeholder :any

The placeholder to render if the value is empty.

Read more Read less
"-"
rest :global

Any additional HTML attributes.

Required value * :any

The value to display. If the value is nil, "", [] or %{}, the

Read more Read less

placeholder is rendered instead.