Skip to content

Commit

Permalink
feat: Add Slider component
Browse files Browse the repository at this point in the history 
 Adds a new Slider component with customizable options for navigation and styling.

 - Includes SliderContainer, SliderItems, and SliderNav subcomponents.
 - Updated documentation and examples.
  • Loading branch information
ncoop57 committed Jan 13, 2025
1 parent 24eebde commit dcc4c2e
Show file tree
Hide file tree
Showing 4 changed files with 220 additions and 3 deletions.
27 changes: 27 additions & 0 deletions docs/api_reference/api_reference.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,33 @@ def create_doc_section(*content, title):

def string2code_string(code: str) -> tuple: return eval(code), code

# Sliders

def ex_sliders_1():
return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])

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

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

docs_sliders = create_doc_section(
"Here is a simple example of a slider:",
fn2code_string(ex_sliders_1),
"Here is a slider with cards:",
fn2code_string(ex_sliders_2),
"Here is a slider with cards and autoplay:",
fn2code_string(ex_sliders_3),
"Typically you want to use the `Slider` component, but if you need more control you can use the `SliderContainer`, `SliderItems`, and `SliderNav` components.",
Slider,
SliderContainer,
SliderItems,
SliderNav,
title="Sliders")

# Buttons

def ex_buttons():
Expand Down
4 changes: 4 additions & 0 deletions monsterui/_modidx.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,10 @@
'monsterui.franken.SectionT._generate_next_value_': ( 'franken.html#sectiont._generate_next_value_',
'monsterui/franken.py'),
'monsterui.franken.Select': ('franken.html#select', 'monsterui/franken.py'),
'monsterui.franken.Slider': ('franken.html#slider', 'monsterui/franken.py'),
'monsterui.franken.SliderContainer': ('franken.html#slidercontainer', 'monsterui/franken.py'),
'monsterui.franken.SliderItems': ('franken.html#slideritems', 'monsterui/franken.py'),
'monsterui.franken.SliderNav': ('franken.html#slidernav', 'monsterui/franken.py'),
'monsterui.franken.Switch': ('franken.html#switch', 'monsterui/franken.py'),
'monsterui.franken.TabContainer': ('franken.html#tabcontainer', 'monsterui/franken.py'),
'monsterui.franken.Table': ('franken.html#table', 'monsterui/franken.py'),
Expand Down
58 changes: 55 additions & 3 deletions monsterui/franken.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
'UkIcon', 'UkIconLink', 'DiceBearAvatar', 'FlexT', 'Grid', 'DivFullySpaced', 'DivCentered', 'DivLAligned',
'DivRAligned', 'DivVStacked', 'DivHStacked', 'NavT', 'NavContainer', 'NavParentLi', 'NavDividerLi',
'NavHeaderLi', 'NavSubtitle', 'NavCloseLi', 'NavBarContainer', 'NavBarLSide', 'NavBarRSide', 'NavBarCenter',
'NavBarNav', 'NavBarSubtitle', 'NavBarNavContainer', 'NavBarParentIcon', 'DropDownNavContainer',
'TabContainer', 'CardT', 'CardTitle', 'CardHeader', 'CardBody', 'CardFooter', 'CardContainer', 'Card',
'TableT', 'Table', 'Td', 'Th', 'Tbody', 'TableFromLists', 'TableFromDicts', 'apply_classes', 'render_md']
'NavBarNav', 'NavBarSubtitle', 'NavBarNavContainer', 'NavBarParentIcon', 'SliderContainer', 'SliderItems',
'SliderNav', 'Slider', 'DropDownNavContainer', 'TabContainer', 'CardT', 'CardTitle', 'CardHeader',
'CardBody', 'CardFooter', 'CardContainer', 'Card', 'TableT', 'Table', 'Td', 'Th', 'Tbody', 'TableFromLists',
'TableFromDicts', 'apply_classes', 'render_md']

# %% ../nbs/02_franken.ipynb
import fasthtml.common as fh
Expand Down Expand Up @@ -924,6 +925,57 @@ def NavBarNavContainer(*li, # Components
# %% ../nbs/02_franken.ipynb
def NavBarParentIcon(): return Span(uk_navbar_parent_icon=True)

# %% ../nbs/02_franken.ipynb
def SliderContainer(
*c, # Components
cls='', # Additional classes on the container
uk_slider=True, # See FrankenUI Slider docs for more options
**kwargs # Additional args for the container
) -> FT: # Div(..., cls='relative', uk_slider=True, ...)
"Creates a slider container"
return Div(*c, cls=('relative', stringify(cls)), uk_slider=uk_slider, **kwargs)

# %% ../nbs/02_franken.ipynb
def SliderItems(
*c, # Components
cls='', # Additional classes for the items
**kwargs # Additional args for the items
) -> FT: # Div(..., cls='uk-slider-items uk-grid', ...)
"Creates a slider items container"
return Div(*c, cls=('uk-slider-items uk-grid', stringify(cls)), **kwargs)

# %% ../nbs/02_franken.ipynb
def SliderNav(
cls='uk-position-small uk-hidden-hover', # Additional classes for the navigation
prev_cls='absolute left-0 top-1/2 -translate-y-1/2', # Additional classes for the previous navigation
next_cls='absolute right-0 top-1/2 -translate-y-1/2', # Additional classes for the next navigation
**kwargs # Additional args for the navigation
) -> FT: # Left and right navigation arrows for Slider component
"Navigation arrows for Slider component"
return (
fh.A(cls=(prev_cls, stringify(cls)), href='',
uk_slidenav_previous=True, uk_slider_item='previous', **kwargs),
fh.A(cls=(next_cls, stringify(cls)), href='',
uk_slidenav_next=True, uk_slider_item='next', **kwargs)
)

# %% ../nbs/02_franken.ipynb
def Slider(*c, # Items to show in slider
cls='', # Classes for slider container
items_cls='gap-4', # Classes for items container
nav=True, # Whether to show navigation arrows
nav_cls='', # Classes for navigation arrows
**kwargs # Additional args for slider container
) -> FT: # SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?)
"Creates a slider with optional navigation arrows"
nav_comp = SliderNav(cls=nav_cls) if nav else ()
return SliderContainer(
SliderItems(*c, cls=items_cls),
*nav_comp,
cls=cls,
**kwargs
)

# %% ../nbs/02_franken.ipynb
def DropDownNavContainer(*li, # Components
cls=NavT.primary, # Additional classes on the nav
Expand Down
134 changes: 134 additions & 0 deletions nbs/02_franken.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,28 @@
"from pathlib import Path"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "e5ef9de1",
"metadata": {},
"outputs": [],
"source": [
"#| hide\n",
"from fasthtml.jupyter import *\n",
"from IPython.display import HTML, Markdown, Image\n",
"from monsterui.core import Theme\n",
"\n",
"if 'server' in globals(): server.stop()\n",
"#| export\n",
"app,rt = fast_app(pico=False, hdrs=(Theme.violet.headers()),\n",
" static_path=os.path.abspath('.'), nb_hdrs=False,\n",
" bodykw={\"class\":\"uk-overflow-auto min-h-screen\"})\n",
"\n",
"server = JupyUvi(app)\n",
"Show = partial(HTMX, app=app)"
]
},
{
"cell_type": "markdown",
"id": "4d6b7aca",
Expand Down Expand Up @@ -1696,6 +1718,118 @@
"def NavBarParentIcon(): return Span(uk_navbar_parent_icon=True)"
]
},
{
"cell_type": "markdown",
"id": "332e3968",
"metadata": {},
"source": [
"## Slider"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a6ea2c0e",
"metadata": {},
"outputs": [],
"source": [
"#| export\n",
"def SliderContainer(\n",
" *c, # Components\n",
" cls='', # Additional classes on the container\n",
" uk_slider=True, # See FrankenUI Slider docs for more options\n",
" **kwargs # Additional args for the container\n",
" ) -> FT: # Div(..., cls='relative', uk_slider=True, ...)\n",
" \"Creates a slider container\"\n",
" return Div(*c, cls=('relative', stringify(cls)), uk_slider=uk_slider, **kwargs)"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "da2f1202",
"metadata": {},
"outputs": [],
"source": [
"#| export\n",
"def SliderItems(\n",
" *c, # Components\n",
" cls='', # Additional classes for the items\n",
" **kwargs # Additional args for the items\n",
" ) -> FT: # Div(..., cls='uk-slider-items uk-grid', ...)\n",
" \"Creates a slider items container\"\n",
" return Div(*c, cls=('uk-slider-items uk-grid', stringify(cls)), **kwargs)"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "e25bfae7",
"metadata": {},
"outputs": [],
"source": [
"# Show(SliderContainer(SliderItems(*[Img(src=f'https://picsum.photos/200/200?random={i}', style='width:200px') for i in range(5)])))"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "7edf26f7",
"metadata": {},
"outputs": [],
"source": [
"#| export\n",
"def SliderNav(\n",
" cls='uk-position-small uk-hidden-hover', # Additional classes for the navigation\n",
" prev_cls='absolute left-0 top-1/2 -translate-y-1/2', # Additional classes for the previous navigation\n",
" next_cls='absolute right-0 top-1/2 -translate-y-1/2', # Additional classes for the next navigation\n",
" **kwargs # Additional args for the navigation\n",
" ) -> FT: # Left and right navigation arrows for Slider component\n",
" \"Navigation arrows for Slider component\"\n",
" return (\n",
" fh.A(cls=(prev_cls, stringify(cls)), href='',\n",
" uk_slidenav_previous=True, uk_slider_item='previous', **kwargs),\n",
" fh.A(cls=(next_cls, stringify(cls)), href='',\n",
" uk_slidenav_next=True, uk_slider_item='next', **kwargs)\n",
" )"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "5aae8c03",
"metadata": {},
"outputs": [],
"source": [
"#| export\n",
"def Slider(*c, # Items to show in slider\n",
" cls='', # Classes for slider container\n",
" items_cls='gap-4', # Classes for items container\n",
" nav=True, # Whether to show navigation arrows\n",
" nav_cls='', # Classes for navigation arrows\n",
" **kwargs # Additional args for slider container\n",
" ) -> FT: # SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?)\n",
" \"Creates a slider with optional navigation arrows\"\n",
" nav_comp = SliderNav(cls=nav_cls) if nav else ()\n",
" return SliderContainer(\n",
" SliderItems(*c, cls=items_cls),\n",
" *nav_comp,\n",
" cls=cls,\n",
" **kwargs\n",
" )"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "706f6ccc",
"metadata": {},
"outputs": [],
"source": [
"# Show(Slider(*[Div(Img(src=f'https://picsum.photos/200/200?random={i}'))\n",
"# for i in range(5)]), link=True)"
]
},
{
"cell_type": "markdown",
"id": "f0fa7a22",
Expand Down

0 comments on commit dcc4c2e

Please sign in to comment.