Quillo.qweComponents

Typography

OrderedList

A numbered list with styled counters: numbers, circles, letters or roman numerals, from any start.

#typography#list#text#no-js

Preview
  1. Install Quillo
  2. Run the gallery
  3. Copy a component into your program
  1. Create an account
  2. Verify your email
  3. Add a card
  1. Third
  2. Fourth
  1. Preface
  2. Introduction
  3. Chapter one
  1. The browser's own numbers
  2. In the kit's colour
  1. Written by hand
  2. With a nested list:
    1. one
    2. two
Download ordered_list.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/ordered_list.qwe
main.qwe
import ui/theme.qwe use theme_cssuse ui/ordered_list.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

Example

The code of the preview above.

demos/ordered_list.qwe
view OrderedListDemo() =    <div.demo-stack>        <div.demo-row style="align-items: flex-start; gap: 40px">            <OrderedList id="ordered-list-demo-numbers" items={["Install Quillo", "Run the gallery", "Copy a component into your program"]}/>            <OrderedList id="ordered-list-demo-circles" variant="circles" tone="accent" items={["Create an account", "Verify your email", "Add a card"]}/>            <OrderedList id="ordered-list-demo-letters" variant="letters" start={3} spacing="tight" items={["Third", "Fourth"]}/>        </div>        <div.demo-row style="align-items: flex-start; gap: 40px">            <OrderedList id="ordered-list-demo-roman" variant="roman" size="sm" items={["Preface", "Introduction", "Chapter one"]}/>            <OrderedList id="ordered-list-demo-plain" variant="plain" items={["The browser's own numbers", "In the kit's colour"]}/>            <OrderedList id="ordered-list-demo-kids" tone="fg" spacing="loose">                <li>Written <b>by hand</b></li>                <li>With a nested list:                    <OrderedList variant="letters" items={["one", "two"]}/>                </li>            </OrderedList>        </div>    </div>

Source

ui/ordered_list.qwe
// OrderedList: a numbered list whose numbers are drawn by the kit: plain, in// circles, as letters or as roman numerals, from any start. A real <ol>.////   <OrderedList items={["Install Quillo", "Run the gallery", "Copy a component"]}/>//   <OrderedList variant="circles" tone="accent" items={steps}/>//   <OrderedList variant="letters" start={3}><li>c</li><li>d</li></OrderedList>//// items: strings (or HTML) for the items; children: <li>s written by hand (both may// be given; items come first). variant: "numbers" (default, "1."), "circles" (a// number in a round badge), "letters" ("a."), "roman" ("i.") or "plain" (the browser's// own). start: the first number (1). tone: "muted" (default), "accent" or "fg", the// numbers' colour. spacing: "tight", "normal" (default) or "loose". size: "sm", "md"// (default) or "lg". id: the list's id.import ui/theme.qwe use ui_clslet ordered_list_css = css`.ui-ol { margin: 0; padding: 0; list-style: none; counter-reset: ui-ol; font: 15px/1.5 var(--ui-font); color: var(--ui-fg);  --ui-ol-color: var(--ui-muted); }.ui-ol > li { position: relative; padding-left: 2em; margin: .35em 0; overflow-wrap: anywhere; counter-increment: ui-ol; }.ui-ol > li::before { content: counter(ui-ol) "."; position: absolute; left: 0; top: 0; width: 1.6em; text-align: right;  color: var(--ui-ol-color); font-weight: 600; font-variant-numeric: tabular-nums; }.ui-ol-letters > li::before { content: counter(ui-ol, lower-alpha) "."; }.ui-ol-roman > li::before { content: counter(ui-ol, lower-roman) "."; }.ui-ol-circles > li { padding-left: 2.3em; }.ui-ol-circles > li::before { content: counter(ui-ol); top: .1em; width: 1.5em; height: 1.5em; border-radius: 50%;  display: inline-grid; place-items: center; background: var(--ui-ol-color); color: var(--ui-bg); font-size: .8em; line-height: 1; }.ui-ol-plain { list-style: decimal; padding-left: 1.6em; }.ui-ol-plain > li { padding-left: .3em; counter-increment: none; }.ui-ol-plain > li::before { content: none; }.ui-ol-plain > li::marker { color: var(--ui-ol-color); font-weight: 600; }.ui-ol-accent { --ui-ol-color: var(--ui-accent); }.ui-ol-circles.ui-ol-accent > li::before { color: var(--ui-accent-fg); }.ui-ol-fg { --ui-ol-color: var(--ui-fg); }.ui-ol-tight > li { margin: .1em 0; }.ui-ol-loose > li { margin: .75em 0; }.ui-ol-sm { font-size: 13px; }.ui-ol-lg { font-size: 17px; }.ui-ol li > .ui-ol { margin-top: .35em; }`view OrderedList(items: list = [], variant: str = "numbers", start: int = 1, tone: str = "muted", spacing: str = "normal",                 size: str = "md", id: str? = null, class: str? = null, children) {    style global ordered_list_css    <ol class={ui_cls(["ui-ol", variant != "numbers" && `ui-ol-${variant}`, tone != "muted" && `ui-ol-${tone}`,                       spacing != "normal" && `ui-ol-${spacing}`, size != "md" && `ui-ol-${size}`, class])}        id={id} start={start != 1 ? start : null} style={start != 1 ? `counter-reset: ui-ol ${start - 1}` : null}>        {for it in items => <li>{it}</li>}        {children}    </ol>}
BulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.typographylisttextno-js6 views · 7 downloadsAbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.typographytextaccessibilityno-js6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.typographytextdocumentno-js6 views · 6 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.typographytextimageno-js5 views · 7 downloadsCheckListItems shown done or not with ticks and crosses (or empty circles), read-only, with an optional count.typographyliststatusno-js5 views · 8 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.typographytextdocumentno-js5 views · 6 downloads
Thread
55Useful? Like it, or add to its thread below.

Thread 0 posts

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

No posts yet. The first one opens the thread.