BitstylesPhoenix.Flash (bitstyles_phoenix v0.8.0) View Source

Component for building flash messages.

Link to this section Summary

Functions

Inform the user of a global or important event, such as may happen after a page reload. There are several variants, which use color, iconography, and html attributes to indicate severity.

Link to this section Functions

Inform the user of a global or important event, such as may happen after a page reload. There are several variants, which use color, iconography, and html attributes to indicate severity.

See https://bitcrowd.github.io/bitstyles/?path=/docs/ui-flashes--flash-brand-1

opts[:variant] — specifies which visual variant of flash you want, from those available in CSS. Defaults include: brand-1, warning, info, danger

Flash brand 1

iex> safe_to_string ui_flash("Something you may be interested to hear", variant: "brand-1")
~s(<div aria-live="polite" class="u-padding-l-y a-flash a-flash--brand-1"><div class="a-content u-flex u-items-center u-font--medium">Something you may be interested to hear</div></div>)

Flash success

iex> safe_to_string ui_flash("Saved successfully", variant: "positive")
~s(<div aria-live="polite" class="u-padding-l-y a-flash a-flash--positive"><div class="a-content u-flex u-items-center u-font--medium">Saved successfully</div></div>)

Flash warning

iex> safe_to_string ui_flash("Saved successfully", variant: "warning")
~s(<div aria-live="polite" class="u-padding-l-y a-flash a-flash--warning"><div class="a-content u-flex u-items-center u-font--medium">Saved successfully</div></div>)

Flash danger

iex> safe_to_string ui_flash("Saved successfully", variant: "danger")
~s(<div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger"><div class="a-content u-flex u-items-center u-font--medium">Saved successfully</div></div>)

Flash with a block

iex> safe_to_string(ui_flash(variant: "danger") do
...>   "Saved successfully"
...> end)
~s(<div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger"><div class="a-content u-flex u-items-center u-font--medium">Saved successfully</div></div>)