Component extensions

from pprint import pprint

picocondlink is the class-conditional css link tag, and picolink is the regular tag.

show(picocondlink)

source

set_pico_cls

 set_pico_cls ()

Run this to make jupyter outputs styled with pico:

set_pico_cls()

source

Html

 Html (*c, doctype=True, **kwargs)

An HTML tag, optionally preceeded by !DOCTYPE HTML

source

A

 A (*c, hx_get=None, target_id=None, hx_swap=None, href='#', id=None,
    cls=None, title=None, style=None, accesskey=None,
    contenteditable=None, dir=None, draggable=None, enterkeyhint=None,
    hidden=None, inert=None, inputmode=None, lang=None, popover=None,
    spellcheck=None, tabindex=None, translate=None, hx_post=None,
    hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
    hx_target=None, hx_include=None, hx_select=None, hx_indicator=None,
    hx_push_url=None, hx_confirm=None, hx_disable=None,
    hx_replace_url=None, hx_on=None, **kwargs)

An A tag; href defaults to ‘#’ for more concise use with HTMX

A('text', ht_get='/get', target_id='id')

<a href="#" ht-get="/get" hx-target="#id">text</a>

source

AX

 AX (txt, hx_get=None, target_id=None, hx_swap=None, href='#', id=None,
     cls=None, title=None, style=None, accesskey=None,
     contenteditable=None, dir=None, draggable=None, enterkeyhint=None,
     hidden=None, inert=None, inputmode=None, lang=None, popover=None,
     spellcheck=None, tabindex=None, translate=None, hx_post=None,
     hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
     hx_target=None, hx_include=None, hx_select=None, hx_indicator=None,
     hx_push_url=None, hx_confirm=None, hx_disable=None,
     hx_replace_url=None, hx_on=None, **kwargs)

An A tag with just one text child, allowing hx_get, target_id, and hx_swap to be positional params

AX('text', '/get', 'id')

<a href="#" hx-get="/get" hx-target="#id">text</a>

source

Checkbox

 Checkbox (checked:bool=False, label=None, value='1', target_id=None,
           id=None, cls=None, title=None, style=None, accesskey=None,
           contenteditable=None, dir=None, draggable=None,
           enterkeyhint=None, hidden=None, inert=None, inputmode=None,
           lang=None, popover=None, spellcheck=None, tabindex=None,
           translate=None, hx_get=None, hx_post=None, hx_put=None,
           hx_delete=None, hx_patch=None, hx_trigger=None, hx_target=None,
           hx_swap=None, hx_include=None, hx_select=None,
           hx_indicator=None, hx_push_url=None, hx_confirm=None,
           hx_disable=None, hx_replace_url=None, hx_on=None, **kwargs)

A Checkbox optionally inside a Label

show(Checkbox(True, 'Check me out!'))

Check me out!

source

Card

 Card (*c, header=None, footer=None, target_id=None, id=None, cls=None,
       title=None, style=None, accesskey=None, contenteditable=None,
       dir=None, draggable=None, enterkeyhint=None, hidden=None,
       inert=None, inputmode=None, lang=None, popover=None,
       spellcheck=None, tabindex=None, translate=None, hx_get=None,
       hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
       hx_trigger=None, hx_target=None, hx_swap=None, hx_include=None,
       hx_select=None, hx_indicator=None, hx_push_url=None,
       hx_confirm=None, hx_disable=None, hx_replace_url=None, hx_on=None,
       **kwargs)

A PicoCSS Card, implemented as an Article with optional Header and Footer

show(Card('body', header=P('head'), footer=P('foot')))

head

body

source

Group

 Group (*c, target_id=None, id=None, cls=None, title=None, style=None,
        accesskey=None, contenteditable=None, dir=None, draggable=None,
        enterkeyhint=None, hidden=None, inert=None, inputmode=None,
        lang=None, popover=None, spellcheck=None, tabindex=None,
        translate=None, hx_get=None, hx_post=None, hx_put=None,
        hx_delete=None, hx_patch=None, hx_trigger=None, hx_target=None,
        hx_swap=None, hx_include=None, hx_select=None, hx_indicator=None,
        hx_push_url=None, hx_confirm=None, hx_disable=None,
        hx_replace_url=None, hx_on=None, **kwargs)

A PicoCSS Group, implemented as a Fieldset with role ‘group’

show(Group(Input(), Button("Save")))

source

Search

 Search (*c, target_id=None, id=None, cls=None, title=None, style=None,
         accesskey=None, contenteditable=None, dir=None, draggable=None,
         enterkeyhint=None, hidden=None, inert=None, inputmode=None,
         lang=None, popover=None, spellcheck=None, tabindex=None,
         translate=None, hx_get=None, hx_post=None, hx_put=None,
         hx_delete=None, hx_patch=None, hx_trigger=None, hx_target=None,
         hx_swap=None, hx_include=None, hx_select=None, hx_indicator=None,
         hx_push_url=None, hx_confirm=None, hx_disable=None,
         hx_replace_url=None, hx_on=None, **kwargs)

A PicoCSS Search, implemented as a Form with role ‘search’

show(Search(Input(type="search"), Button("Search")))

source

Grid

 Grid (*c, cls='grid', target_id=None, id=None, title=None, style=None,
       accesskey=None, contenteditable=None, dir=None, draggable=None,
       enterkeyhint=None, hidden=None, inert=None, inputmode=None,
       lang=None, popover=None, spellcheck=None, tabindex=None,
       translate=None, hx_get=None, hx_post=None, hx_put=None,
       hx_delete=None, hx_patch=None, hx_trigger=None, hx_target=None,
       hx_swap=None, hx_include=None, hx_select=None, hx_indicator=None,
       hx_push_url=None, hx_confirm=None, hx_disable=None,
       hx_replace_url=None, hx_on=None, **kwargs)

A PicoCSS Grid, implemented as child Divs in a Div with class ‘grid’

colors = [Input(type="color", value=o) for o in ('#e66465', '#53d2c5', '#f6b73c')]
show(Grid(*colors))

source

DialogX

 DialogX (*c, open=None, header=None, footer=None, id=None,
          target_id=None, cls=None, title=None, style=None,
          accesskey=None, contenteditable=None, dir=None, draggable=None,
          enterkeyhint=None, hidden=None, inert=None, inputmode=None,
          lang=None, popover=None, spellcheck=None, tabindex=None,
          translate=None, hx_get=None, hx_post=None, hx_put=None,
          hx_delete=None, hx_patch=None, hx_trigger=None, hx_target=None,
          hx_swap=None, hx_include=None, hx_select=None,
          hx_indicator=None, hx_push_url=None, hx_confirm=None,
          hx_disable=None, hx_replace_url=None, hx_on=None, **kwargs)

A PicoCSS Dialog, with children inside a Card

hdr = Div(Button(aria_label="Close", rel="prev"), P('confirm'))
ftr = Div(Button('Cancel', cls="secondary"), Button('Confirm'))
d = DialogX('thank you!', header=hdr, footer=ftr, open=None, id='dlgtest')
# use js or htmx to display modal

source

Hidden

 Hidden (value:str='', target_id=None, id=None, cls=None, title=None,
         style=None, accesskey=None, contenteditable=None, dir=None,
         draggable=None, enterkeyhint=None, hidden=None, inert=None,
         inputmode=None, lang=None, popover=None, spellcheck=None,
         tabindex=None, translate=None, hx_get=None, hx_post=None,
         hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
         hx_target=None, hx_swap=None, hx_include=None, hx_select=None,
         hx_indicator=None, hx_push_url=None, hx_confirm=None,
         hx_disable=None, hx_replace_url=None, hx_on=None, **kwargs)

An Input of type ‘hidden’

source

Container

 Container (*args, target_id=None, id=None, cls=None, title=None,
            style=None, accesskey=None, contenteditable=None, dir=None,
            draggable=None, enterkeyhint=None, hidden=None, inert=None,
            inputmode=None, lang=None, popover=None, spellcheck=None,
            tabindex=None, translate=None, hx_get=None, hx_post=None,
            hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
            hx_target=None, hx_swap=None, hx_include=None, hx_select=None,
            hx_indicator=None, hx_push_url=None, hx_confirm=None,
            hx_disable=None, hx_replace_url=None, hx_on=None, **kwargs)

A PicoCSS Container, implemented as a Main with class ‘container’

source

Script

 Script (code:str='', id=None, cls=None, title=None, style=None, **kwargs)

A Script tag that doesn’t escape its code

source

Style

 Style (css:str='', id=None, cls=None, title=None, style=None, **kwargs)

A Style tag that doesn’t escape its code

source

Titled

 Titled (title:str='FastHTML app', *args, target_id=None, id=None,
         cls=None, style=None, accesskey=None, contenteditable=None,
         dir=None, draggable=None, enterkeyhint=None, hidden=None,
         inert=None, inputmode=None, lang=None, popover=None,
         spellcheck=None, tabindex=None, translate=None, hx_get=None,
         hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
         hx_trigger=None, hx_target=None, hx_swap=None, hx_include=None,
         hx_select=None, hx_indicator=None, hx_push_url=None,
         hx_confirm=None, hx_disable=None, hx_replace_url=None,
         hx_on=None, **kwargs)

An HTML partial containing a Title, and H1, and any provided children

source

jsd

 jsd (org, repo, root, path, prov='gh', typ='script', ver=None, esm=False,
      **kwargs)

jsdelivr Script or CSS Link tag, or URL