Quillo.qweComponents

Actions

ButtonGroup

Buttons joined edge to edge into one control, or spaced in a row; across or upright.

#forms#button#no-js

Preview
Download button_group.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/button_group.qwe
main.qwe
import ui/theme.qwe use theme_cssuse ui/button_group.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

Example

The code of the preview above.

demos/button_group.qwe
view ButtonGroupDemo() =    <div.demo-stack>        <div.demo-row>            <ButtonGroup label="Text alignment">                <Button variant="outline">Left</Button>                <Button variant="outline">Centre</Button>                <Button variant="outline">Right</Button>            </ButtonGroup>            <ButtonGroup label="Save">                <Button>Save</Button>                <IconButton icon="chevron-down" label="More ways to save" variant="solid" tone="accent"/>            </ButtonGroup>            <ButtonGroup label="Zoom">                <IconButton icon="plus" label="Zoom in" variant="outline"/>                <IconButton icon="search" label="Fit" variant="outline"/>                <IconButton icon="x" label="Reset" variant="outline"/>            </ButtonGroup>        </div>        <div.demo-row>            <ButtonGroup label="Actions" attached={false}>                <Button variant="soft">Archive</Button>                <Button variant="soft">Move</Button>                <Button variant="soft" tone="danger">Delete</Button>            </ButtonGroup>            <ButtonGroup label="Order" vertical={true}>                <Button variant="outline" size="sm">First</Button>                <Button variant="outline" size="sm">Second</Button>            </ButtonGroup>        </div>    </div>

Source

ui/button_group.qwe
// ButtonGroup: puts buttons side by side, joined edge to edge into one control// (or spaced, with attached={false}). It is a role="group", named by its label.////   <ButtonGroup label="Text alignment">//       <Button variant="outline">Left</Button>//       <Button variant="outline">Centre</Button>//       <Button variant="outline">Right</Button>//   </ButtonGroup>//// children: Buttons, IconButtons, or any elements with a border and a radius.// attached: false spaces them 8px apart instead. vertical: one above another.// full: as wide as its container, the buttons sharing the width.import ui/theme.qwe use ui_clslet button_group_css = css`.ui-button-group { display: inline-flex; align-items: stretch; vertical-align: middle; }.ui-button-group-spaced { flex-wrap: wrap; gap: 8px; }.ui-button-group-vertical { flex-direction: column; }.ui-button-group-full { display: flex; width: 100%; }.ui-button-group-full > * { flex: 1; }.ui-button-group-attached > * { position: relative; }.ui-button-group-attached > :hover, .ui-button-group-attached > :focus-visible { z-index: 1; }.ui-button-group-attached:not(.ui-button-group-vertical) > * + * { margin-left: -1px; }.ui-button-group-attached:not(.ui-button-group-vertical) > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }.ui-button-group-attached:not(.ui-button-group-vertical) > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }.ui-button-group-attached.ui-button-group-vertical > * + * { margin-top: -1px; }.ui-button-group-attached.ui-button-group-vertical > :not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }.ui-button-group-attached.ui-button-group-vertical > :not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }.ui-button-group-attached:not(.ui-button-group-vertical) > :is(.ui-btn-solid, .ui-icon-btn-solid) + :is(.ui-btn-solid, .ui-icon-btn-solid) {  margin-left: 0; border-left: 1px solid color-mix(in srgb, var(--ui-bg) 30%, transparent);}.ui-button-group-attached.ui-button-group-vertical > :is(.ui-btn-solid, .ui-icon-btn-solid) + :is(.ui-btn-solid, .ui-icon-btn-solid) {  margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--ui-bg) 30%, transparent);}`view ButtonGroup(label: str? = null, attached: bool = true, vertical: bool = false, full: bool = false,                 class: str? = null, children) {    style global button_group_css    <div class={ui_cls(["ui-button-group", attached ? "ui-button-group-attached" : "ui-button-group-spaced",                        vertical && "ui-button-group-vertical", full && "ui-button-group-full", class])}         role="group" aria-label={label}>        {children}    </div>}
BookmarkButtonA save-for-later toggle whose bookmark fills when pressed, with or without its label.buttonsocialformsinteractive8 views · 8 downloadsButtonA button, or a link that looks like one: four variants, three tones, three sizes, loading.formsbuttonno-js7 views · 7 downloadsFabA round floating action button fixed to a corner of the screen, with an icon and an optional label.buttonformsmobileno-js5 views · 7 downloadsFollowButtonFollow becomes Following once pressed, and says Unfollow on hover, as the social sites do.buttonsocialuserformsinteractive5 views · 7 downloadsIconButtonA square button with an icon, labelled for screen readers and on hover; built-in icons or your own.formsbuttoniconno-js6 views · 9 downloadsLikeButtonA heart that toggles with a count that follows it, a real toggle for screen readers and forms.buttonsocialformsinteractive5 views · 4 downloads
Thread
66Useful? Like it, or add to its thread below.

Thread 0 posts

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

No posts yet. The first one opens the thread.