Modals API Reference

Example Modal

def ex_modal():
    return Div(
        Button("Open Modal",data_uk_toggle="target: #my-modal" ),
        Modal(ModalTitle("Simple Test Modal"), 
              P("With some somewhat brief content to show that it works!", cls=TextPresets.muted_sm),
              footer=ModalCloseButton("Close", cls=ButtonT.primary),id='my-modal'))

Modal

Source

Modal(*c, header=None, footer=None, cls=(), dialog_cls=(), header_cls='p-6', body_cls='space-y-6', footer_cls=(), id='', open=False, **kwargs) -> fastcore.xml.FT

Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you

Params

c Components to put in the ModalBody (often forms, sign in buttons, images, etc.)
header Components that go in the ModalHeader (often a ModalTitle)
footer Components that go in the ModalFooter (often a ModalCloseButton)
cls Additional classes on the outermost ModalContainer
dialog_cls Additional classes on the ModalDialog
header_cls Additional classes on the ModalHeader
body_cls Additional classes on the ModalBody
footer_cls Additional classes on the ModalFooter
id id for the outermost container
open Whether the modal is open (typically used for HTMX controlled modals)
kwargs

Returns: Fully styled modal FT Component

ModalCloseButton

Source

ModalCloseButton(*c, cls='absolute top-3 right-3', htmx=False, **kwargs) -> fastcore.xml.FT

Creates a button that closes a modal with js

Params

c Components to put in the button (often text and/or an icon)
cls Additional classes on the button
htmx Whether to use HTMX to close the modal (must add hx_get to a route that closes the modal)
kwargs

Returns: Button(..., cls='uk-modal-close') + hx_target and hx_swap if htmx is True

The remainder of the Modal functions below are used internally by the `Modal` function for you. You shouldn't need to use them unless you're doing something really special.

ModalTitle

Source

ModalTitle(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a modal title

Params

c Components to put in the ModalTitle (often text)
cls Additional classes on the ModalTitle
kwargs

Returns: H2(..., cls='uk-modal-title')

ModalFooter

Source

ModalFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a modal footer

Params

c Components to put in the ModalFooter (often buttons)
cls Additional classes on the ModalFooter
kwargs

Returns: Div(..., cls='uk-modal-footer')

ModalBody

Source

ModalBody(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a modal body

Params

c Components to put in the ModalBody (often forms, sign in buttons, images, etc.)
cls Additional classes on the ModalBody
kwargs

Returns: Div(..., cls='uk-modal-body')

ModalHeader

Source

ModalHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a modal header

Params

c Components to put in the ModalHeader
cls Additional classes on the ModalHeader
kwargs

Returns: Div(..., cls='uk-modal-header')

ModalDialog

Source

ModalDialog(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a modal dialog

Params

c Components to put in the ModalDialog (often ModalBody, ModalHeader, etc)
cls Additional classes on the ModalDialog
kwargs

Returns: Div(..., cls='uk-modal-dialog')

ModalContainer

Source

ModalContainer(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a modal container that components go in

Params

c Components to put in the modal (often ModalDialog)
cls Additional classes on the ModalContainer
kwargs

Returns: Div(..., cls='uk-modal uk-modal-container')