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:
219
docs/vendor/monsterui/api_ref/docs_sliders.md
vendored
Normal file
219
docs/vendor/monsterui/api_ref/docs_sliders.md
vendored
Normal file
@@ -0,0 +1,219 @@
|
||||
# Carousel Sliders API Reference
|
||||
|
||||
Here is a simple example of a slider:
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
[code]
|
||||
|
||||
def ex_sliders_1():
|
||||
return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])
|
||||
|
||||
[/code]
|
||||
|
||||
Here is a slider with cards:
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
### Card 0
|
||||
|
||||
Card 0 content
|
||||
|
||||
### Card 1
|
||||
|
||||
Card 1 content
|
||||
|
||||
### Card 2
|
||||
|
||||
Card 2 content
|
||||
|
||||
### Card 3
|
||||
|
||||
Card 3 content
|
||||
|
||||
### Card 4
|
||||
|
||||
Card 4 content
|
||||
|
||||
### Card 5
|
||||
|
||||
Card 5 content
|
||||
|
||||
### Card 6
|
||||
|
||||
Card 6 content
|
||||
|
||||
### Card 7
|
||||
|
||||
Card 7 content
|
||||
|
||||
### Card 8
|
||||
|
||||
Card 8 content
|
||||
|
||||
### Card 9
|
||||
|
||||
Card 9 content
|
||||
|
||||
[code]
|
||||
|
||||
def ex_sliders_2():
|
||||
def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content'))
|
||||
return Slider(*[_card(i) for i in range(10)])
|
||||
|
||||
[/code]
|
||||
|
||||
Here is a slider with cards and autoplay:
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
### Card 0
|
||||
|
||||
Card 0 content
|
||||
|
||||
### Card 1
|
||||
|
||||
Card 1 content
|
||||
|
||||
### Card 2
|
||||
|
||||
Card 2 content
|
||||
|
||||
### Card 3
|
||||
|
||||
Card 3 content
|
||||
|
||||
### Card 4
|
||||
|
||||
Card 4 content
|
||||
|
||||
### Card 5
|
||||
|
||||
Card 5 content
|
||||
|
||||
### Card 6
|
||||
|
||||
Card 6 content
|
||||
|
||||
### Card 7
|
||||
|
||||
Card 7 content
|
||||
|
||||
### Card 8
|
||||
|
||||
Card 8 content
|
||||
|
||||
### Card 9
|
||||
|
||||
Card 9 content
|
||||
|
||||
[code]
|
||||
|
||||
def ex_sliders_3():
|
||||
def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content'))
|
||||
return Slider(*[_card(i) for i in range(10)], items_cls='gap-10', uk_slider='autoplay: true; autoplay-interval: 1000')
|
||||
|
||||
[/code]
|
||||
|
||||
Typically you want to use the `Slider` component, but if you need more control you can use the `SliderContainer`, `SliderItems`, and `SliderNav` components.
|
||||
|
||||
### Slider
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
Slider(*c, cls='', items_cls='gap-4', nav=True, nav_cls='', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a slider with optional navigation arrows
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Items to show in slider
|
||||
|
||||
* `cls` Classes for slider container
|
||||
|
||||
* `items_cls` Classes for items container
|
||||
|
||||
* `nav` Whether to show navigation arrows
|
||||
|
||||
* `nav_cls` Classes for navigation arrows
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?)
|
||||
|
||||
### SliderContainer
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
SliderContainer(*c, cls='', uk_slider=True, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a slider container
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the container
|
||||
|
||||
* `uk_slider` See FrankenUI Slider docs for more options
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div(..., cls='relative', uk_slider=True, ...)
|
||||
|
||||
### SliderItems
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
SliderItems(*c, cls='', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a slider items container
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes for the items
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div(..., cls='uk-slider-items uk-grid', ...)
|
||||
|
||||
### SliderNav
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
SliderNav(cls='uk-position-small uk-hidden-hover', prev_cls='absolute left-0 top-1/2 -translate-y-1/2', next_cls='absolute right-0 top-1/2 -translate-y-1/2', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Navigation arrows for Slider component
|
||||
|
||||
**Params**
|
||||
|
||||
* `cls` Additional classes for the navigation
|
||||
|
||||
* `prev_cls` Additional classes for the previous navigation
|
||||
|
||||
* `next_cls` Additional classes for the next navigation
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Left and right navigation arrows for Slider component
|
||||
|
||||
Reference in New Issue
Block a user