Quillo.qweComponents

Layout

Sticky

Keeps what it holds in view at an offset from the top, or the bottom, while the rest scrolls past.

#layout#utility#no-js

Preview
Chapter 3: Tides

Paragraph 1. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 2. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 3. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 4. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 5. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 6. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 7. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 8. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 9. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 10. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 11. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

Paragraph 12. Scroll the box: the chapter's title stays 8px from its top while the text goes by.

The title sticks to the top of the box and the button to its bottom, each until its content has scrolled past.

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

Example

The code of the preview above.

demos/sticky.qwe
view StickyDemo() =    <div.demo-stack>        <div id="sticky-demo-box" style="height: 240px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 0 16px">            <Sticky top={8} class="sticky-demo-title">                <div style="padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); box-shadow: var(--ui-shadow); font-weight: 600">Chapter 3: Tides</div>            </Sticky>            {for i in range(1, 13) => <p>Paragraph {i}. Scroll the box: the chapter's title stays 8px from its top while the text goes by.</p>}            <Sticky bottom={8} class="sticky-demo-bar">                <Button full={true}>Continue to chapter 4</Button>            </Sticky>        </div>        <p.demo-note>The title sticks to the top of the box and the button to its bottom, each until its content has scrolled past.</p>    </div>

Source

ui/sticky.qwe
// Sticky: keeps what it holds in view as the page (or the box it is in) scrolls// past: a toolbar, a table's header row, a section's title, a buy button. It// sticks to the top at an offset, or to the bottom.////   <Sticky top={60}> <Toolbar .../> </Sticky>//   <Sticky bottom={0}> <Button full={true}>Add to cart</Button> </Sticky>//// top: how far from the top of the scrolling box it stops, in pixels (0; make room// for a sticky header with top={60}). bottom: given instead, it sticks to the bottom// at that distance. z: its stacking order over what scrolls under it (5).// It sticks inside its parent only: a Sticky in a short box leaves with the box.// Give the parent a height (the page, a scrolling box) for it to stick within.import ui/theme.qwe use ui_clslet sticky_css = css`.ui-sticky { position: sticky; top: var(--ui-sticky-top, 0); z-index: var(--ui-sticky-z, 5); min-width: 0; }.ui-sticky-bottom { top: auto; bottom: var(--ui-sticky-bottom, 0); }`view Sticky(top: int = 0, bottom: int? = null, z: int = 5, class: str? = null, children) {    style global sticky_css    <div class={ui_cls(["ui-sticky", bottom != null && "ui-sticky-bottom", class])}         style={bottom != null ? `--ui-sticky-bottom: ${bottom}px; --ui-sticky-z: ${z}` : `--ui-sticky-top: ${top}px; --ui-sticky-z: ${z}`}>        {children}    </div>}
CenterPuts its content in the middle: a column capped in width, a thing centred by its own width, or centred text.layoututilityno-js7 views · 7 downloadsInsetRoom around what it holds, in the kit's sizes or pixels, on every side or only across or down.layoututilityno-js4 views · 7 downloadsResizableBoxA box the user resizes by dragging its corner or an edge, within limits, with the keyboard too.layoutdragkeyboardutilityinteractive5 views · 5 downloadsScrollAreaA box with its own scrollbars and a height limit, fading at the edges where there is more to see.layoututilityaccessibilityno-js6 views · 8 downloadsSpacerEmpty room between things, down a column or along a row, in the kit's sizes or pixels, or growing to push things apart.layoututilityno-js5 views · 6 downloadsActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.layoutbuttonformsinteractive13 views · 6 downloads
Thread
56Useful? Like it, or add to its thread below.

Thread 0 posts

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

No posts yet. The first one opens the thread.