feat: initial project setup with implementation plan
- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
215
docs/vendor/monsterui/api_ref/docs_modals.md
vendored
Normal file
215
docs/vendor/monsterui/api_ref/docs_modals.md
vendored
Normal file
@@ -0,0 +1,215 @@
|
||||
# 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')
|
||||
|
||||
Reference in New Issue
Block a user