组件扩展

对标准 HTML 组件的简单扩展，例如添加合理的默认值
from pprint import pprint

源代码

A

 A (*c, hx_get=None, target_id=None, hx_swap=None, href='#', 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_post=None, hx_put=None, hx_delete=None, hx_patch=None,
    hx_trigger=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 标签；href 默认为 ‘#’，以便与 HTMX 更简洁地配合使用

A('text', ht_get='/get', target_id='id')
<a href="#" ht-get="/get" hx-target="#id">text</a>

源代码

AX

 AX (txt, hx_get=None, target_id=None, hx_swap=None, href='#',
     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_post=None, hx_put=None,
     hx_delete=None, hx_patch=None, hx_trigger=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 标签，允许 hx_get、target_id 和 hx_swap 作为位置参数

AX('text', '/get', 'id')
<a href="#" hx-get="/get" hx-target="#id">text</a>

表单

源代码

Form

 Form (*c, enctype='multipart/form-data', 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)

一个 Form 标签；与普通的 ft_hx 版本相同，只是默认 enctype='multipart/form-data'

源代码

Hidden

 Hidden (value:Any='', id:Any=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)

一个类型为 ‘hidden’ 的 Input

源代码

CheckboxX

 CheckboxX (checked:bool=False, label=None, value='1', id=None, name=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)

一个可选地放在 Label 内的复选框，其前有一个名称匹配的 Hidden

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

源代码

Script

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

一个不对其代码进行转义的 Script 标签

源代码

Style

 Style (*c, id=None, cls=None, title=None, style=None, attrmap=None,
        valmap=None, ft_cls=None, **kwargs)

一个不对其代码进行转义的 Style 标签

Style 和 script 模板

源代码

double_braces

 double_braces (s)

如果单大括号旁边有特殊字符或换行符，则将其转换为双大括号

源代码

undouble_braces

 undouble_braces (s)

如果双大括号旁边有特殊字符或换行符，则将其转换为单大括号

源代码

loose_format

 loose_format (s, **kw)

使用 kw 格式化字符串 s，对模板参数之外的大括号不作严格要求

源代码

ScriptX

 ScriptX (fname, src=None, nomodule=None, type=None, _async=None,
          defer=None, charset=None, crossorigin=None, integrity=None,
          **kw)

一个 script 元素，其内容从 fname 读取

源代码

replace_css_vars

 replace_css_vars (css, pre='tpl', **kwargs)

如果名称前缀与 pre 匹配，则使用 kwargs 替换 var(--) CSS 变量

源代码

StyleX

 StyleX (fname, **kw)

一个 style 元素，其内容从 fname 读取，并使用 kw 中的值替换变量

源代码

Nbsp

 Nbsp ()

一个不间断空格

Surreal 和 JS

源代码

Surreal

 Surreal (code:str)

将 code 包装在 domReadyExecute 中，并设置 m=me() 和 p=me('-')

源代码

On

 On (code:str, event:str='click', sel:str='', me=True)

一个针对选择器 sel,p 上的 event 的异步 surreal.js 脚本块事件处理程序，可使用父元素 p、事件 ev 和目标 e

源代码

Prev

 Prev (code:str, event:str='click')

一个用于前一个兄弟元素上 event 的异步 surreal.js 脚本块事件处理程序，其变量与 On 相同

源代码

Now

 Now (code:str, sel:str='')

一个作用于选择器 me(sel) 的异步 surreal.js 脚本块

源代码

AnyNow

 AnyNow (sel:str, code:str)

一个作用于选择器 any(sel) 的异步 surreal.js 脚本块

源代码

run_js

 run_js (js, id=None, **kw)

运行 js 脚本，如果需要，会根据调用者的名称自动生成 id，并对任何 kw 参数进行 js 转义

源代码

HtmxOn

 HtmxOn (eventname:str, code:str)

源代码

jsd

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

jsdelivr 的 Script 或 CSS Link 标签，或 URL

其他辅助工具

源代码

Fragment

 Fragment (*c)

一个空标签，用作容器

fts = Fragment(P('1st'), P('2nd'))
print(to_xml(fts))
  <p>1st</p>
  <p>2nd</p>

源代码

Titled

 Titled (title:str='FastHTML app', *args, cls='container', target_id=None,
         hx_vals=None, hx_target=None, id=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)

一个包含 Title、H1 和任何提供的子元素的 HTML 片段

show(Titled('my page', P('para')))
我的页面 - FastHTML 框架

我的页面

段落

源代码

Socials

 Socials (title, site_name, description, image, url=None, w=1200, h=630,
          twitter_site=None, creator=None, card='summary')

用于 OG 和 Twitter 的社交媒体卡片头部信息

源代码

YouTubeEmbed

 YouTubeEmbed (video_id:str, width:int=560, height:int=315,
               start_time:int=0, no_controls:bool=False,
               title:str='YouTube video player', cls:str='', **kwargs)

嵌入一个 YouTube 视频

源代码

Favicon

 Favicon (light_icon, dark_icon)

用于浅色和深色模式的 favicon 头部信息

源代码

clear

 clear (id)

源代码

with_sid

 with_sid (app, dest, path='/')