Pico.css 组件

生成 Pico CSS 标签的基本组件

picocondlink 是类条件的 css link 标签，而 picolink 是常规标签。

show(picocondlink)

source

设置小型类

 set_pico_cls ()

运行此代码以使用 pico 样式对 jupyter 输出进行样式设置：

set_pico_cls()

源

卡片

 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, **kwargs)

A PicoCSS 卡片，作为带有可选标题和页脚的文章实现

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

头部

body

来源

组

 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, **kwargs)

一个PicoCSS组，作为角色为“组”的Fieldset实现

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

source

搜索

 Search (*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, **kwargs)

一个PicoCSS搜索，作为角色为‘搜索’的表单实现

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

源

网格

 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, **kwargs)

一个PicoCSS网格，作为具有类'class’的Div中的子Div实现

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

源

对话框X

 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, **kwargs)

一个PicoCSS对话框，里面有一个卡片

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

源

容器

 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, **kwargs)

一个PicoCSS容器，作为一个带有'class container'的主容器实现

源

Pico忙碌

 PicoBusy ()