BitstylesPhoenix.Component.Flash (bitstyles_phoenix v2.3.0) View Source

Component for building flash messages.

Link to this section Summary

Functions

Render a flash message.

Link to this section Functions

Render a flash message.

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.

Attributes

  • variant - specifies which visual variant of flash you want, from those available in CSS. Defaults include: brand-1, warning, info, danger Additionally you can pass full as a variant that will be set on the content class. Variants can be passed in as binary, atoms or as a list of atoms/binaries.
  • class - Set CSS classes on the outer div.
  • content_class - Set CSS classes on the content div.
  • All other attributes are passed to the outer div tag.

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

Flash brand 1

iex> assigns = %{}
iex> render(~H"""
...>   <.ui_flash variant="brand-1">
...>     Something you may be interested to hear
...>   </.ui_flash>
...> """)
"""
<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> assigns = %{}
iex> render(~H"""
...>   <.ui_flash variant="positive">
...>     Saved successfully
...>   </.ui_flash>
...> """)
"""
<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> assigns = %{}
iex> render(~H"""
...>   <.ui_flash variant="warning">
...>     Saved with errors
...>   </.ui_flash>
...> """)
"""
<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 with errors
  </div>
</div>
"""

Flash danger

iex> assigns = %{}
iex> render(~H"""
...>   <.ui_flash variant="danger">
...>     Saving failed
...>   </.ui_flash>
...> """)
"""
<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">
    Saving failed
  </div>
</div>
"""

Flash with full content

iex> assigns = %{}
iex> render(~H"""
...>   <.ui_flash variant={[:danger, :full]}>
...>     Saving failed
...>   </.ui_flash>
...> """)
"""
<div aria-live="polite" class="u-padding-l-y a-flash a-flash--danger">
  <div class="a-content a-content--full u-flex u-items-center u-font-medium">
    Saving failed
  </div>
</div>
"""

Custom attributes and classes

iex> assigns = %{}
iex> render(~H"""
...>   <.ui_flash variant="brand-1" data-foo="bar" class="extra-class" content_class="extra-inner-class">
...>     Saving failed
...>   </.ui_flash>
...> """)
"""
<div aria-live="polite" class="u-padding-l-y a-flash a-flash--brand-1 extra-class" data-foo="bar">
  <div class="a-content u-flex u-items-center u-font-medium extra-inner-class">
    Saving failed
  </div>
</div>
"""