Spaces:
Sleeping
Sleeping
File size: 22,704 Bytes
036b3a6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 |
# Pico.css components
<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->
`picocondlink` is the class-conditional css `link` tag, and `picolink`
is the regular tag.
``` python
show(picocondlink)
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.conditional.min.css">
<style>:root { --pico-font-size: 100%; }</style>
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L30"
target="_blank" style="float:right; font-size:smaller">source</a>
### set_pico_cls
> set_pico_cls ()
Run this to make jupyter outputs styled with pico:
``` python
set_pico_cls()
```
<IPython.core.display.Javascript object>
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L49"
target="_blank" style="float:right; font-size:smaller">source</a>
### 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*
``` python
show(Card('body', header=P('head'), footer=P('foot')))
```
<article>
<header><p>head</p>
</header>
body
<footer><p>foot</p>
</footer>
</article>
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L57"
target="_blank" style="float:right; font-size:smaller">source</a>
### 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’*
``` python
show(Group(Input(), Button("Save")))
```
<fieldset role="group">
<input>
<button>Save</button>
</fieldset>
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L63"
target="_blank" style="float:right; font-size:smaller">source</a>
### Search
> 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, 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 Search, implemented as a Form with role ‘search’*
``` python
show(Search(Input(type="search"), Button("Search")))
```
<form enctype="multipart/form-data" role="search">
<input type="search">
<button>Search</button>
</form>
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L69"
target="_blank" style="float:right; font-size:smaller">source</a>
### 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’*
``` python
colors = [Input(type="color", value=o) for o in ('#e66465', '#53d2c5', '#f6b73c')]
show(Grid(*colors))
```
<div class="grid">
<div><input type="color" value="#e66465">
</div>
<div><input type="color" value="#53d2c5">
</div>
<div><input type="color" value="#f6b73c">
</div>
</div>
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L76"
target="_blank" style="float:right; font-size:smaller">source</a>
### 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*
``` python
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
```
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L83"
target="_blank" style="float:right; font-size:smaller">source</a>
### 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’*
------------------------------------------------------------------------
<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L88"
target="_blank" style="float:right; font-size:smaller">source</a>
### PicoBusy
> PicoBusy ()
|