Pico.css components

Basic components for generating Pico CSS tags

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

Card

 Card (*c, header=None, footer=None, target_id=None, hx_vals=None,
       hx_target=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_swap=None,
       hx_swap_oob=None, hx_include=None, hx_select=None,
       hx_select_oob=None, hx_indicator=None, hx_push_url=None,
       hx_confirm=None, hx_disable=None, hx_replace_url=None,
       hx_disabled_elt=None, hx_ext=None, hx_headers=None,
       hx_history=None, hx_history_elt=None, hx_inherit=None,
       hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
       hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
       hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
       hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
       hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
       hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
       hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
       hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
       hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
       hx_on__after_on_load=None, hx_on__after_process_node=None,
       hx_on__after_request=None, hx_on__after_settle=None,
       hx_on__after_swap=None, hx_on__before_cleanup_element=None,
       hx_on__before_on_load=None, hx_on__before_process_node=None,
       hx_on__before_request=None, hx_on__before_swap=None,
       hx_on__before_send=None, hx_on__before_transition=None,
       hx_on__config_request=None, hx_on__confirm=None,
       hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
       hx_on__history_cache_miss_error=None,
       hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
       hx_on__before_history_save=None, hx_on__load=None,
       hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
       hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
       hx_on__oob_error_no_target=None, hx_on__prompt=None,
       hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
       hx_on__response_error=None, hx_on__send_abort=None,
       hx_on__send_error=None, hx_on__sse_error=None,
       hx_on__sse_open=None, hx_on__swap_error=None,
       hx_on__target_error=None, hx_on__timeout=None,
       hx_on__validation_validate=None, hx_on__validation_failed=None,
       hx_on__validation_halted=None, hx_on__xhr_abort=None,
       hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
       hx_on__xhr_progress=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

foot

source

Group

 Group (*c, target_id=None, hx_vals=None, hx_target=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_swap=None, hx_swap_oob=None, hx_include=None,
        hx_select=None, hx_select_oob=None, hx_indicator=None,
        hx_push_url=None, hx_confirm=None, hx_disable=None,
        hx_replace_url=None, hx_disabled_elt=None, hx_ext=None,
        hx_headers=None, hx_history=None, hx_history_elt=None,
        hx_inherit=None, hx_params=None, hx_preserve=None, hx_prompt=None,
        hx_request=None, hx_sync=None, hx_validate=None, hx_on_blur=None,
        hx_on_change=None, hx_on_contextmenu=None, hx_on_focus=None,
        hx_on_input=None, hx_on_invalid=None, hx_on_reset=None,
        hx_on_select=None, hx_on_submit=None, hx_on_keydown=None,
        hx_on_keypress=None, hx_on_keyup=None, hx_on_click=None,
        hx_on_dblclick=None, hx_on_mousedown=None, hx_on_mouseenter=None,
        hx_on_mouseleave=None, hx_on_mousemove=None, hx_on_mouseout=None,
        hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
        hx_on__abort=None, hx_on__after_on_load=None,
        hx_on__after_process_node=None, hx_on__after_request=None,
        hx_on__after_settle=None, hx_on__after_swap=None,
        hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
        hx_on__before_process_node=None, hx_on__before_request=None,
        hx_on__before_swap=None, hx_on__before_send=None,
        hx_on__before_transition=None, hx_on__config_request=None,
        hx_on__confirm=None, hx_on__history_cache_error=None,
        hx_on__history_cache_miss=None,
        hx_on__history_cache_miss_error=None,
        hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
        hx_on__before_history_save=None, hx_on__load=None,
        hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
        hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
        hx_on__oob_error_no_target=None, hx_on__prompt=None,
        hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
        hx_on__response_error=None, hx_on__send_abort=None,
        hx_on__send_error=None, hx_on__sse_error=None,
        hx_on__sse_open=None, hx_on__swap_error=None,
        hx_on__target_error=None, hx_on__timeout=None,
        hx_on__validation_validate=None, hx_on__validation_failed=None,
        hx_on__validation_halted=None, hx_on__xhr_abort=None,
        hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
        hx_on__xhr_progress=None, **kwargs)

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

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

source

Grid

 Grid (*c, cls='grid', target_id=None, hx_vals=None, hx_target=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_swap=None, hx_swap_oob=None, hx_include=None,
       hx_select=None, hx_select_oob=None, hx_indicator=None,
       hx_push_url=None, hx_confirm=None, hx_disable=None,
       hx_replace_url=None, hx_disabled_elt=None, hx_ext=None,
       hx_headers=None, hx_history=None, hx_history_elt=None,
       hx_inherit=None, hx_params=None, hx_preserve=None, hx_prompt=None,
       hx_request=None, hx_sync=None, hx_validate=None, hx_on_blur=None,
       hx_on_change=None, hx_on_contextmenu=None, hx_on_focus=None,
       hx_on_input=None, hx_on_invalid=None, hx_on_reset=None,
       hx_on_select=None, hx_on_submit=None, hx_on_keydown=None,
       hx_on_keypress=None, hx_on_keyup=None, hx_on_click=None,
       hx_on_dblclick=None, hx_on_mousedown=None, hx_on_mouseenter=None,
       hx_on_mouseleave=None, hx_on_mousemove=None, hx_on_mouseout=None,
       hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
       hx_on__abort=None, hx_on__after_on_load=None,
       hx_on__after_process_node=None, hx_on__after_request=None,
       hx_on__after_settle=None, hx_on__after_swap=None,
       hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
       hx_on__before_process_node=None, hx_on__before_request=None,
       hx_on__before_swap=None, hx_on__before_send=None,
       hx_on__before_transition=None, hx_on__config_request=None,
       hx_on__confirm=None, hx_on__history_cache_error=None,
       hx_on__history_cache_miss=None,
       hx_on__history_cache_miss_error=None,
       hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
       hx_on__before_history_save=None, hx_on__load=None,
       hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
       hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
       hx_on__oob_error_no_target=None, hx_on__prompt=None,
       hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
       hx_on__response_error=None, hx_on__send_abort=None,
       hx_on__send_error=None, hx_on__sse_error=None,
       hx_on__sse_open=None, hx_on__swap_error=None,
       hx_on__target_error=None, hx_on__timeout=None,
       hx_on__validation_validate=None, hx_on__validation_failed=None,
       hx_on__validation_halted=None, hx_on__xhr_abort=None,
       hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
       hx_on__xhr_progress=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, hx_vals=None, hx_target=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_swap=None, hx_swap_oob=None,
          hx_include=None, hx_select=None, hx_select_oob=None,
          hx_indicator=None, hx_push_url=None, hx_confirm=None,
          hx_disable=None, hx_replace_url=None, hx_disabled_elt=None,
          hx_ext=None, hx_headers=None, hx_history=None,
          hx_history_elt=None, hx_inherit=None, hx_params=None,
          hx_preserve=None, hx_prompt=None, hx_request=None, hx_sync=None,
          hx_validate=None, hx_on_blur=None, hx_on_change=None,
          hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
          hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
          hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
          hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
          hx_on_mousedown=None, hx_on_mouseenter=None,
          hx_on_mouseleave=None, hx_on_mousemove=None,
          hx_on_mouseout=None, hx_on_mouseover=None, hx_on_mouseup=None,
          hx_on_wheel=None, hx_on__abort=None, hx_on__after_on_load=None,
          hx_on__after_process_node=None, hx_on__after_request=None,
          hx_on__after_settle=None, hx_on__after_swap=None,
          hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
          hx_on__before_process_node=None, hx_on__before_request=None,
          hx_on__before_swap=None, hx_on__before_send=None,
          hx_on__before_transition=None, hx_on__config_request=None,
          hx_on__confirm=None, hx_on__history_cache_error=None,
          hx_on__history_cache_miss=None,
          hx_on__history_cache_miss_error=None,
          hx_on__history_cache_miss_load=None,
          hx_on__history_restore=None, hx_on__before_history_save=None,
          hx_on__load=None, hx_on__no_sse_source_error=None,
          hx_on__on_load_error=None, hx_on__oob_after_swap=None,
          hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
          hx_on__prompt=None, hx_on__pushed_into_history=None,
          hx_on__replaced_in_history=None, hx_on__response_error=None,
          hx_on__send_abort=None, hx_on__send_error=None,
          hx_on__sse_error=None, hx_on__sse_open=None,
          hx_on__swap_error=None, hx_on__target_error=None,
          hx_on__timeout=None, hx_on__validation_validate=None,
          hx_on__validation_failed=None, hx_on__validation_halted=None,
          hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
          hx_on__xhr_loadstart=None, hx_on__xhr_progress=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

Container

 Container (*args, target_id=None, hx_vals=None, hx_target=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_swap=None,
            hx_swap_oob=None, hx_include=None, hx_select=None,
            hx_select_oob=None, hx_indicator=None, hx_push_url=None,
            hx_confirm=None, hx_disable=None, hx_replace_url=None,
            hx_disabled_elt=None, hx_ext=None, hx_headers=None,
            hx_history=None, hx_history_elt=None, hx_inherit=None,
            hx_params=None, hx_preserve=None, hx_prompt=None,
            hx_request=None, hx_sync=None, hx_validate=None,
            hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
            hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
            hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
            hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
            hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
            hx_on_mouseenter=None, hx_on_mouseleave=None,
            hx_on_mousemove=None, hx_on_mouseout=None,
            hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
            hx_on__abort=None, hx_on__after_on_load=None,
            hx_on__after_process_node=None, hx_on__after_request=None,
            hx_on__after_settle=None, hx_on__after_swap=None,
            hx_on__before_cleanup_element=None,
            hx_on__before_on_load=None, hx_on__before_process_node=None,
            hx_on__before_request=None, hx_on__before_swap=None,
            hx_on__before_send=None, hx_on__before_transition=None,
            hx_on__config_request=None, hx_on__confirm=None,
            hx_on__history_cache_error=None,
            hx_on__history_cache_miss=None,
            hx_on__history_cache_miss_error=None,
            hx_on__history_cache_miss_load=None,
            hx_on__history_restore=None, hx_on__before_history_save=None,
            hx_on__load=None, hx_on__no_sse_source_error=None,
            hx_on__on_load_error=None, hx_on__oob_after_swap=None,
            hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
            hx_on__prompt=None, hx_on__pushed_into_history=None,
            hx_on__replaced_in_history=None, hx_on__response_error=None,
            hx_on__send_abort=None, hx_on__send_error=None,
            hx_on__sse_error=None, hx_on__sse_open=None,
            hx_on__swap_error=None, hx_on__target_error=None,
            hx_on__timeout=None, hx_on__validation_validate=None,
            hx_on__validation_failed=None, hx_on__validation_halted=None,
            hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
            hx_on__xhr_loadstart=None, hx_on__xhr_progress=None, **kwargs)

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

source

PicoBusy

 PicoBusy ()