Link
A styled link that shows an icon and opens a new tab when it leaves the site, with underline and tone variants.
Demo
Read the docs, or the source on GitHub (opens in a new tab). The release notes are on the site.
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/link.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/link.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/link.qwe
view LinkDemo() = <div.demo-stack> <p.demo-note style="color: var(--ui-fg); font-size: 15px"> Read <Link href="/docs" id="link-demo-docs">the docs</Link>, or the source on{" "} <Link href="https://github.com/quillolang/components" id="link-demo-ext">GitHub</Link>. The release notes are on <Link href="https://quillolang.org/notes" new_tab={false} id="link-demo-same">the site</Link>. </p> <div.demo-row> <Link href="#link" underline="hover" id="link-demo-hover">Underline on hover</Link> <Link href="#link" underline="none">No underline</Link> <Link href="#link" tone="inherit" id="link-demo-inherit">Inherits the colour</Link> <Link href="#link" tone="muted">Muted</Link> <Link href="#link" weight="medium">Medium weight</Link> <Link href="data:text/plain,hello" download="hello.txt" id="link-demo-download">Download hello.txt</Link> </div> </div>Source
ui/link.qwe
// Link: a styled link, with an icon and a new tab when it leaves the site, and a// choice of underline.//// <Link href="/docs">Read the docs</Link>// <Link href="https://quillolang.org">quillolang.org</Link> (external: icon, new tab)// <Link href="/settings" underline="hover" tone="muted">Settings</Link>//// href: where it goes. external: whether it leaves the site; when not given, an href// starting with http://, https:// or // counts as external. An external link gets a// small arrow icon, opens in a new tab and says so to screen readers; new_tab={false}// keeps it in this tab. Any link can take new_tab={true}.// underline: "always" (default), "hover" or "none". tone: "accent" (default), "inherit"// (the text's colour) or "muted". weight: "normal" (default) or "medium".// download: the file name to save as (makes a download link). rel, target, id and class go// to the <a>. on_click(): inside one of your components, what a click does.import ui/theme.qwe use ui_clslet link_css = css`.ui-link { display: inline; color: var(--ui-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; border-radius: 3px; cursor: pointer; transition: color .15s, text-decoration-color .15s; }.ui-link:hover { color: color-mix(in srgb, var(--ui-accent) 80%, var(--ui-fg)); text-decoration-thickness: 2px; }.ui-link:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-link-inherit { color: inherit; }.ui-link-inherit:hover { color: var(--ui-accent); }.ui-link-muted { color: var(--ui-muted); }.ui-link-muted:hover { color: var(--ui-fg); }.ui-link-hover { text-decoration: none; }.ui-link-hover:hover { text-decoration: underline; }.ui-link-none, .ui-link-none:hover { text-decoration: none; }.ui-link-medium { font-weight: 500; }.ui-link-ext { display: inline-block; width: .8em; height: .8em; margin-left: .2em; vertical-align: -.02em; }@media (prefers-reduced-motion: reduce) { .ui-link { transition: none; } }`// Whether an href leaves the site: http://, https:// or //.fn link_is_external(href: str) -> bool = starts_with(href, "http://") || starts_with(href, "https://") || starts_with(href, "//")view Link(href: str, external: bool? = null, new_tab: bool? = null, underline: str = "always", tone: str = "accent", weight: str = "normal", download: str? = null, rel: str? = null, target: str? = null, id: str? = null, class: str? = null, on_click = null, children) { style global link_css let ext = external ?? link_is_external(href) let blank = new_tab ?? ext let the_rel = rel ?? (blank ? "noopener noreferrer" : null) <a class={ui_cls(["ui-link", underline != "always" && `ui-link-${underline}`, tone != "accent" && `ui-link-${tone}`, weight != "normal" && `ui-link-${weight}`, class])} href={href} id={id} target={target ?? (blank ? "_blank" : null)} rel={the_rel} download={download} @click={() => { on_click && on_click() }}> {children} {ext && <svg.ui-link-ext viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3H3.5A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10M9 2h5v5M14 2 7 9"/></svg>} {blank && <span.ui-sr> (opens in a new tab)</span>} </a>}Related
FootnoteA numbered footnote mark in the text and the list of notes at the end, each linking to the other.6 views · 6 downloadsFooterA site's footer: brand and tagline, columns of links under titles, and a bottom line with the small print.6 views · 6 downloadsAbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 6 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCalloutA highlighted aside with an icon and a title, as a note, tip, warning, important point or caution.6 views · 6 downloads
Thread
Thread 0 posts
On Link: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.