BitstylesPhoenix.Component.Modal.ui_modal

You're seeing just the function ui_modal, go back to BitstylesPhoenix.Component.Modal module for more information.

Renders a modal. Optionally can have an overlay slot with or without content, to change the overlay div. Additionally the modal can implement a content slot to change the content wrapper. If a content slot is passed, then the content of that slot is rendered as inner content of the modal, otherwise as a shortcut, the inner_block of the component is used.

Attributes

  • class - Extra classes to pass to the modal. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed to the underlying ui_content/1 component.

Attributes - overlay slot

  • class - Extra classes to pass to the main tag. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed on to the main tag.

Attributes - content slot

  • class - Extra classes to pass to the main tag. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed on to the main tag.

See bitstyles content docs for examples, and for the default variants available.

Default modal

iex> assigns = %{}
...> render ~H"""
...> <.ui_modal>
...>   Content
...> </.ui_modal>
...> """
"""
<div class="o-modal" aria-modal="true" role="dialog">
  <div class="o-modal__overlay">
  </div>
  <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col" role="document">
    Content
  </div>
</div>
"""

Small modal

iex> assigns = %{}
...> render ~H"""
...> <.ui_modal aria-labelledby="dialog-title" variant="s" class="foo">
...>   <:content class="bar" foo="bar">
...>     Content
...>   </:content>
...> </.ui_modal>
...> """
"""
<div class="o-modal foo" aria-modal="true" role="dialog" aria-labelledby="dialog-title">
  <div class="o-modal__overlay">
  </div>
  <div class="a-content a-content--s o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col bar" foo="bar" role="document">
    Content
  </div>
</div>
"""

Small modal with extra overlay

iex> assigns = %{}
...> render ~H"""
...> <.ui_modal>
...>   <:overlay class="extra" data-foo="bar" />
...>   Content
...> </.ui_modal>
...> """
"""
<div class="o-modal" aria-modal="true" role="dialog">
  <div class="o-modal__overlay extra" data-foo="bar">
  </div>
  <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col" role="document">
    Content
  </div>
</div>
"""

Small modal with extra overlay content

iex> assigns = %{}
...> render ~H"""
...> <.ui_modal>
...>   <:overlay class="extra" data-foo="bar">
...>     <span class="u-hidden">Overlay content</span>
...>   </:overlay>
...>   Content
...> </.ui_modal>
...> """
"""
<div class="o-modal" aria-modal="true" role="dialog">
  <div class="o-modal__overlay extra" data-foo="bar">
    <span class="u-hidden">
      Overlay content
    </span>
  </div>
  <div class="a-content o-modal__content a-card u-padding-xl@m u-padding-l u-flex u-flex-col" role="document">
    Content
  </div>
</div>
"""