Spaces:
Sleeping
Sleeping
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> | |
| <meta charset="utf-8"> | |
| <meta name="generator" content="quarto-1.6.40"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | |
| <meta name="description" content="Basic components for generating Pico CSS tags"> | |
| <title>Pico.css components – fasthtml</title> | |
| <style> | |
| code{white-space: pre-wrap;} | |
| span.smallcaps{font-variant: small-caps;} | |
| div.columns{display: flex; gap: min(4vw, 1.5em);} | |
| div.column{flex: auto; overflow-x: auto;} | |
| div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} | |
| ul.task-list{list-style: none;} | |
| ul.task-list li input[type="checkbox"] { | |
| width: 0.8em; | |
| margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ | |
| vertical-align: middle; | |
| } | |
| /* CSS for syntax highlighting */ | |
| pre > code.sourceCode { white-space: pre; position: relative; } | |
| pre > code.sourceCode > span { line-height: 1.25; } | |
| pre > code.sourceCode > span:empty { height: 1.2em; } | |
| .sourceCode { overflow: visible; } | |
| code.sourceCode > span { color: inherit; text-decoration: inherit; } | |
| div.sourceCode { margin: 1em 0; } | |
| pre.sourceCode { margin: 0; } | |
| @media screen { | |
| div.sourceCode { overflow: auto; } | |
| } | |
| @media print { | |
| pre > code.sourceCode { white-space: pre-wrap; } | |
| pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } | |
| } | |
| pre.numberSource code | |
| { counter-reset: source-line 0; } | |
| pre.numberSource code > span | |
| { position: relative; left: -4em; counter-increment: source-line; } | |
| pre.numberSource code > span > a:first-child::before | |
| { content: counter(source-line); | |
| position: relative; left: -1em; text-align: right; vertical-align: baseline; | |
| border: none; display: inline-block; | |
| -webkit-touch-callout: none; -webkit-user-select: none; | |
| -khtml-user-select: none; -moz-user-select: none; | |
| -ms-user-select: none; user-select: none; | |
| padding: 0 4px; width: 4em; | |
| } | |
| pre.numberSource { margin-left: 3em; padding-left: 4px; } | |
| div.sourceCode | |
| { } | |
| @media screen { | |
| pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script><script src="../site_libs/quarto-nav/quarto-nav.js"></script> | |
| <script src="../site_libs/quarto-nav/headroom.min.js"></script> | |
| <script src="../site_libs/clipboard/clipboard.min.js"></script> | |
| <script src="../site_libs/quarto-search/autocomplete.umd.js"></script> | |
| <script src="../site_libs/quarto-search/fuse.min.js"></script> | |
| <script src="../site_libs/quarto-search/quarto-search.js"></script> | |
| <meta name="quarto:offset" content="../"> | |
| <link href="../favicon.ico" rel="icon"> | |
| <script src="../site_libs/quarto-html/quarto.js"></script> | |
| <script src="../site_libs/quarto-html/popper.min.js"></script> | |
| <script src="../site_libs/quarto-html/tippy.umd.min.js"></script> | |
| <script src="../site_libs/quarto-html/anchor.min.js"></script> | |
| <link href="../site_libs/quarto-html/tippy.css" rel="stylesheet"> | |
| <link href="../site_libs/quarto-html/quarto-syntax-highlighting-549806ee2085284f45b00abea8c6df48.css" rel="stylesheet" id="quarto-text-highlighting-styles"> | |
| <script src="../site_libs/bootstrap/bootstrap.min.js"></script> | |
| <link href="../site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet"> | |
| <link href="../site_libs/bootstrap/bootstrap-e463c5e664eae906a5c2eb38a07ecc3d.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light"> | |
| <script id="quarto-search-options" type="application/json">{ | |
| "location": "navbar", | |
| "copy-button": false, | |
| "collapse-after": 3, | |
| "panel-placement": "end", | |
| "type": "overlay", | |
| "limit": 50, | |
| "keyboard-shortcut": [ | |
| "f", | |
| "/", | |
| "s" | |
| ], | |
| "show-item-context": false, | |
| "language": { | |
| "search-no-results-text": "No results", | |
| "search-matching-documents-text": "matching documents", | |
| "search-copy-link-title": "Copy link to search", | |
| "search-hide-matches-text": "Hide additional matches", | |
| "search-more-match-text": "more match in this document", | |
| "search-more-matches-text": "more matches in this document", | |
| "search-clear-button-title": "Clear", | |
| "search-text-placeholder": "", | |
| "search-detached-cancel-button-title": "Cancel", | |
| "search-submit-button-title": "Submit", | |
| "search-label": "Search" | |
| } | |
| }</script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous"></script> | |
| <script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script> | |
| <link rel="stylesheet" href="../styles.css"> | |
| <meta property="og:title" content="Pico.css components – fasthtml"> | |
| <meta property="og:description" content="Basic components for generating Pico CSS tags"> | |
| <meta property="og:site_name" content="fasthtml"> | |
| <meta name="twitter:title" content="Pico.css components – fasthtml"> | |
| <meta name="twitter:description" content="Basic components for generating Pico CSS tags"> | |
| <meta name="twitter:image" content="https://www.fastht.ml/docs/og-image.png"> | |
| <meta name="twitter:creator" content="@jeremyphoward"> | |
| <meta name="twitter:site" content="@answerdotai"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <link rel="canonical" href="https://www.fastht.ml/docs/api/pico.html"> | |
| </head> | |
| <body class="nav-sidebar floating nav-fixed"> | |
| <div id="quarto-search-results"></div> | |
| <header id="quarto-header" class="headroom fixed-top"> | |
| <nav class="navbar navbar-expand-lg " data-bs-theme="dark"> | |
| <div class="navbar-container container-fluid"> | |
| <div class="navbar-brand-container mx-auto"> | |
| <a href="../index.html" class="navbar-brand navbar-brand-logo"> | |
| <img src="../logo.svg" alt="" class="navbar-logo"> | |
| </a> | |
| </div> | |
| <div id="quarto-search" class="" title="Search"></div> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" role="menu" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarCollapse"> | |
| <ul class="navbar-nav navbar-nav-scroll me-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="https://fastht.ml"> | |
| <span class="menu-text">Home</span></a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="https://fastht.ml/about"> | |
| <span class="menu-text">Learn</span></a> | |
| </li> | |
| </ul> | |
| <ul class="navbar-nav navbar-nav-scroll ms-auto"> | |
| <li class="nav-item compact"> | |
| <a class="nav-link" href="https://github.com/answerdotai/fasthtml"> <i class="bi bi-github" role="img"> | |
| </i> | |
| <span class="menu-text"></span></a> | |
| </li> | |
| <li class="nav-item compact"> | |
| <a class="nav-link" href="https://x.com/answerdotai"> <i class="bi bi-twitter" role="img" aria-label="Fast.ai Twitter"> | |
| </i> | |
| <span class="menu-text"></span></a> | |
| </li> | |
| </ul> | |
| </div> <!-- /navcollapse --> | |
| <div class="quarto-navbar-tools"> | |
| </div> | |
| </div> <!-- /container-fluid --> | |
| </nav> | |
| <nav class="quarto-secondary-nav"> | |
| <div class="container-fluid d-flex"> | |
| <button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" role="button" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }"> | |
| <i class="bi bi-layout-text-sidebar-reverse"></i> | |
| </button> | |
| <nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="../api/core.html">Source</a></li><li class="breadcrumb-item"><a href="../api/pico.html">Pico.css components</a></li></ol></nav> | |
| <a class="flex-grow-1" role="navigation" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }"> | |
| </a> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- content --> | |
| <div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar"> | |
| <!-- sidebar --> | |
| <nav id="quarto-sidebar" class="sidebar collapse collapse-horizontal quarto-sidebar-collapse-item sidebar-navigation floating overflow-auto"> | |
| <div class="sidebar-menu-container"> | |
| <ul class="list-unstyled mt-1"> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../index.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Get Started</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item sidebar-item-section"> | |
| <div class="sidebar-item-container"> | |
| <a href="../tutorials/index.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Tutorials</span></a> | |
| <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-1" role="navigation" aria-expanded="true" aria-label="Toggle section"> | |
| <i class="bi bi-chevron-right ms-2"></i> | |
| </a> | |
| </div> | |
| <ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 show"> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../tutorials/by_example.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">FastHTML By Example</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../tutorials/quickstart_for_web_devs.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Web Devs Quickstart</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../tutorials/e2e.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">JS App Walkthrough</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../tutorials/best_practice.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">FastHTML Best Practices</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../tutorials/jupyter_and_fasthtml.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Using Jupyter to write FastHTML</span></a> | |
| </div> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="sidebar-item sidebar-item-section"> | |
| <div class="sidebar-item-container"> | |
| <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="true"> | |
| <span class="menu-text">Explanations</span></a> | |
| <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="true" aria-label="Toggle section"> | |
| <i class="bi bi-chevron-right ms-2"></i> | |
| </a> | |
| </div> | |
| <ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth1 show"> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/background_tasks.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Background Tasks</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/explaining_xt_components.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text"><strong>FT</strong> Components</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/faq.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">FAQ</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/minidataapi.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">MiniDataAPI Spec</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/oauth.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">OAuth</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/routes.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Routes</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/stripe.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Stripe</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../explains/websockets.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">WebSockets</span></a> | |
| </div> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="sidebar-item sidebar-item-section"> | |
| <div class="sidebar-item-container"> | |
| <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="true"> | |
| <span class="menu-text">Reference</span></a> | |
| <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="true" aria-label="Toggle section"> | |
| <i class="bi bi-chevron-right ms-2"></i> | |
| </a> | |
| </div> | |
| <ul id="quarto-sidebar-section-3" class="collapse list-unstyled sidebar-section depth1 show"> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../ref/concise_guide.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Concise reference</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../ref/best_practice.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">FastHTML Best Practices</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../ref/defining_xt_component.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Custom Components</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../ref/handlers.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Handling handlers</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../ref/live_reload.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Live Reloading</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../ref/response_types.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Response Types</span></a> | |
| </div> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="sidebar-item sidebar-item-section"> | |
| <div class="sidebar-item-container"> | |
| <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="true"> | |
| <span class="menu-text">Source</span></a> | |
| <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="true" aria-label="Toggle section"> | |
| <i class="bi bi-chevron-right ms-2"></i> | |
| </a> | |
| </div> | |
| <ul id="quarto-sidebar-section-4" class="collapse list-unstyled sidebar-section depth1 show"> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/core.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Core</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/components.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Components</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/xtend.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Component extensions</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/js.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Javascript examples</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/pico.html" class="sidebar-item-text sidebar-link active"> | |
| <span class="menu-text">Pico.css components</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/svg.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">SVG</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/jupyter.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Jupyter compatibility</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/oauth.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">OAuth</span></a> | |
| </div> | |
| </li> | |
| <li class="sidebar-item"> | |
| <div class="sidebar-item-container"> | |
| <a href="../api/cli.html" class="sidebar-item-text sidebar-link"> | |
| <span class="menu-text">Command Line Tools</span></a> | |
| </div> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"></div> | |
| <!-- margin-sidebar --> | |
| <div id="quarto-margin-sidebar" class="sidebar margin-sidebar"> | |
| <nav id="TOC" role="doc-toc" class="toc-active"> | |
| <h2 id="toc-title">On this page</h2> | |
| <ul> | |
| <li><a href="#set_pico_cls" id="toc-set_pico_cls" class="nav-link active" data-scroll-target="#set_pico_cls">set_pico_cls</a></li> | |
| <li><a href="#card" id="toc-card" class="nav-link" data-scroll-target="#card">Card</a></li> | |
| <li><a href="#group" id="toc-group" class="nav-link" data-scroll-target="#group">Group</a></li> | |
| <li><a href="#search" id="toc-search" class="nav-link" data-scroll-target="#search">Search</a></li> | |
| <li><a href="#grid" id="toc-grid" class="nav-link" data-scroll-target="#grid">Grid</a></li> | |
| <li><a href="#dialogx" id="toc-dialogx" class="nav-link" data-scroll-target="#dialogx">DialogX</a></li> | |
| <li><a href="#container" id="toc-container" class="nav-link" data-scroll-target="#container">Container</a></li> | |
| <li><a href="#picobusy" id="toc-picobusy" class="nav-link" data-scroll-target="#picobusy">PicoBusy</a></li> | |
| </ul> | |
| <div class="toc-actions"><ul><li><a href="https://github.com/AnswerDotAI/fasthtml/issues/new" class="toc-action"><i class="bi bi-github"></i>Report an issue</a></li></ul></div><div class="quarto-alternate-formats"><h2>Other Formats</h2><ul><li><a href="pico.html.md"><i class="bi bi-file-code"></i>CommonMark</a></li></ul></div></nav> | |
| </div> | |
| <!-- main --> | |
| <main class="content" id="quarto-document-content"> | |
| <header id="title-block-header" class="quarto-title-block default"><nav class="quarto-page-breadcrumbs quarto-title-breadcrumbs d-none d-lg-block" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="../api/core.html">Source</a></li><li class="breadcrumb-item"><a href="../api/pico.html">Pico.css components</a></li></ol></nav> | |
| <div class="quarto-title"> | |
| <h1 class="title">Pico.css components</h1> | |
| </div> | |
| <div> | |
| <div class="description"> | |
| Basic components for generating Pico CSS tags | |
| </div> | |
| </div> | |
| <div class="quarto-title-meta"> | |
| </div> | |
| </header> | |
| <!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! --> | |
| <p><code>picocondlink</code> is the class-conditional css <code>link</code> tag, and <code>picolink</code> is the regular tag.</p> | |
| <div id="992c2a8f" class="cell"> | |
| <div class="sourceCode cell-code" id="cb1"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>show(picocondlink)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| <div class="cell-output cell-output-display"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.conditional.min.css"> | |
| <style>:root { --pico-font-size: 100%; }</style> | |
| </div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L30" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| <section id="set_pico_cls" class="level3"> | |
| <h3 class="anchored" data-anchor-id="set_pico_cls">set_pico_cls</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> set_pico_cls ()</code></pre> | |
| </blockquote> | |
| <p>Run this to make jupyter outputs styled with pico:</p> | |
| <div id="74326ab8" class="cell"> | |
| <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>set_pico_cls()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| <div class="cell-output cell-output-display"> | |
| <script type="application/javascript"> | |
| var sel = '.cell-output, .output_area'; | |
| document.querySelectorAll(sel).forEach(e => e.classList.add('pico')); | |
| new MutationObserver(ms => { | |
| ms.forEach(m => { | |
| m.addedNodes.forEach(n => { | |
| if (n.nodeType === 1) { | |
| var nc = n.classList; | |
| if (nc && (nc.contains('cell-output') || nc.contains('output_area'))) nc.add('pico'); | |
| n.querySelectorAll(sel).forEach(e => e.classList.add('pico')); | |
| } | |
| }); | |
| }); | |
| }).observe(document.body, { childList: true, subtree: true }); | |
| </script> | |
| </div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L49" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="card" class="level3"> | |
| <h3 class="anchored" data-anchor-id="card">Card</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> 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)</code></pre> | |
| </blockquote> | |
| <p><em>A PicoCSS Card, implemented as an Article with optional Header and Footer</em></p> | |
| <div id="95ea9527" class="cell"> | |
| <div class="sourceCode cell-code" id="cb5"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a>show(Card(<span class="st">'body'</span>, header<span class="op">=</span>P(<span class="st">'head'</span>), footer<span class="op">=</span>P(<span class="st">'foot'</span>)))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| <div class="cell-output cell-output-display"> | |
| <article> | |
| <header><p>head</p> | |
| </header> | |
| body | |
| <footer><p>foot</p> | |
| </footer> | |
| </article> | |
| </div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L57" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="group" class="level3"> | |
| <h3 class="anchored" data-anchor-id="group">Group</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> 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)</code></pre> | |
| </blockquote> | |
| <p><em>A PicoCSS Group, implemented as a Fieldset with role ‘group’</em></p> | |
| <div id="af029bf2" class="cell"> | |
| <div class="sourceCode cell-code" id="cb7"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a>show(Group(Input(), Button(<span class="st">"Save"</span>)))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| <div class="cell-output cell-output-display"> | |
| <fieldset role="group"> | |
| <input> | |
| <button>Save</button> | |
| </fieldset> | |
| </div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L63" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="search" class="level3"> | |
| <h3 class="anchored" data-anchor-id="search">Search</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> 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)</code></pre> | |
| </blockquote> | |
| <p><em>A PicoCSS Search, implemented as a Form with role ‘search’</em></p> | |
| <div id="a9c38825" class="cell"> | |
| <div class="sourceCode cell-code" id="cb9"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a>show(Search(Input(<span class="bu">type</span><span class="op">=</span><span class="st">"search"</span>), Button(<span class="st">"Search"</span>)))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| <div class="cell-output cell-output-display"> | |
| <form enctype="multipart/form-data" role="search"> | |
| <input type="search"> | |
| <button>Search</button> | |
| </form> | |
| </div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L69" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="grid" class="level3"> | |
| <h3 class="anchored" data-anchor-id="grid">Grid</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> 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)</code></pre> | |
| </blockquote> | |
| <p><em>A PicoCSS Grid, implemented as child Divs in a Div with class ‘grid’</em></p> | |
| <div id="0f13c619" class="cell"> | |
| <div class="sourceCode cell-code" id="cb11"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a>colors <span class="op">=</span> [Input(<span class="bu">type</span><span class="op">=</span><span class="st">"color"</span>, value<span class="op">=</span>o) <span class="cf">for</span> o <span class="kw">in</span> (<span class="st">'#e66465'</span>, <span class="st">'#53d2c5'</span>, <span class="st">'#f6b73c'</span>)]</span> | |
| <span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a>show(Grid(<span class="op">*</span>colors))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| <div class="cell-output cell-output-display"> | |
| <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> | |
| </div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L76" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="dialogx" class="level3"> | |
| <h3 class="anchored" data-anchor-id="dialogx">DialogX</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> 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)</code></pre> | |
| </blockquote> | |
| <p><em>A PicoCSS Dialog, with children inside a Card</em></p> | |
| <div id="9dccbc6a" class="cell"> | |
| <div class="sourceCode cell-code" id="cb13"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a>hdr <span class="op">=</span> Div(Button(aria_label<span class="op">=</span><span class="st">"Close"</span>, rel<span class="op">=</span><span class="st">"prev"</span>), P(<span class="st">'confirm'</span>))</span> | |
| <span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>ftr <span class="op">=</span> Div(Button(<span class="st">'Cancel'</span>, cls<span class="op">=</span><span class="st">"secondary"</span>), Button(<span class="st">'Confirm'</span>))</span> | |
| <span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a>d <span class="op">=</span> DialogX(<span class="st">'thank you!'</span>, header<span class="op">=</span>hdr, footer<span class="op">=</span>ftr, <span class="bu">open</span><span class="op">=</span><span class="va">None</span>, <span class="bu">id</span><span class="op">=</span><span class="st">'dlgtest'</span>)</span> | |
| <span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a><span class="co"># use js or htmx to display modal</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> | |
| </div> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L83" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="container" class="level3"> | |
| <h3 class="anchored" data-anchor-id="container">Container</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> 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)</code></pre> | |
| </blockquote> | |
| <p><em>A PicoCSS Container, implemented as a Main with class ‘container’</em></p> | |
| <hr> | |
| <p><a href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py#L88" target="_blank" style="float:right; font-size:smaller">source</a></p> | |
| </section> | |
| <section id="picobusy" class="level3"> | |
| <h3 class="anchored" data-anchor-id="picobusy">PicoBusy</h3> | |
| <blockquote class="blockquote"> | |
| <pre><code> PicoBusy ()</code></pre> | |
| </blockquote> | |
| </section> | |
| </main> <!-- /main --> | |
| <script id="quarto-html-after-body" type="application/javascript"> | |
| window.document.addEventListener("DOMContentLoaded", function (event) { | |
| const toggleBodyColorMode = (bsSheetEl) => { | |
| const mode = bsSheetEl.getAttribute("data-mode"); | |
| const bodyEl = window.document.querySelector("body"); | |
| if (mode === "dark") { | |
| bodyEl.classList.add("quarto-dark"); | |
| bodyEl.classList.remove("quarto-light"); | |
| } else { | |
| bodyEl.classList.add("quarto-light"); | |
| bodyEl.classList.remove("quarto-dark"); | |
| } | |
| } | |
| const toggleBodyColorPrimary = () => { | |
| const bsSheetEl = window.document.querySelector("link#quarto-bootstrap"); | |
| if (bsSheetEl) { | |
| toggleBodyColorMode(bsSheetEl); | |
| } | |
| } | |
| toggleBodyColorPrimary(); | |
| const icon = ""; | |
| const anchorJS = new window.AnchorJS(); | |
| anchorJS.options = { | |
| placement: 'right', | |
| icon: icon | |
| }; | |
| anchorJS.add('.anchored'); | |
| const isCodeAnnotation = (el) => { | |
| for (const clz of el.classList) { | |
| if (clz.startsWith('code-annotation-')) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| const onCopySuccess = function(e) { | |
| // button target | |
| const button = e.trigger; | |
| // don't keep focus | |
| button.blur(); | |
| // flash "checked" | |
| button.classList.add('code-copy-button-checked'); | |
| var currentTitle = button.getAttribute("title"); | |
| button.setAttribute("title", "Copied!"); | |
| let tooltip; | |
| if (window.bootstrap) { | |
| button.setAttribute("data-bs-toggle", "tooltip"); | |
| button.setAttribute("data-bs-placement", "left"); | |
| button.setAttribute("data-bs-title", "Copied!"); | |
| tooltip = new bootstrap.Tooltip(button, | |
| { trigger: "manual", | |
| customClass: "code-copy-button-tooltip", | |
| offset: [0, -8]}); | |
| tooltip.show(); | |
| } | |
| setTimeout(function() { | |
| if (tooltip) { | |
| tooltip.hide(); | |
| button.removeAttribute("data-bs-title"); | |
| button.removeAttribute("data-bs-toggle"); | |
| button.removeAttribute("data-bs-placement"); | |
| } | |
| button.setAttribute("title", currentTitle); | |
| button.classList.remove('code-copy-button-checked'); | |
| }, 1000); | |
| // clear code selection | |
| e.clearSelection(); | |
| } | |
| const getTextToCopy = function(trigger) { | |
| const codeEl = trigger.previousElementSibling.cloneNode(true); | |
| for (const childEl of codeEl.children) { | |
| if (isCodeAnnotation(childEl)) { | |
| childEl.remove(); | |
| } | |
| } | |
| return codeEl.innerText; | |
| } | |
| const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', { | |
| text: getTextToCopy | |
| }); | |
| clipboard.on('success', onCopySuccess); | |
| if (window.document.getElementById('quarto-embedded-source-code-modal')) { | |
| const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', { | |
| text: getTextToCopy, | |
| container: window.document.getElementById('quarto-embedded-source-code-modal') | |
| }); | |
| clipboardModal.on('success', onCopySuccess); | |
| } | |
| var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//); | |
| var mailtoRegex = new RegExp(/^mailto:/); | |
| var filterRegex = new RegExp("https:\/\/www\.fastht\.ml\/docs\/"); | |
| var isInternal = (href) => { | |
| return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href); | |
| } | |
| // Inspect non-navigation links and adorn them if external | |
| var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)'); | |
| for (var i=0; i<links.length; i++) { | |
| const link = links[i]; | |
| if (!isInternal(link.href)) { | |
| // undo the damage that might have been done by quarto-nav.js in the case of | |
| // links that we want to consider external | |
| if (link.dataset.originalHref !== undefined) { | |
| link.href = link.dataset.originalHref; | |
| } | |
| } | |
| } | |
| function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) { | |
| const config = { | |
| allowHTML: true, | |
| maxWidth: 500, | |
| delay: 100, | |
| arrow: false, | |
| appendTo: function(el) { | |
| return el.parentElement; | |
| }, | |
| interactive: true, | |
| interactiveBorder: 10, | |
| theme: 'quarto', | |
| placement: 'bottom-start', | |
| }; | |
| if (contentFn) { | |
| config.content = contentFn; | |
| } | |
| if (onTriggerFn) { | |
| config.onTrigger = onTriggerFn; | |
| } | |
| if (onUntriggerFn) { | |
| config.onUntrigger = onUntriggerFn; | |
| } | |
| window.tippy(el, config); | |
| } | |
| const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]'); | |
| for (var i=0; i<noterefs.length; i++) { | |
| const ref = noterefs[i]; | |
| tippyHover(ref, function() { | |
| // use id or data attribute instead here | |
| let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href'); | |
| try { href = new URL(href).hash; } catch {} | |
| const id = href.replace(/^#\/?/, ""); | |
| const note = window.document.getElementById(id); | |
| if (note) { | |
| return note.innerHTML; | |
| } else { | |
| return ""; | |
| } | |
| }); | |
| } | |
| const xrefs = window.document.querySelectorAll('a.quarto-xref'); | |
| const processXRef = (id, note) => { | |
| // Strip column container classes | |
| const stripColumnClz = (el) => { | |
| el.classList.remove("page-full", "page-columns"); | |
| if (el.children) { | |
| for (const child of el.children) { | |
| stripColumnClz(child); | |
| } | |
| } | |
| } | |
| stripColumnClz(note) | |
| if (id === null || id.startsWith('sec-')) { | |
| // Special case sections, only their first couple elements | |
| const container = document.createElement("div"); | |
| if (note.children && note.children.length > 2) { | |
| container.appendChild(note.children[0].cloneNode(true)); | |
| for (let i = 1; i < note.children.length; i++) { | |
| const child = note.children[i]; | |
| if (child.tagName === "P" && child.innerText === "") { | |
| continue; | |
| } else { | |
| container.appendChild(child.cloneNode(true)); | |
| break; | |
| } | |
| } | |
| if (window.Quarto?.typesetMath) { | |
| window.Quarto.typesetMath(container); | |
| } | |
| return container.innerHTML | |
| } else { | |
| if (window.Quarto?.typesetMath) { | |
| window.Quarto.typesetMath(note); | |
| } | |
| return note.innerHTML; | |
| } | |
| } else { | |
| // Remove any anchor links if they are present | |
| const anchorLink = note.querySelector('a.anchorjs-link'); | |
| if (anchorLink) { | |
| anchorLink.remove(); | |
| } | |
| if (window.Quarto?.typesetMath) { | |
| window.Quarto.typesetMath(note); | |
| } | |
| if (note.classList.contains("callout")) { | |
| return note.outerHTML; | |
| } else { | |
| return note.innerHTML; | |
| } | |
| } | |
| } | |
| for (var i=0; i<xrefs.length; i++) { | |
| const xref = xrefs[i]; | |
| tippyHover(xref, undefined, function(instance) { | |
| instance.disable(); | |
| let url = xref.getAttribute('href'); | |
| let hash = undefined; | |
| if (url.startsWith('#')) { | |
| hash = url; | |
| } else { | |
| try { hash = new URL(url).hash; } catch {} | |
| } | |
| if (hash) { | |
| const id = hash.replace(/^#\/?/, ""); | |
| const note = window.document.getElementById(id); | |
| if (note !== null) { | |
| try { | |
| const html = processXRef(id, note.cloneNode(true)); | |
| instance.setContent(html); | |
| } finally { | |
| instance.enable(); | |
| instance.show(); | |
| } | |
| } else { | |
| // See if we can fetch this | |
| fetch(url.split('#')[0]) | |
| .then(res => res.text()) | |
| .then(html => { | |
| const parser = new DOMParser(); | |
| const htmlDoc = parser.parseFromString(html, "text/html"); | |
| const note = htmlDoc.getElementById(id); | |
| if (note !== null) { | |
| const html = processXRef(id, note); | |
| instance.setContent(html); | |
| } | |
| }).finally(() => { | |
| instance.enable(); | |
| instance.show(); | |
| }); | |
| } | |
| } else { | |
| // See if we can fetch a full url (with no hash to target) | |
| // This is a special case and we should probably do some content thinning / targeting | |
| fetch(url) | |
| .then(res => res.text()) | |
| .then(html => { | |
| const parser = new DOMParser(); | |
| const htmlDoc = parser.parseFromString(html, "text/html"); | |
| const note = htmlDoc.querySelector('main.content'); | |
| if (note !== null) { | |
| // This should only happen for chapter cross references | |
| // (since there is no id in the URL) | |
| // remove the first header | |
| if (note.children.length > 0 && note.children[0].tagName === "HEADER") { | |
| note.children[0].remove(); | |
| } | |
| const html = processXRef(null, note); | |
| instance.setContent(html); | |
| } | |
| }).finally(() => { | |
| instance.enable(); | |
| instance.show(); | |
| }); | |
| } | |
| }, function(instance) { | |
| }); | |
| } | |
| let selectedAnnoteEl; | |
| const selectorForAnnotation = ( cell, annotation) => { | |
| let cellAttr = 'data-code-cell="' + cell + '"'; | |
| let lineAttr = 'data-code-annotation="' + annotation + '"'; | |
| const selector = 'span[' + cellAttr + '][' + lineAttr + ']'; | |
| return selector; | |
| } | |
| const selectCodeLines = (annoteEl) => { | |
| const doc = window.document; | |
| const targetCell = annoteEl.getAttribute("data-target-cell"); | |
| const targetAnnotation = annoteEl.getAttribute("data-target-annotation"); | |
| const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation)); | |
| const lines = annoteSpan.getAttribute("data-code-lines").split(","); | |
| const lineIds = lines.map((line) => { | |
| return targetCell + "-" + line; | |
| }) | |
| let top = null; | |
| let height = null; | |
| let parent = null; | |
| if (lineIds.length > 0) { | |
| //compute the position of the single el (top and bottom and make a div) | |
| const el = window.document.getElementById(lineIds[0]); | |
| top = el.offsetTop; | |
| height = el.offsetHeight; | |
| parent = el.parentElement.parentElement; | |
| if (lineIds.length > 1) { | |
| const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]); | |
| const bottom = lastEl.offsetTop + lastEl.offsetHeight; | |
| height = bottom - top; | |
| } | |
| if (top !== null && height !== null && parent !== null) { | |
| // cook up a div (if necessary) and position it | |
| let div = window.document.getElementById("code-annotation-line-highlight"); | |
| if (div === null) { | |
| div = window.document.createElement("div"); | |
| div.setAttribute("id", "code-annotation-line-highlight"); | |
| div.style.position = 'absolute'; | |
| parent.appendChild(div); | |
| } | |
| div.style.top = top - 2 + "px"; | |
| div.style.height = height + 4 + "px"; | |
| div.style.left = 0; | |
| let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter"); | |
| if (gutterDiv === null) { | |
| gutterDiv = window.document.createElement("div"); | |
| gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter"); | |
| gutterDiv.style.position = 'absolute'; | |
| const codeCell = window.document.getElementById(targetCell); | |
| const gutter = codeCell.querySelector('.code-annotation-gutter'); | |
| gutter.appendChild(gutterDiv); | |
| } | |
| gutterDiv.style.top = top - 2 + "px"; | |
| gutterDiv.style.height = height + 4 + "px"; | |
| } | |
| selectedAnnoteEl = annoteEl; | |
| } | |
| }; | |
| const unselectCodeLines = () => { | |
| const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"]; | |
| elementsIds.forEach((elId) => { | |
| const div = window.document.getElementById(elId); | |
| if (div) { | |
| div.remove(); | |
| } | |
| }); | |
| selectedAnnoteEl = undefined; | |
| }; | |
| // Handle positioning of the toggle | |
| window.addEventListener( | |
| "resize", | |
| throttle(() => { | |
| elRect = undefined; | |
| if (selectedAnnoteEl) { | |
| selectCodeLines(selectedAnnoteEl); | |
| } | |
| }, 10) | |
| ); | |
| function throttle(fn, ms) { | |
| let throttle = false; | |
| let timer; | |
| return (...args) => { | |
| if(!throttle) { // first call gets through | |
| fn.apply(this, args); | |
| throttle = true; | |
| } else { // all the others get throttled | |
| if(timer) clearTimeout(timer); // cancel #2 | |
| timer = setTimeout(() => { | |
| fn.apply(this, args); | |
| timer = throttle = false; | |
| }, ms); | |
| } | |
| }; | |
| } | |
| // Attach click handler to the DT | |
| const annoteDls = window.document.querySelectorAll('dt[data-target-cell]'); | |
| for (const annoteDlNode of annoteDls) { | |
| annoteDlNode.addEventListener('click', (event) => { | |
| const clickedEl = event.target; | |
| if (clickedEl !== selectedAnnoteEl) { | |
| unselectCodeLines(); | |
| const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active'); | |
| if (activeEl) { | |
| activeEl.classList.remove('code-annotation-active'); | |
| } | |
| selectCodeLines(clickedEl); | |
| clickedEl.classList.add('code-annotation-active'); | |
| } else { | |
| // Unselect the line | |
| unselectCodeLines(); | |
| clickedEl.classList.remove('code-annotation-active'); | |
| } | |
| }); | |
| } | |
| const findCites = (el) => { | |
| const parentEl = el.parentElement; | |
| if (parentEl) { | |
| const cites = parentEl.dataset.cites; | |
| if (cites) { | |
| return { | |
| el, | |
| cites: cites.split(' ') | |
| }; | |
| } else { | |
| return findCites(el.parentElement) | |
| } | |
| } else { | |
| return undefined; | |
| } | |
| }; | |
| var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]'); | |
| for (var i=0; i<bibliorefs.length; i++) { | |
| const ref = bibliorefs[i]; | |
| const citeInfo = findCites(ref); | |
| if (citeInfo) { | |
| tippyHover(citeInfo.el, function() { | |
| var popup = window.document.createElement('div'); | |
| citeInfo.cites.forEach(function(cite) { | |
| var citeDiv = window.document.createElement('div'); | |
| citeDiv.classList.add('hanging-indent'); | |
| citeDiv.classList.add('csl-entry'); | |
| var biblioDiv = window.document.getElementById('ref-' + cite); | |
| if (biblioDiv) { | |
| citeDiv.innerHTML = biblioDiv.innerHTML; | |
| } | |
| popup.appendChild(citeDiv); | |
| }); | |
| return popup.innerHTML; | |
| }); | |
| } | |
| } | |
| }); | |
| </script> | |
| </div> <!-- /content --> | |
| <footer class="footer"><div class="nav-footer"><div class="nav-footer-center"><div class="toc-actions d-sm-block d-md-none"><ul><li><a href="https://github.com/AnswerDotAI/fasthtml/issues/new" class="toc-action"><i class="bi bi-github"></i>Report an issue</a></li></ul></div></div></div></footer></body></html> |