animaltrack/docs/vendor/monsterui/api_ref/docs_modals.md

Modals API Reference

Example Modal

See Source

See Output

Open Modal

Simple Test Modal

With some somewhat brief content to show that it works!

Close

[code]

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'))

[/code]

Modal

Source

[code]

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

[/code]

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

[code]

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

[/code]

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

[code]

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

[/code]

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

[code]

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

[/code]

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

[code]

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

[/code]

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

[code]

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

[/code]

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

[code]

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

[/code]

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

[code]

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

[/code]

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')