Quillo.qweComponents

Forms

FormActions

The row of submit and cancel buttons at the end of a form, aligned at the end, start, centre or both sides.

#forms#button#layout#no-js

Preview
Saved 2 minutes ago
Download form_actions.qwetheme.qweOn GitHub

Get it

It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.

$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/form_actions.qwe
main.qwe
import ui/theme.qwe use theme_cssuse ui/form_actions.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

Example

The code of the preview above.

demos/form_actions.qwe
view FormActionsDemo() =    <div.demo-stack>        <FormActions class="form-actions-demo-end">            <Button variant="ghost" tone="neutral" type="button">Cancel</Button>            <Button type="submit">Save changes</Button>        </FormActions>        <FormActions align="between" divider={true} class="form-actions-demo-between">            <Button variant="outline" tone="neutral" type="button">Back</Button>            <Button variant="ghost" tone="neutral" type="button">Save draft</Button>            <Button type="submit">Next</Button>        </FormActions>        <FormActions align="start" note="Saved 2 minutes ago" class="form-actions-demo-start">            <Button type="submit">Publish</Button>            <Button variant="soft" tone="danger" type="button">Delete</Button>        </FormActions>        <FormActions align="center" class="form-actions-demo-center">            <Button size="lg" type="submit">Continue</Button>        </FormActions>    </div>

Source

ui/form_actions.qwe
// FormActions: the row of buttons that ends a form (Save and Cancel, Back and// Next), lined up at the end, the start, the centre, or spread to both sides.////   <FormActions>//       <Button variant="ghost" tone="neutral" href="/">Cancel</Button>//       <Button type="submit">Save changes</Button>//   </FormActions>//   <FormActions align="between"> <Button variant="outline">Back</Button> <Button type="submit">Next</Button> </FormActions>//   <FormActions sticky={true} divider={true}> ... </FormActions>//// align: "end" (default), "start", "center" or "between" (the first child at the// left, the rest at the right). divider: a line above the row. sticky: the row// stays at the bottom of the window while the form scrolls. gap: pixels between// the buttons (10). note: short text at the row's other side ("Saved 2 min ago").// On a phone the buttons fill the width, one under another, the last first.import ui/theme.qwe use ui_clslet form_actions_css = css`.ui-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ui-form-actions-gap, 10px); min-width: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }.ui-form-actions-start { justify-content: flex-start; }.ui-form-actions-center { justify-content: center; }.ui-form-actions-between { justify-content: space-between; }.ui-form-actions-between > :first-child { margin-right: auto; }.ui-form-actions-divider { padding-top: 16px; border-top: 1px solid var(--ui-border); }.ui-form-actions-sticky { position: sticky; bottom: 0; z-index: 5; padding-bottom: 12px; background: var(--ui-bg); }.ui-form-actions-sticky.ui-form-actions-divider { padding-top: 12px; }.ui-form-actions-note { margin-right: auto; color: var(--ui-muted); font-size: 13px; }.ui-form-actions-start .ui-form-actions-note { margin: 0 0 0 auto; }.ui-form-actions-center .ui-form-actions-note, .ui-form-actions-between .ui-form-actions-note { margin: 0 auto; }@media (max-width: 479px) {  .ui-form-actions { flex-direction: column-reverse; align-items: stretch; }  .ui-form-actions-between > :first-child { margin-right: 0; }  .ui-form-actions > .ui-btn { display: flex; width: 100%; }  .ui-form-actions-note { margin: 0; text-align: center; }}`view FormActions(align: str = "end", divider: bool = false, sticky: bool = false, gap: int = 10, note: str? = null,                 class: str? = null, children) {    style global form_actions_css    <div class={ui_cls(["ui-form-actions", align != "end" && `ui-form-actions-${align}`, divider && "ui-form-actions-divider",                        sticky && "ui-form-actions-sticky", class])}         style={gap != 10 ? `--ui-form-actions-gap: ${gap}px` : null}>        {note != null && align != "start" && <span.ui-form-actions-note>{note}</span>}        {children}        {note != null && align == "start" && <span.ui-form-actions-note>{note}</span>}    </div>}
ActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.layoutbuttonformsinteractive13 views · 6 downloadsFormA plain <form method="post"> laid out stacked, inline or in a grid, with a summary of what is wrong at the top and a submit row at the end.formslayoutno-js6 views · 8 downloadsFormFieldA label, a hint and an error around any control, with a required mark, the label beside or above it.formsinputlayoutno-js5 views · 5 downloadsFormRowFields side by side, equal or weighted, that stack one under another on a phone.formslayoutgridno-js5 views · 8 downloadsNewsletterFormAn email box and a Subscribe button in one row, a plain form posting to your route, with a done state once it worked.formsinputbuttonmarketingno-js5 views · 6 downloadsPollVote for one option with a tap and see the results as bars with each one's share; the vote also goes in a hidden input.formsbuttonsocialfeedbackinteractive6 views · 5 downloads
Thread
54Useful? Like it, or add to its thread below.

Thread 0 posts

On FormActions: questions, tips, corrections, and code that uses it.

No posts yet. The first one opens the thread.