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:
412
docs/vendor/monsterui/api_ref/docs_navigation.md
vendored
Normal file
412
docs/vendor/monsterui/api_ref/docs_navigation.md
vendored
Normal file
@@ -0,0 +1,412 @@
|
||||
# Navigation (Nav, NavBar, Tabs, etc.) API Reference
|
||||
|
||||
# Nav, NavBar, DowDownNav, and Tab examples
|
||||
|
||||
* * *
|
||||
|
||||
## Nav
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
* Option 1
|
||||
* Option 2
|
||||
* Option 3
|
||||
|
||||
[code]
|
||||
|
||||
def ex_nav1():
|
||||
mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
|
||||
return NavContainer(*mbrs1)
|
||||
|
||||
[/code]
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
* NavHeaderLi
|
||||
* Option 1
|
||||
* Option 2
|
||||
* Option 3
|
||||
* Subtitle Ex
|
||||
|
||||
NavSubtitle text to be shown
|
||||
|
||||
* * Parent Name
|
||||
* Child 1
|
||||
* Child 2
|
||||
* Child 3
|
||||
|
||||
[code]
|
||||
|
||||
def ex_nav2():
|
||||
mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
|
||||
mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))]
|
||||
|
||||
return NavContainer(
|
||||
NavHeaderLi("NavHeaderLi"),
|
||||
*mbrs1,
|
||||
Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))),
|
||||
NavDividerLi(),
|
||||
NavParentLi(
|
||||
A('Parent Name'),
|
||||
NavContainer(*mbrs2,parent=False),
|
||||
),
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
## Navbars
|
||||
|
||||
Fully responsive simple navbar using the high level API. This will collapse to a hamburger menu on mobile devices. See the Scrollspy example for a more complex navbar example.
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
### My Blog
|
||||
|
||||
Page1Page2Page3
|
||||
|
||||
Page1Page2Page3
|
||||
|
||||
[code]
|
||||
|
||||
def ex_navbar1():
|
||||
return NavBar(A("Page1",href='/rt1'),
|
||||
A("Page2",href='/rt2'),
|
||||
A("Page3",href='/rt3'),
|
||||
brand=H3('My Blog'))
|
||||
|
||||
[/code]
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
Page1Page2
|
||||
|
||||
Page1Page2
|
||||
|
||||
[code]
|
||||
|
||||
def ex_navbar2():
|
||||
return NavBar(
|
||||
A(Input(placeholder='search')),
|
||||
A(UkIcon("rocket")),
|
||||
A('Page1',href='/rt1'),
|
||||
A("Page2", href='/rt3'),
|
||||
brand=DivLAligned(Img(src='/api_reference/logo.svg'),UkIcon('rocket',height=30,width=30)))
|
||||
|
||||
[/code]
|
||||
|
||||
## Drop Down Navs
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
Open DropDown
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
|
||||
[code]
|
||||
|
||||
def ex_navdrop():
|
||||
return Div(
|
||||
Button("Open DropDown"),
|
||||
DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href='')))))
|
||||
|
||||
[/code]
|
||||
|
||||
## Tabs
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
* Active
|
||||
* Item
|
||||
* Item
|
||||
* Disabled
|
||||
|
||||
[code]
|
||||
|
||||
def ex_tabs2():
|
||||
return Container(
|
||||
TabContainer(
|
||||
Li(A("Active",href='javascript:void(0);', cls='uk-active')),
|
||||
Li(A("Item",href='javascript:void(0);')),
|
||||
Li(A("Item",href='javascript:void(0);')),
|
||||
Li(A("Disabled", cls='uk-disabled'))))
|
||||
|
||||
[/code]
|
||||
|
||||
A tabs can use any method of navigation (htmx, or href). However, often these are use in conjunction with switchers do to this client side
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
* Active
|
||||
* Item
|
||||
* Item
|
||||
* Disabled
|
||||
|
||||
* # Tab 1
|
||||
|
||||
* # Tab 2
|
||||
|
||||
* # Tab 3
|
||||
|
||||
[code]
|
||||
|
||||
def ex_tabs1():
|
||||
return Container(
|
||||
TabContainer(
|
||||
Li(A("Active",href='#', cls='uk-active')),
|
||||
Li(A("Item",href='#')),
|
||||
Li(A("Item",href='#')),
|
||||
Li(A("Disabled",href='#', cls='uk-disabled')),
|
||||
uk_switcher='connect: #component-nav; animation: uk-animation-fade',
|
||||
alt=True),
|
||||
Ul(id="component-nav", cls="uk-switcher")(
|
||||
Li(H1("Tab 1")),
|
||||
Li(H1("Tab 2")),
|
||||
Li(H1("Tab 3"))))
|
||||
|
||||
[/code]
|
||||
|
||||
# API Docs
|
||||
|
||||
### NavBar
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavBar(*c, brand=h3(('Title',),{'class': 'uk-h3 '}), right_cls='items-center space-x-4', mobile_cls='space-y-4', sticky: bool = False, uk_scrollspy_nav: bool | str = False, cls='p-4', scrollspy_cls=<ScrollspyT.underline: 'navbar-underline'>, menu_id=None) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a responsive navigation bar with mobile menu support
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Component for right side of navbar (Often A tag links)
|
||||
|
||||
* `brand` Brand/logo component for left side
|
||||
|
||||
* `right_cls` Spacing for desktop links
|
||||
|
||||
* `mobile_cls` Spacing for mobile links
|
||||
|
||||
* `sticky` Whether to stick to the top of the page while scrolling
|
||||
|
||||
* `uk_scrollspy_nav` Whether to use scrollspy for navigation
|
||||
|
||||
* `cls` Classes for navbar
|
||||
|
||||
* `scrollspy_cls` Scrollspy class (usually ScrollspyT.*)
|
||||
|
||||
* `menu_id` ID for menu container (used for mobile toggle)
|
||||
|
||||
**Returns:** Responsive NavBar
|
||||
|
||||
### TabContainer
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
TabContainer(*li, cls='', alt=False, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> A TabContainer where children will be different tabs
|
||||
|
||||
**Params**
|
||||
|
||||
* `li` Components
|
||||
|
||||
* `cls` Additional classes on the `Ul`
|
||||
|
||||
* `alt` Whether to use an alternative tab style
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Tab container
|
||||
|
||||
### NavContainer
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavContainer(*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True, uk_nav=False, uk_scrollspy_nav=False, sticky=False, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a navigation container (useful for creating a sidebar navigation). A Nav is a list (NavBar is something different)
|
||||
|
||||
**Params**
|
||||
|
||||
* `li` List items are navigation elements (Special `Li` such as `NavParentLi`, `NavDividerLi`, `NavHeaderLi`, `NavSubtitle`, `NavCloseLi` can also be used)
|
||||
|
||||
* `cls` Additional classes on the nav
|
||||
|
||||
* `parent` Whether this nav is a _parent_ or _sub_ nav
|
||||
|
||||
* `uk_nav` True for default collapsible behavior, see frankenui docs for more advanced options
|
||||
|
||||
* `uk_scrollspy_nav` Activates scrollspy linking each item `A` tags `href` to content's `id` attribute
|
||||
|
||||
* `sticky` Whether to stick to the top of the page while scrolling
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** FT Component that is a list of `Li` styled for a sidebar navigation menu
|
||||
|
||||
* * *
|
||||
|
||||
### NavT
|
||||
|
||||
__
|
||||
|
||||
Option | Value | Option | Value
|
||||
---|---|---|---
|
||||
default | uk-nav-default | primary | uk-nav-primary
|
||||
secondary | uk-nav-secondary | |
|
||||
|
||||
### NavCloseLi
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavCloseLi(*c, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a navigation list item with a close button
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the li
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Navigation list item with a close button
|
||||
|
||||
### NavSubtitle
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavSubtitle(*c, cls=<TextPresets.muted_sm: 'text-gray-500 dark:text-gray-200 text-sm'>, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a navigation subtitle
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Navigation subtitle
|
||||
|
||||
### NavHeaderLi
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavHeaderLi(*c, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a navigation list item with a header
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the li
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Navigation list item with a header
|
||||
|
||||
### NavDividerLi
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavDividerLi(*c, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a navigation list item with a divider
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the li
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Navigation list item with a divider
|
||||
|
||||
### NavParentLi
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
NavParentLi(*nav_container, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a navigation list item with a parent nav for nesting
|
||||
|
||||
**Params**
|
||||
|
||||
* `nav_container` `NavContainer` container for a nested nav with `parent=False`)
|
||||
|
||||
* `cls` Additional classes on the li
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Navigation list item
|
||||
|
||||
### DropDownNavContainer
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DropDownNavContainer(*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True, uk_nav=False, uk_dropdown=True, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> A Nav that is part of a DropDown
|
||||
|
||||
**Params**
|
||||
|
||||
* `li` Components
|
||||
|
||||
* `cls` Additional classes on the nav
|
||||
|
||||
* `parent` Whether to use a parent nav
|
||||
|
||||
* `uk_nav` True for default collapsible behavior, see https://franken-ui.dev/docs/nav#component-options for more advanced options
|
||||
|
||||
* `uk_dropdown` Whether to use a dropdown
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** DropDown nav container
|
||||
|
||||
Reference in New Issue
Block a user