The fallback component renders a given value unless it is empty, in which case it renders a fallback value instead.
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.
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"
/>
<.fallback value={~U[2032-06-02 08:20:04Z]} formatter={&DateTime.to_unix/1}/> <.fallback value={nil} formatter={&DateTime.to_unix/1}/>
<.fallback value="Mary" placeholder="n/a" accessibility_text="not available"/> <.fallback value="" placeholder="n/a" accessibility_text="not available"/>