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. SeeBitstylesPhoenix.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 themain
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed on to the main tag.
Attributes - content
slot
class
- Extra classes to pass to themain
tag. SeeBitstylesPhoenix.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>
"""