Doggo Storybook 0.9.0

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"
/>
Mary n/a
Attribute Type Documentation Default Value
accessibility_text :string The text for the `aria-label` attribute in case the `value` is empty. "not set"
class :any Any additional classes to be added. 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. The formatter function is only applied if `value` is not an empty value.
placeholder :any The placeholder to render if the `value` is empty. "-"
rest :global Any additional HTML attributes.
Required value * :any The value to display. If the value is `nil`, `""`, `[]` or `%{}`, the placeholder is rendered instead.