BitstylesPhoenix.Component.Flash.ui_flash
You're seeing just the function
ui_flash
, go back to BitstylesPhoenix.Component.Flash module for more information.
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 passfull
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>
"""