mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
2 Commits
kj/selecto
...
kj/renamin
| Author | SHA1 | Date | |
|---|---|---|---|
|
ed10f36b28 | ||
|
|
a13be817db |
@@ -43,6 +43,15 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addFilter(name, filters[name]);
|
||||
}
|
||||
|
||||
eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
|
||||
key = key.split('.');
|
||||
return arr.sort((a, b) => {
|
||||
let aVal = key.reduce((obj, i) => obj?.[i], a);
|
||||
let bVal = key.reduce((obj, i) => obj?.[i], b);
|
||||
return aVal.localeCompare(bVal);
|
||||
});
|
||||
});
|
||||
|
||||
// Shortcodes - {% shortCode arg1, arg2 %}
|
||||
eleventyConfig.addShortcode('cdnUrl', location => {
|
||||
return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/color/standard.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
@@ -94,8 +94,8 @@
|
||||
</wa-button>
|
||||
|
||||
<a href="/" aria-label="Web Awesome">
|
||||
<span class="wa-desktop-only">{% include "logo.njk" %}</span>
|
||||
<span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
|
||||
<span class="only-desktop">{% include "logo.njk" %}</span>
|
||||
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
|
||||
</a>
|
||||
<small id="version-number" class="only-desktop">{{ package.version }}</small>
|
||||
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
|
||||
@@ -120,7 +120,7 @@
|
||||
{# Sidebar #}
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div class="only-mobile" slot="navigation-header">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
{# Cards for pages listed by category #}
|
||||
|
||||
<section id="grid" class="index-grid">
|
||||
{% for category, pages in allPages | groupByTags(categories) -%}
|
||||
<h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
|
||||
{%- for page in pages -%}
|
||||
{%- if not page.data.unlisted and not page.data.parent -%}
|
||||
{% include "page-card.njk" %}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</section>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<a href="{{ page.url }}" data-keywords="{{ page.data.keywords }}">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
@@ -20,7 +20,7 @@
|
||||
</ul>
|
||||
|
||||
{# Components #}
|
||||
<wa-details {{ 'open' if '/components/' in page.url }}>
|
||||
<wa-details{{ ' open' if '/components/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/components/" title="Overview">Components
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
@@ -28,16 +28,16 @@
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
{% for component in collections.components | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.noAlpha) and not component.data.unlisted %}
|
||||
{% for component in collections.component | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.isAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>
|
||||
|
||||
{% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
{% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
<ul>
|
||||
{% for child in collections.components | sort %}
|
||||
{% if child.data.parent == component.fileSlug and not (isAlpha and child.data.noAlpha) %}
|
||||
{% for child in collections.component | sort %}
|
||||
{% if child.data.parent == component.fileSlug and not (isAlpha and child.data.isAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
|
||||
</li>
|
||||
@@ -50,55 +50,38 @@
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<wa-details {{ 'open' if '/native/' in page.url }}>
|
||||
<wa-details{{ ' open' if '/natives/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/native/" title="Overview">Native Styles
|
||||
<a href="/docs/natives/" title="Overview">Natives
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.native | sort %}
|
||||
{% if page.fileSlug != 'native' and not page.unlisted %}
|
||||
{% for page in collections.natives | sort %}
|
||||
<li>
|
||||
<a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
<a href="/docs/natives/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<wa-details {{ 'open' if '/utilities/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/utilities/" title="Overview">Style Utilities
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.utilities | sort %}
|
||||
{% if page.fileSlug != 'utilities' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="/docs/utilities/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
{# Layout #}
|
||||
{% if not isAlpha %}
|
||||
<h2>
|
||||
<a href="/docs/layout" title="Overview">Layout
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.layout | sort %}
|
||||
{% if page.fileSlug != 'layout' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="{{ page.url }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li><a href="/docs/components/page">Page</a></li>
|
||||
<li><a href="/docs/layout/cluster">Cluster</a></li>
|
||||
<li><a href="/docs/layout/flank">Flank</a></li>
|
||||
<li><a href="/docs/layout/frame">Frame</a></li>
|
||||
<li><a href="/docs/layout/grid">Grid</a></li>
|
||||
<li><a href="/docs/layout/split">Split</a></li>
|
||||
<li><a href="/docs/layout/stack">Stack</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# Patterns #}
|
||||
{% if not isAlpha %}
|
||||
@@ -129,11 +112,39 @@
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.theming | sort %}
|
||||
{% if page.fileSlug != 'theming' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="/docs/theming/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li>
|
||||
<a href="/docs/theming/color">Color</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/typography">Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/space">Space</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/borders">Borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/focus">Focus</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/shadows">Shadows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/transitions">Transitions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/component-groups">Component Groups</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{# Style Utilities #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Style Utilities</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/style-utilities/align-items">Align Items</a></li>
|
||||
<li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
|
||||
<li><a href="/docs/style-utilities/gap">Gap</a></li>
|
||||
<li><a href="/docs/style-utilities/text">Text</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{% if since -%}
|
||||
<wa-badge variant="neutral">Since {{ since }}</wa-badge>
|
||||
{%- endif %}
|
||||
|
||||
{% if status -%}
|
||||
{%- if status == "wip" %}
|
||||
<wa-badge variant="danger">
|
||||
<wa-icon name="pickaxe"></wa-icon>
|
||||
Work In Progress
|
||||
</wa-badge>
|
||||
{%- elif status == "experimental" -%}
|
||||
<wa-badge variant="warning">
|
||||
<wa-icon name="flask"></wa-icon>
|
||||
Experimental
|
||||
</wa-badge>
|
||||
{%- elif status == "stable" -%}
|
||||
<wa-badge variant="brand">Stable</wa-badge>
|
||||
{%- else %}
|
||||
<wa-badge>{{ status}}</wa-badge>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
|
||||
{% if isPro -%}
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
{%- endif %}
|
||||
@@ -21,7 +21,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
{% set hasOutline = true %}
|
||||
{% set component = components[page.fileSlug] %}
|
||||
{% set description = component.summary %}
|
||||
{% set status = component.status %}
|
||||
{% set since = component.since %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
@@ -12,17 +10,24 @@
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
<code class="tag"><{{ component.tagName }}></code>
|
||||
<wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
|
||||
<wa-badge
|
||||
{% if component.status == 'stable' %}variant="brand"{% endif %}
|
||||
{% if component.status == 'experimental' %}variant="warning"{% endif %}
|
||||
>
|
||||
{{ component.status }}
|
||||
</wa-badge>
|
||||
|
||||
{% include '../_includes/status.njk' %}
|
||||
{% if isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
</div>
|
||||
<p class="summary">
|
||||
{{ component.summary | inlineMarkdown | safe }}
|
||||
</p>
|
||||
{% if native %}
|
||||
{% if natives %}
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
|
||||
Just want the styles?
|
||||
Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
|
||||
Check out <a href="/docs/natives/{{ natives }}/">{{ ('/docs/natives/' + natives + '/') | getTitleFromUrl }} natives</a>!
|
||||
</wa-callout>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -10,7 +10,19 @@
|
||||
{% for tag, url in elements %}
|
||||
<code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
|
||||
{% endfor %}
|
||||
{% include '../_includes/status.njk' %}
|
||||
{% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
|
||||
{% if status %}
|
||||
<wa-badge
|
||||
{% if status == 'stable' %}variant="brand"{% endif %}
|
||||
{% if status == 'experimental' %}variant="warning"{% endif %}
|
||||
>
|
||||
{{ status }}
|
||||
</wa-badge>
|
||||
{% endif %}
|
||||
|
||||
{% if isPro %}
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if description -%}
|
||||
<p class="summary">{{ description | inlineMarkdown | safe }}</p>
|
||||
@@ -36,7 +48,7 @@
|
||||
{# Slots #}
|
||||
{% if css_file %}
|
||||
<h2>Using these styles</h2>
|
||||
<p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
|
||||
<p>If you want to use these styles without using the entirety of Web Awesome Natives, you can include the following CSS files:</p>
|
||||
|
||||
|
||||
{% endif %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
|
||||
{% for className in classes %}
|
||||
<code class="class">.{{ className }}</code>
|
||||
{% endfor %}
|
||||
{% include '../_includes/status.njk' %}
|
||||
</div>
|
||||
{% if description -%}
|
||||
<p class="summary">{{ description | inlineMarkdown | safe }}</p>
|
||||
{%- endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
@@ -77,124 +77,3 @@ export function isArray(value) {
|
||||
export function toArray(value) {
|
||||
return isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
export function deepValue(obj, key) {
|
||||
key = Array.isArray(key) ? key : key.split('.');
|
||||
return key.reduce((subObj, property) => subObj?.[property], obj);
|
||||
}
|
||||
|
||||
function isNumeric(value) {
|
||||
return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
|
||||
}
|
||||
|
||||
function isEmpty(value) {
|
||||
return value === null || value === undefined || value === '';
|
||||
}
|
||||
|
||||
function compare(a, b) {
|
||||
let isEmptyA = isEmpty(a);
|
||||
let isEmptyB = isEmpty(b);
|
||||
|
||||
if (isEmptyA) {
|
||||
if (isEmptyB) {
|
||||
return 0;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
} else if (isEmptyB) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
// Both strings, and at least one non-numeric
|
||||
if (isNumeric(a) || isNumeric(b)) {
|
||||
return a - b;
|
||||
}
|
||||
|
||||
return (a + '').localeCompare(b);
|
||||
}
|
||||
|
||||
/** Sort an array of objects */
|
||||
export function sort(arr, keys = ['data.order', 'data.title']) {
|
||||
keys = toArray(keys);
|
||||
|
||||
return arr.sort((a, b) => {
|
||||
let aValues = keys.map(key => deepValue(a, key));
|
||||
let bValues = keys.map(key => deepValue(b, key));
|
||||
|
||||
for (let i = 0; i < aValues.length; i++) {
|
||||
let aVal = aValues[i];
|
||||
let bVal = bValues[i];
|
||||
let result = compare(aVal, bVal);
|
||||
|
||||
// They are not equal in terms of comparison OR we're at the last key
|
||||
if (result !== 0 || i === aValues.length - 1) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
|
||||
* @param {object[]} collection
|
||||
* @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
|
||||
* @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
|
||||
*/
|
||||
export function groupByTags(collection, tags) {
|
||||
if (!tags) {
|
||||
// Default to grouping by union of all tags
|
||||
tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
|
||||
} else if (Array.isArray(tags)) {
|
||||
// May contain objects of one-off tag -> label mappings
|
||||
tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
|
||||
} else if (typeof tags === 'object') {
|
||||
// tags is an object of tags to labels, so we just want the keys
|
||||
tags = Object.keys(tags);
|
||||
}
|
||||
|
||||
let ret = Object.fromEntries(tags.map(tag => [tag, []]));
|
||||
ret.other = [];
|
||||
|
||||
for (let item of collection) {
|
||||
let categorized = false;
|
||||
|
||||
for (let tag of tags) {
|
||||
if (item.data.tags.includes(tag)) {
|
||||
ret[tag].push(item);
|
||||
categorized = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!categorized) {
|
||||
ret.other.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove empty categories
|
||||
for (let category in ret) {
|
||||
if (ret[category].length === 0) {
|
||||
delete ret[category];
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function getCategoryTitle(category, categories) {
|
||||
let title;
|
||||
if (Array.isArray(categories)) {
|
||||
// Find relevant entry
|
||||
// [{id: "Title"}, id2, ...]
|
||||
title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
|
||||
} else if (typeof categories === 'object') {
|
||||
// {id: "Title", id2: "Title 2", ...}
|
||||
title = categories[category];
|
||||
}
|
||||
|
||||
if (title) {
|
||||
return title;
|
||||
}
|
||||
|
||||
// Capitalized
|
||||
return category.charAt(0).toUpperCase() + category.slice(1);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
await customElements.whenDefined('wa-checkbox');
|
||||
let container = document.getElementById('page_slots_demo');
|
||||
|
||||
let fieldset = container.querySelector('fieldset');
|
||||
@@ -9,16 +10,7 @@ let includes = `${stylesheets}
|
||||
<script src="/dist/webawesome.loader.js" type="module"></script>
|
||||
<link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
|
||||
|
||||
async function render() {
|
||||
await customElements.whenDefined('wa-checkbox');
|
||||
|
||||
// Let checkboxes update their "state"
|
||||
await Promise.allSettled(
|
||||
Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
|
||||
return checkbox.updateComplete;
|
||||
}),
|
||||
);
|
||||
|
||||
function render() {
|
||||
let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
|
||||
let slotsHTML = slots
|
||||
.map(slot => {
|
||||
@@ -47,5 +39,5 @@ async function render() {
|
||||
iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
|
||||
}
|
||||
}
|
||||
await render();
|
||||
fieldset?.addEventListener('input', render);
|
||||
render();
|
||||
|
||||
@@ -26,7 +26,7 @@ wa-page {
|
||||
|
||||
.slot-content {
|
||||
padding: var(--wa-space-m);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@@ -19,10 +19,10 @@ document.addEventListener('click', event => {
|
||||
const html =
|
||||
`<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/applied.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'html > body {\n padding: 2rem !important;\n}';
|
||||
const css = 'html > body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
|
||||
const js = '';
|
||||
|
||||
const form = document.createElement('form');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.code-example {
|
||||
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
color: var(--wa-color-text-normal);
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
}
|
||||
@@ -41,8 +41,8 @@
|
||||
border-bottom: none;
|
||||
|
||||
pre {
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
border-bottom-right-radius: var(--wa-border-radius-m);
|
||||
border-bottom-left-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,11 +62,11 @@
|
||||
|
||||
&:first-of-type {
|
||||
border-left: none;
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-right-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
@@ -6,7 +6,7 @@ wa-copy-button.copy-button {
|
||||
right: 0.25rem;
|
||||
font-family: var(--wa-font-family-body);
|
||||
color: var(--wa-color-gray-80);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -104,9 +104,17 @@ wa-page > header {
|
||||
wa-details {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
wa-details::part(header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
wa-details::part(content) {
|
||||
padding-inline: 0;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
||||
font-size: var(--wa-font-size-s);
|
||||
@@ -261,7 +269,7 @@ h1.title wa-badge {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
border: var(--wa-border-style) var(--wa-border-width-s);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 1rem;
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
|
||||
@@ -321,45 +329,8 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
|
||||
.page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
[slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
}
|
||||
|
||||
.page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
}
|
||||
|
||||
.index-category {
|
||||
@@ -368,13 +339,107 @@ wa-page > main:has(> .index-grid) {
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
.index-grid .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Index Pages */
|
||||
wa-page > main:has(> .index-grid) {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.index-summary {
|
||||
max-inline-size: 80ch;
|
||||
}
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-category {
|
||||
grid-column: 1 / -1;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
.index-grid .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-neutral-border-normal);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
box-sizing: border-box;
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
@@ -384,13 +449,13 @@ wa-page > main:has(> .index-grid) {
|
||||
/* Layout Examples */
|
||||
.layout-example-boundary {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.layout-example-block {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
@@ -426,6 +491,11 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
/** desktop */
|
||||
@media screen and not (max-width: 768px) {
|
||||
wa-page [data-toggle-nav],
|
||||
wa-page .only-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation sidebar */
|
||||
wa-page::part(navigation) {
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
.diff-grid > * {
|
||||
height: 100%;
|
||||
}
|
||||
.diff-dialog {
|
||||
.diff-dialog::part(dialog) {
|
||||
max-width: 90vw;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
@@ -42,6 +42,5 @@
|
||||
|
||||
#outline-expandable {
|
||||
display: block;
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
#site-search {
|
||||
width: 38rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
--width: 38rem;
|
||||
|
||||
&::part(base) {
|
||||
margin-block: 10rem;
|
||||
&::part(dialog) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 0;
|
||||
margin: 10rem auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::part(body) {
|
||||
@@ -19,22 +18,21 @@
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
max-width: calc(100% - 2rem);
|
||||
|
||||
&::part(base) {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - 20rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
@media screen and (max-width: 900px) {
|
||||
#site-search::part(dialog) {
|
||||
max-width: calc(100% - 2rem);
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
#site-search-container {
|
||||
max-height: calc(100dvh - 2rem);
|
||||
}
|
||||
}
|
||||
@@ -231,8 +229,8 @@ header {
|
||||
gap: 2rem;
|
||||
color: var(--wa-color-text-quiet);
|
||||
border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-m);
|
||||
border-bottom-right-radius: var(--wa-border-radius-m);
|
||||
padding: 1rem;
|
||||
|
||||
kbd {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Animated Image
|
||||
description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
tags: [imagery, niche]
|
||||
icon: animated-image
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Animation
|
||||
description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
|
||||
tags: [helpers, primitives]
|
||||
icon: animation
|
||||
tags: component
|
||||
---
|
||||
|
||||
To animate an element, wrap it in `<wa-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
|
||||
@@ -197,3 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
|
||||
animation.play = true;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Avatars are used to represent a person or object.
|
||||
tags: [imagery, apps, content]
|
||||
icon: avatar
|
||||
tags: component
|
||||
---
|
||||
|
||||
By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Badge
|
||||
description: Badges are used to draw attention and display statuses or counts.
|
||||
tags: [feedback, content]
|
||||
icon: badge
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -128,3 +127,4 @@ When including badges in menu items, use the `suffix` slot to make sure they're
|
||||
<wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
|
||||
<wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
|
||||
</wa-menu>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
tags: [navigation]
|
||||
icon: breadcrumb
|
||||
tags: component
|
||||
---
|
||||
|
||||
Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
|
||||
@@ -172,3 +171,4 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
|
||||
</wa-dropdown>
|
||||
</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Button Group
|
||||
description: Button groups can be used to group related buttons into sections.
|
||||
tags: [actions, forms, apps]
|
||||
icon: button-group
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -140,17 +139,15 @@ Pill buttons are supported through the button's `pill` attribute.
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
### Dropdowns and Native Buttons in Button Groups
|
||||
### Dropdowns in Button Groups
|
||||
|
||||
Other elements can also be placed inside button groups:
|
||||
- Native buttons as long as their [native styles](/docs/native/button) are included
|
||||
- Dropdowns as long as the trigger is either a `<wa-button>`, or a `<button>` with [native styles](/docs/native/button) included.
|
||||
Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Example Button Group">
|
||||
<wa-button>Button</wa-button>
|
||||
<button>Native Button</button>
|
||||
<wa-dropdown hoist>
|
||||
<wa-button>Button</wa-button>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Item 1</wa-menu-item>
|
||||
@@ -168,9 +165,9 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
|
||||
```html {.example}
|
||||
<wa-button-group label="Example Button Group">
|
||||
<wa-button variant="brand">Save</wa-button>
|
||||
<wa-dropdown placement="bottom-end" hoist>
|
||||
<wa-dropdown placement="bottom-end">
|
||||
<wa-button slot="trigger" variant="brand" caret>
|
||||
<span class="wa-visually-hidden">More options</span>
|
||||
<wa-visually-hidden>More options</wa-visually-hidden>
|
||||
</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Save</wa-menu-item>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Button
|
||||
description: Buttons represent actions that are available to the user.
|
||||
tags: [actions, forms]
|
||||
native: button
|
||||
icon: button
|
||||
tags: component
|
||||
natives: button
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -29,37 +28,35 @@ Use the `variant` attribute to set the button's semantic variant.
|
||||
Use the `appearance` attribute to change the button's visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="brand">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="brand">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="brand">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="success">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="success">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="success">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="warning">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="warning">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="warning">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="danger">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="danger">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="danger">Plain</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="neutral">Text</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="brand">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="brand">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="brand">Text</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="success">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="success">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="success">Text</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="warning">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="warning">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="warning">Text</wa-button>
|
||||
</div>
|
||||
<div>
|
||||
<wa-button appearance="accent" variant="danger">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="danger">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="danger">Text</wa-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
tags: [feedback, content]
|
||||
icon: callout
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Card
|
||||
description: Cards can be used to group related subjects in a container.
|
||||
tags: [organization, layout]
|
||||
icon: card
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Carousel Item
|
||||
description: A carousel item represent a slide within a carousel.
|
||||
tags: component
|
||||
parent: carousel
|
||||
icon: carousel-item
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Carousel
|
||||
description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||||
tags: [imagery, disclosure]
|
||||
icon: carousel
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Component Cheatsheet
|
||||
layout: docs
|
||||
unlisted: true
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -65,21 +64,15 @@ table code {
|
||||
<tr>
|
||||
<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
|
||||
<td>
|
||||
{% set componentLinks = [] %}
|
||||
{% for component in thingComponents %}
|
||||
{%- set link -%}
|
||||
<a href="../{{ component.slug }}"><code><{{ component.tagName }}></code></a>
|
||||
{%- endset -%}
|
||||
{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
|
||||
{% set componentLinks = (componentLinks.push(link), componentLinks) %}
|
||||
{%- endfor -%}
|
||||
{% if thingComponents.length > 1 %}
|
||||
<details open>
|
||||
<summary><strong>{{ thingComponents.length }}</strong> components</summary>
|
||||
{{ componentLinks | safe }}
|
||||
{% endif %}
|
||||
{% for component in thingComponents %}
|
||||
<a href="../{{ component.slug }}"><code><{{ component.tagName }}></code></a>
|
||||
{%- endfor -%}
|
||||
{% if thingComponents.length > 1 %}
|
||||
</details>
|
||||
{% else %}
|
||||
{{ componentLinks | safe }}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
tags: [inputs, forms]
|
||||
native: checkbox
|
||||
icon: checkbox
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -174,7 +174,7 @@ i.e. the previews of demos using the `viewport` attribute, but also opening demo
|
||||
Just setting `border-radius` or `border` should work as expected:
|
||||
|
||||
```html{.example}
|
||||
<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-m)">
|
||||
<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-s)">
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<wa-button>Click me!</wa-button>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Color Picker
|
||||
description: Color pickers allow the user to select a color.
|
||||
tags: [inputs, forms]
|
||||
native: input
|
||||
icon: color-picker
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -39,12 +37,10 @@ Set the color picker's format with the `format` attribute. Valid options include
|
||||
To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 12ch;">
|
||||
<wa-color-picker format="hex" value="#4a90e2" label="Pick a hex color"></wa-color-picker>
|
||||
<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Pick an RGB color"></wa-color-picker>
|
||||
<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Pick an HSL color"></wa-color-picker>
|
||||
<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Pick an HSV color"></wa-color-picker>
|
||||
</div>
|
||||
<wa-color-picker format="hex" value="#4a90e2" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></wa-color-picker>
|
||||
```
|
||||
|
||||
### Swatches
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
{
|
||||
"layout": "component.njk",
|
||||
"tags": ["components"]
|
||||
"layout": "component.njk"
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Copy Button
|
||||
description: Copies data to the clipboard when the user clicks the button.
|
||||
tags: [actions, apps]
|
||||
icon: copy-button
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Details
|
||||
description: Details show a brief summary and expand to show additional content.
|
||||
tags: [organization, apps, content, disclosure]
|
||||
icon: details
|
||||
native: details
|
||||
tags: component
|
||||
natives: details
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Dialog
|
||||
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
|
||||
tags: [organization, apps, disclosure]
|
||||
icon: dialog
|
||||
native: dialog
|
||||
keywords: modal
|
||||
tags: component
|
||||
natives: dialog
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers are used to visually separate or group elements.
|
||||
tags: [organization, content, forms]
|
||||
icon: divider
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Drawer
|
||||
description: Drawers slide in from a container to expose additional options and information.
|
||||
tags: [organization, disclosure]
|
||||
icon: drawer
|
||||
tags: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Dropdown
|
||||
description: 'Dropdowns expose additional content that "drops down" in a panel.'
|
||||
tags: [actions, apps]
|
||||
icon: dropdown
|
||||
tags: component
|
||||
---
|
||||
|
||||
Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Format Bytes
|
||||
description: Formats a number as a human readable bytes value.
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-bytes
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Format Date
|
||||
description: Formats a date/time using the specified locale and options.
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-date
|
||||
tags: component
|
||||
---
|
||||
|
||||
Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Format Number
|
||||
description: Formats a number using the specified locale and options.
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-number
|
||||
tags: component
|
||||
---
|
||||
|
||||
Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Icon Button
|
||||
description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
||||
tags: [actions, apps]
|
||||
icon: icon-button
|
||||
tags: component
|
||||
---
|
||||
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Icon
|
||||
description: Icons are symbols that can be used to represent various options within an application.
|
||||
tags: [imagery, apps, popular]
|
||||
icon: icon
|
||||
tags: component
|
||||
---
|
||||
|
||||
Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library).
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Image Comparer
|
||||
description: Compare visual differences between similar photos with a sliding panel.
|
||||
tags: [imagery, niche]
|
||||
icon: image-comparer
|
||||
tags: component
|
||||
---
|
||||
|
||||
For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Include
|
||||
description: Includes give you the power to embed external HTML files into the page.
|
||||
tags: [helpers, primitives]
|
||||
icon: include
|
||||
tags: component
|
||||
---
|
||||
|
||||
Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made.
|
||||
|
||||
@@ -1,24 +1,422 @@
|
||||
---
|
||||
title: Components
|
||||
description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
categories:
|
||||
- actions
|
||||
- feedback: 'Feedback & Status'
|
||||
- imagery
|
||||
- inputs
|
||||
- navigation
|
||||
- organization
|
||||
- helpers: 'Utilities'
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
<p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
|
||||
|
||||
<div id="component-filter">
|
||||
<wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
|
||||
</div>
|
||||
|
||||
{% set allPages = collections.components %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
<div id="component-grid" class="index-grid">
|
||||
<h2 class="index-category">Actions</h2>
|
||||
<a href="/docs/components/button">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/button.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/button-group">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/button-group.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Button Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/copy-button">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/copy-button.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Copy Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/dropdown">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/dropdown.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Dropdown</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/icon-button">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/icon-button.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Icon Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/menu">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/menu.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Menu</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/qr-code">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/qr-code.njk" %}
|
||||
</div>
|
||||
<span class="page-name">QR Code</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category" style="grid-column: 1 / -1">Feedback and Status</h2>
|
||||
<a href="/docs/components/badge">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/badge.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Badge</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/callout">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/callout.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Callout</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/progress-bar">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/progress-bar.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Progress Bar</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/progress-ring">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/progress-ring.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Progress Ring</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/skeleton">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/skeleton.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Skeleton</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/spinner" data-keywords="loader">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/spinner.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Spinner</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tag">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tag.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tag</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tooltip">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tooltip.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tooltip</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Imagery</h2>
|
||||
<a href="/docs/components/animated-image">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/animated-image.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Animated Image</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/avatar">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/avatar.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Avatar</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/carousel">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/carousel.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Carousel</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/icon">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/icon.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Icon</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/image-comparer">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/image-comparer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Image Comparer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Inputs</h2>
|
||||
<a href="/docs/components/checkbox">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/checkbox.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Checkbox</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/color-picker">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/color-picker.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Color Picker</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/input" data-keywords="textfield text field">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/input.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Input</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/radio-group">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/radio-group.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Radio Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/range">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/range.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Range</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/rating">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/rating.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Rating</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/select">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/select.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Select</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/switch" data-keywords="toggle">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/switch.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Switch</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/textarea">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/textarea.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Textarea</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Navigation</h2>
|
||||
<a href="/docs/components/breadcrumb">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/breadcrumb.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Breadcrumb</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tab-group">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tab-group.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tab Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tree">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tree.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tree</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Organization</h2>
|
||||
<a href="/docs/components/card">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/card.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Card</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/details">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/details.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Details</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/dialog" data-keywords="modal">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/dialog.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Dialog</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/divider">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/divider.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Divider</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/drawer">
|
||||
<wa-card with-header id="drawer-card">
|
||||
<div slot="header">
|
||||
{% include "svgs/drawer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Drawer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/page">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/page.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Page</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/split-panel">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/split-panel.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Split Panel</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Utilities</h2>
|
||||
<a href="/docs/components/animation">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/animation.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Animation</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-bytes">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/format-bytes.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Format Bytes</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-date">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/format-date.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Format Date</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-number">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/format-number.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Format Number</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/include">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/include.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Include</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/mutation-observer">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/mutation-observer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Mutation Observer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/popup">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/popup.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Popup</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/relative-time">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/relative-time.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Relative Time</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/resize-observer">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/resize-observer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Resize Observer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/visually-hidden">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/visually-hidden.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Visually Hidden</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="component-filter-empty" hidden>
|
||||
No results
|
||||
@@ -27,28 +425,27 @@ override:tags: []
|
||||
<script type="module">
|
||||
const container = document.getElementById('component-filter');
|
||||
const empty = document.getElementById('component-filter-empty');
|
||||
const grid = document.getElementById('content');
|
||||
const grid = document.getElementById('component-grid');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
function updateResults() {
|
||||
const filter = input.value.toLowerCase().trim();
|
||||
|
||||
|
||||
// Hide headings while filtering
|
||||
grid.querySelectorAll('h2').forEach(heading => {
|
||||
heading.hidden = filter === '' ? false : true;
|
||||
});
|
||||
|
||||
// Show matching components
|
||||
grid.querySelectorAll('a:has(> wa-card)').forEach(link => {
|
||||
console.log(link);
|
||||
grid.querySelectorAll('a').forEach(link => {
|
||||
const content = link.textContent.toLowerCase();
|
||||
const keywords = link.getAttribute('data-keywords') || '';
|
||||
const isMatch = filter === '' || (content + keywords).includes(filter);
|
||||
link.hidden = !isMatch;
|
||||
link.classList.toggle('hidden', !isMatch);
|
||||
});
|
||||
|
||||
// Show empty state when there's a search filter and no results
|
||||
if (filter !== '' && grid.querySelector('a:not([hidden])') === null) {
|
||||
if (filter !== '' && grid.querySelector('a:not(.hidden)') === null) {
|
||||
empty.hidden = false;
|
||||
} else {
|
||||
empty.hidden = true;
|
||||
@@ -65,13 +462,27 @@ override:tags: []
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#component-filter {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
#component-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--wa-space-m);
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
|
||||
> a {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
|
||||
&.hidden {
|
||||
display: block;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#component-filter-empty {
|
||||
border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-size: var(--wa-font-size-l);
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-align: center;
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Input
|
||||
description: Inputs collect data from the user.
|
||||
tags: [inputs, forms]
|
||||
icon: input
|
||||
native: input
|
||||
keywords: textfield text field
|
||||
tags: component
|
||||
natives: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -135,35 +133,33 @@ Use the `prefix` and `suffix` slots to add icons.
|
||||
Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.
|
||||
|
||||
```html {.example}
|
||||
<div class="label-on-left">
|
||||
<wa-input label="Name" hint="Enter your name"></wa-input>
|
||||
<wa-input label="Email" type="email" hint="Enter your email"></wa-input>
|
||||
<wa-textarea label="Bio" hint="Tell us something about yourself"></wa-textarea>
|
||||
</div>
|
||||
<wa-input class="label-on-left" label="Name" hint="Enter your name"></wa-input>
|
||||
<wa-input class="label-on-left" label="Email" type="email" hint="Enter your email"></wa-input>
|
||||
<wa-textarea class="label-on-left" label="Bio" hint="Tell us something about yourself"></wa-textarea>
|
||||
|
||||
<style>
|
||||
.label-on-left {
|
||||
--label-width: 3.75rem;
|
||||
--gap-width: 1rem;
|
||||
}
|
||||
|
||||
.label-on-left + .label-on-left {
|
||||
margin-top: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.label-on-left::part(form-control) {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--wa-space-l);
|
||||
grid: auto / var(--label-width) 1fr;
|
||||
gap: var(--wa-space-3xs) var(--gap-width);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
wa-input, wa-textarea {
|
||||
grid-column: 1 / -1;
|
||||
grid-row-end: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
gap: 0 var(--wa-space-l);
|
||||
align-items: center;
|
||||
}
|
||||
.label-on-left::part(form-control-label) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
::part(label) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
::part(hint) {
|
||||
grid-column: 2;
|
||||
}
|
||||
.label-on-left::part(hint) {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Menu Item
|
||||
description: Menu items provide options for the user to pick from in a menu.
|
||||
tags: component
|
||||
parent: menu
|
||||
icon: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Menu Label
|
||||
description: Menu labels are used to describe a group of menu items.
|
||||
tags: component
|
||||
parent: menu
|
||||
icon: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Menu
|
||||
description: Menus provide a list of options for the user to choose from.
|
||||
tags: [actions, apps]
|
||||
icon: menu
|
||||
tags: component
|
||||
---
|
||||
|
||||
You can use [menu items](/docs/components/menu-item), [menu labels](/docs/components/menu-label), and [dividers](/docs/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Mutation Observer
|
||||
description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.
|
||||
tags: [helpers, primitives]
|
||||
icon: mutation-observer
|
||||
tags: component
|
||||
---
|
||||
|
||||
The mutation observer will report changes to the content it wraps through the `wa-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed.
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Option
|
||||
description: Options define the selectable items within various form controls such as select.
|
||||
tags: component
|
||||
parent: select
|
||||
icon: option
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Sample Documentation Page
|
||||
description: A sample page for a documentation website using Web Awesome's page component.
|
||||
layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -127,7 +126,7 @@ eleventyExcludeFromCollections: true
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
@@ -149,7 +148,7 @@ eleventyExcludeFromCollections: true
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="wa-border-radius-l max-inline-size: 40ch;">
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Sample Media App Page
|
||||
description: A sample page for a media app using Web Awesome's page component.
|
||||
layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<wa-page class="wa-theme-default-dark">
|
||||
@@ -277,21 +276,21 @@ eleventyExcludeFromCollections: true
|
||||
<div slot="main-footer" class="wa-grid wa-gap-xl">
|
||||
<h2 class="wa-heading-2xl">More You Might Like</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Festival of Lights</span>
|
||||
<span class="wa-caption-s">Station</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Holiday Cheer</span>
|
||||
<span class="wa-caption-s">Essential Playlist</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Nursery Rhymes from the Shire</span>
|
||||
@@ -341,7 +340,7 @@ eleventyExcludeFromCollections: true
|
||||
margin: 0;
|
||||
}
|
||||
[slot='navigation'] ul a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-xs);
|
||||
}
|
||||
[slot='navigation'] ul a:hover,
|
||||
@@ -357,7 +356,7 @@ eleventyExcludeFromCollections: true
|
||||
justify-content: center;
|
||||
}
|
||||
[slot='navigation'] #recent wa-icon {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
[slot='main-header'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Page
|
||||
description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
tags: [organization, layout]
|
||||
tags: component
|
||||
isPro: true
|
||||
order: 1
|
||||
# icon: page
|
||||
---
|
||||
|
||||
The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
|
||||
@@ -41,10 +39,6 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
::info
|
||||
If you use [native styles](/docs/native/), this is already taken care of.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
:::warning
|
||||
@@ -69,7 +63,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
<header slot="header" class="wa-split">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
|
||||
<span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
|
||||
<span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
|
||||
<a href="#">Our Work</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Discover</a>
|
||||
@@ -89,7 +83,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
<wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
</div>
|
||||
<wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem;">
|
||||
<wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
</nav>
|
||||
@@ -119,7 +113,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
@@ -141,7 +135,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch;">
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -166,7 +160,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<aside slot="aside" class="wa-desktop-only">
|
||||
<aside slot="aside">
|
||||
<h2 class="wa-heading-m">Discover More Birds</h2>
|
||||
<wa-card with-image>
|
||||
<div slot="image" class="wa-frame">
|
||||
@@ -234,6 +228,10 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
--aside-width: 15rem;
|
||||
}
|
||||
wa-page[view='desktop'] {
|
||||
[data-toggle-nav] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[slot*='navigation'] {
|
||||
border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
@@ -241,6 +239,12 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
--aside-width: auto;
|
||||
|
||||
[slot='aside'],
|
||||
#brand-name,
|
||||
#search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[slot='banner'] {
|
||||
@@ -267,10 +271,9 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
|
||||
.wa-flank {
|
||||
--flank-size: 1.25em;
|
||||
}
|
||||
}
|
||||
[slot='navigation-footer'] .wa-flank {
|
||||
--flank-size: 1.25em;
|
||||
}
|
||||
[slot='main-header'],
|
||||
main,
|
||||
@@ -306,7 +309,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
<wa-icon name="record-vinyl"></wa-icon>
|
||||
<span class="wa-heading-m">radiogaga</span>
|
||||
</div>
|
||||
<wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%;">
|
||||
<wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster">
|
||||
@@ -315,7 +318,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
</div>
|
||||
</header>
|
||||
<div slot="navigation-header" class="wa-split">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;" class="wa-mobile-only">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-split">
|
||||
@@ -576,21 +579,21 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
<div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
|
||||
<h2 class="wa-heading-2xl">More You Might Like</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Festival of Lights</span>
|
||||
<span class="wa-caption-s">Station</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Holiday Cheer</span>
|
||||
<span class="wa-caption-s">Essential Playlist</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Nursery Rhymes from the Shire</span>
|
||||
@@ -605,10 +608,17 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
--wa-tooltip-arrow-size: 0;
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
wa-page[view='desktop'] {
|
||||
:is([data-toggle-nav], #search-nav-drawer) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
|
||||
#search-header {
|
||||
display: none;
|
||||
}
|
||||
[slot*='main'], main {
|
||||
padding: var(--wa-space-xl);
|
||||
}
|
||||
@@ -647,7 +657,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-xs);
|
||||
|
||||
&:hover {
|
||||
@@ -664,7 +674,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
justify-content: center;
|
||||
}
|
||||
#recent wa-icon {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -835,10 +845,6 @@ wa-page[view='desktop'] [data-toggle-nav] {
|
||||
}
|
||||
```
|
||||
|
||||
::info
|
||||
If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens.
|
||||
:::
|
||||
|
||||
#### Custom Widths
|
||||
|
||||
You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
|
||||
@@ -873,16 +879,3 @@ You can override the default spacing for each slot with your own CSS. In this ex
|
||||
}
|
||||
```
|
||||
|
||||
## Utility classes
|
||||
|
||||
[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as
|
||||
two utility classes you can use for common responsive design tasks:
|
||||
- `.wa-mobile-only` hides an element on the desktop view
|
||||
- `.wa-desktop-only` hides an element on the mobile view
|
||||
|
||||
|
||||
If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Popup
|
||||
description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
|
||||
tags: [helpers, primitives]
|
||||
icon: popup
|
||||
tags: component
|
||||
---
|
||||
|
||||
This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more.
|
||||
@@ -78,7 +77,7 @@ Popup is a low-level utility built specifically for positioning elements. Do not
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-overview-options {
|
||||
@@ -136,7 +135,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -173,7 +172,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -220,7 +219,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-placement wa-select {
|
||||
@@ -264,7 +263,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-distance wa-range {
|
||||
@@ -308,7 +307,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-skidding wa-range {
|
||||
@@ -383,7 +382,7 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-arrow-options {
|
||||
@@ -450,7 +449,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-sync wa-select {
|
||||
@@ -510,7 +509,7 @@ Toggle the switch and scroll the container to see the difference.
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-strategy wa-switch {
|
||||
@@ -566,7 +565,7 @@ Scroll the container to see how the popup flips to prevent clipping.
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -619,7 +618,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -661,7 +660,7 @@ Toggle the switch to see the difference.
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -713,7 +712,7 @@ Scroll the container to see the popup resize as its available space changes.
|
||||
|
||||
.popup-auto-size .box {
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
|
||||
/* This sets the preferred size of the popup's content */
|
||||
width: 100px;
|
||||
@@ -763,7 +762,7 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-hover-bridge wa-range {
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
description: Progress bars are used to show the status of an ongoing operation.
|
||||
tags: [feedback, apps]
|
||||
native: progress
|
||||
icon: progress-bar
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="40">
|
||||
<wa-icon slot="prefix" name="tasks"></wa-icon>
|
||||
</wa-progress-bar>
|
||||
<wa-progress-bar value="50"></wa-progress-bar>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -17,16 +13,17 @@ icon: progress-bar
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
|
||||
```
|
||||
|
||||
### Custom Height
|
||||
|
||||
Use the `height` CSS property to set the progress bar's height.
|
||||
Use the `--height` custom property to set the progress bar's height.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
|
||||
<wa-progress-bar value="50" style="--height: 6px;"></wa-progress-bar>
|
||||
```
|
||||
|
||||
### Showing Values
|
||||
@@ -34,19 +31,17 @@ Use the `height` CSS property to set the progress bar's height.
|
||||
Use the default slot to show a value.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-progress-bar value="50" id="progress-bar-demo">50%</wa-progress-bar>
|
||||
<wa-progress-bar value="50" class="progress-bar-values">50%</wa-progress-bar>
|
||||
|
||||
<div>
|
||||
<wa-icon-button pill name="minus" label="Decrease"></wa-icon-button>
|
||||
<wa-icon-button pill name="plus" label="Increase"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
|
||||
<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
|
||||
|
||||
<script>
|
||||
const progressBar = document.querySelector('#progress-bar-demo');
|
||||
const subtractButton = document.querySelector('wa-icon-button[name="minus"]');
|
||||
const addButton = document.querySelector('wa-icon-button[name="plus"]');
|
||||
const progressBar = document.querySelector('.progress-bar-values');
|
||||
const subtractButton = progressBar.nextElementSibling.nextElementSibling;
|
||||
const addButton = subtractButton.nextElementSibling;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const value = Math.min(100, progressBar.value + 10);
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
---
|
||||
title: Progress Ring
|
||||
description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
tags: [feedback, apps]
|
||||
icon: progress-ring
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="25">
|
||||
<wa-icon slot="prefix" name="circle-notch"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="25"></wa-progress-ring>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -18,9 +15,7 @@ icon: progress-ring
|
||||
Use the `--size` custom property to set the diameter of the progress ring.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--size: 200px;">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Track and Indicator Width
|
||||
@@ -28,9 +23,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
|
||||
Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
|
||||
<wa-icon slot="prefix" name="arrows-alt"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Colors
|
||||
@@ -44,13 +37,19 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
||||
--track-color: pink;
|
||||
--indicator-color: deeppink;
|
||||
"
|
||||
>
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Showing Values
|
||||
|
||||
Use the default slot to show a label inside the progress ring.
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: QR Code
|
||||
description: Generates a QR code and renders it using the Canvas API.
|
||||
tags: [actions, apps, niche]
|
||||
icon: qr-code
|
||||
tags: component
|
||||
---
|
||||
|
||||
QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.
|
||||
@@ -12,9 +11,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
<wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
|
||||
<br />
|
||||
|
||||
<wa-input maxlength="255" clearable label="Value">
|
||||
<wa-icon slot="prefix" name="link"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input maxlength="255" clearable label="Value"></wa-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -46,9 +43,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Size
|
||||
@@ -56,9 +51,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
|
||||
Use the `size` attribute to change the size of the QR code.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" size="64">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Radius
|
||||
@@ -66,9 +59,7 @@ Use the `size` attribute to change the size of the QR code.
|
||||
Create a rounded effect with the `radius` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5">
|
||||
<wa-icon slot="prefix" name="circle"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Error Correction
|
||||
@@ -77,18 +68,10 @@ QR codes can be rendered with various levels of [error correction](https://www.q
|
||||
|
||||
```html {.example}
|
||||
<div class="qr-error-correction">
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="L">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="M">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="Q">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="H">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Radio Button
|
||||
description: Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
tags: forms
|
||||
tags: component
|
||||
parent: radio-group
|
||||
icon: radio-group
|
||||
---
|
||||
|
||||
Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Radio Group
|
||||
description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
|
||||
tags: [inputs, forms]
|
||||
icon: radio-group
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,8 +3,6 @@ title: Radio
|
||||
description: Radios allow the user to select a single option from a group.
|
||||
tags: component
|
||||
parent: radio-group
|
||||
native: radio
|
||||
icon: radio-group
|
||||
---
|
||||
|
||||
Radios are designed to be used with [radio groups](/docs/components/radio-group).
|
||||
@@ -47,7 +45,7 @@ Use the `disabled` attribute to disable a radio.
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
## Sizes
|
||||
|
||||
Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
|
||||
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Range
|
||||
description: Ranges allow the user to select a single value within a given range using a slider.
|
||||
tags: [inputs, forms]
|
||||
native: slider
|
||||
icon: range
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -105,14 +103,3 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
|
||||
range.tooltipFormatter = value => `Total - ${value}%`;
|
||||
</script>
|
||||
```
|
||||
|
||||
### Right-to-Left languages
|
||||
|
||||
The component adapts to right-to-left (RTL) languages as you would expect.
|
||||
|
||||
```html {.example}
|
||||
<wa-range dir="rtl"
|
||||
label="مقدار"
|
||||
hint="التحكم في مستوى صوت الأغنية الحالية."
|
||||
style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-range>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Rating
|
||||
description: Ratings give users a way to quickly view and provide feedback.
|
||||
tags: [inputs, interactive]
|
||||
icon: rating
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -91,7 +90,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
|
||||
position: relative;
|
||||
top: -4px;
|
||||
left: 8px;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
background: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
text-align: center;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Relative Time
|
||||
description: Outputs a localized time phrase relative to the current date and time.
|
||||
tags: [helpers, inline, content]
|
||||
icon: relative-time
|
||||
tags: component
|
||||
---
|
||||
|
||||
Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Resize Observer
|
||||
description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.
|
||||
tags: [helpers, primitives]
|
||||
icon: resize-observer
|
||||
tags: component
|
||||
---
|
||||
|
||||
The resize observer will report changes to the dimensions of the elements it wraps through the `wa-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions.
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Select
|
||||
description: Selects allow you to choose items from a menu of predefined options.
|
||||
tags: [inputs, forms]
|
||||
native: select
|
||||
icon: select
|
||||
tags: component
|
||||
natives: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -415,10 +414,3 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
|
||||
container.addEventListener("submit", handleLazySubmit)
|
||||
</script>
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
//
|
||||
// TODO - remove once we switch to the Popover API
|
||||
//
|
||||
document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Skeleton
|
||||
description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
|
||||
tags: [feedback, apps, content]
|
||||
icon: skeleton
|
||||
tags: component
|
||||
---
|
||||
|
||||
These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations.
|
||||
@@ -140,7 +139,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
|
||||
}
|
||||
|
||||
.skeleton-avatars wa-skeleton:nth-child(2) {
|
||||
--border-radius: var(--wa-border-radius-m);
|
||||
--border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -166,7 +165,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
|
||||
}
|
||||
|
||||
.skeleton-shapes .square::part(indicator) {
|
||||
--border-radius: var(--wa-border-radius-m);
|
||||
--border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.skeleton-shapes .circle::part(indicator) {
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Spinner
|
||||
description: Spinners are used to show the progress of an indeterminate operation.
|
||||
tags: [feedback, apps]
|
||||
keywords: loader
|
||||
icon: spinner
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Split Panel
|
||||
description: Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
tags: [organization, layout, apps]
|
||||
icon: split-panel
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Switches allow the user to toggle an option on or off.
|
||||
tags: [inputs, forms]
|
||||
icon: switch
|
||||
keywords: toggle
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tab Group
|
||||
description: Tab groups organize content into a container that shows one section at a time.
|
||||
tags: [navigation, disclosure]
|
||||
icon: tab-group
|
||||
tags: component
|
||||
---
|
||||
|
||||
Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each panel should have a name that's unique within the tab group, and tabs should have a `panel` attribute that points to the respective panel's name.
|
||||
@@ -101,7 +100,7 @@ You can make a tab closable by adding a close button next to the tab and inside
|
||||
<wa-tab-group class="tabs-closable">
|
||||
<wa-tab panel="general">General</wa-tab>
|
||||
<wa-tab panel="closable">Closable</wa-tab>
|
||||
<wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
|
||||
<wa-icon-button tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
|
||||
<wa-tab panel="closable-2">Advanced</wa-tab>
|
||||
|
||||
<wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Tab Panel
|
||||
description: Tab panels are used inside tab groups to display tabbed content.
|
||||
tags: component
|
||||
parent: tab-group
|
||||
icon: tab-panel
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Tab
|
||||
description: Tabs are used inside tab groups to represent and activate tab panels.
|
||||
tags: component
|
||||
parent: tab-group
|
||||
icon: tab
|
||||
---
|
||||
|
||||
:::info
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tag
|
||||
description: Tags are used as labels to organize things or to indicate a selection.
|
||||
tags: [feedback, content, apps]
|
||||
icon: tag
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Textarea
|
||||
description: Textareas collect data from the user and allow multiple lines of text.
|
||||
tags: [inputs, forms]
|
||||
icon: textarea
|
||||
native: input
|
||||
tags: component
|
||||
natives: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -64,14 +63,6 @@ Use the `disabled` attribute to disable a textarea.
|
||||
<wa-textarea placeholder="Textarea" disabled></wa-textarea>
|
||||
```
|
||||
|
||||
### Value
|
||||
|
||||
Use the `value` attribute to set an initial value.
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea value="Write something awesome!"></wa-textarea>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a textarea's size.
|
||||
@@ -99,19 +90,3 @@ Textareas will automatically resize to expand to fit their content when `resize`
|
||||
```html {.example}
|
||||
<wa-textarea resize="auto"></wa-textarea>
|
||||
```
|
||||
|
||||
### Resize horizontal
|
||||
|
||||
Textareas can be made to resize horizontally when `resize` is set to `"horizontal"`
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea resize="horizontal"></wa-textarea>
|
||||
```
|
||||
|
||||
### Resize both
|
||||
|
||||
Textareas can be made to resize both vertically and horizontally when `resize` is set to `"both"`
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea resize="both"></wa-textarea>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tooltip
|
||||
description: Tooltips display additional information based on a specific action.
|
||||
tags: [feedback, apps, disclosure]
|
||||
icon: tooltip
|
||||
tags: component
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tree Item
|
||||
description: A tree item serves as a hierarchical node that lives inside a tree.
|
||||
tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tree
|
||||
description: Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.
|
||||
tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
45
docs/docs/components/visually-hidden.md
Normal file
45
docs/docs/components/visually-hidden.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
tags: component
|
||||
---
|
||||
|
||||
According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
|
||||
|
||||
Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
|
||||
|
||||
```html {.example}
|
||||
<div style="min-height: 1.875rem;">
|
||||
<wa-visually-hidden>
|
||||
<a href="#">Skip to main content</a>
|
||||
</wa-visually-hidden>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Links That Open in New Windows
|
||||
|
||||
In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
|
||||
|
||||
```html {.example}
|
||||
<a href="https://example.com/" target="_blank">
|
||||
Visit External Page
|
||||
<wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
|
||||
<wa-visually-hidden>opens in a new window</wa-visually-hidden>
|
||||
</a>
|
||||
```
|
||||
|
||||
### Content Conveyed By Context
|
||||
|
||||
Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="width: 100%; max-width: 360px;">
|
||||
<header>
|
||||
<wa-visually-hidden>Personal Info</wa-visually-hidden>
|
||||
</header>
|
||||
<wa-input label="Name" style="margin-bottom: .5rem;"></wa-input>
|
||||
<wa-input label="Email" type="email"></wa-input>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -167,6 +167,7 @@ layout: page
|
||||
width: 4rem;
|
||||
}
|
||||
</style>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-xs);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
|
||||
|
||||
@@ -120,9 +120,10 @@ hasOutline: false
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-border-radius-scale: 0.375;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem * 0.75);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem * 1);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 1rem * 2);
|
||||
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 1rem * 0.75);
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem * 1);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem * 2);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 1rem * 3);
|
||||
|
||||
--wa-shadow-blur-scale: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
|
||||
@@ -153,7 +154,7 @@ hasOutline: false
|
||||
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
@@ -182,7 +183,7 @@ hasOutline: false
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: 1rem;
|
||||
@@ -287,7 +288,7 @@ hasOutline: false
|
||||
|
||||
#knobs wa-radio-group[name="color"] wa-radio {
|
||||
border: 0.0625em solid var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
box-shadow: inset 0 0 0 0 transparent;
|
||||
padding: 1em;
|
||||
transition: box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
@@ -378,8 +379,12 @@ hasOutline: false
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
/** Visually hidden */
|
||||
.hidden-label::part(form-control-label) {
|
||||
/**
|
||||
<wa-visually-hidden>, but without the :not(:focus-within),
|
||||
the reason is that it shows the default browser file uploader.
|
||||
*/
|
||||
.hidden-label::part(form-control-label),
|
||||
.file-uploader input {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
@@ -414,7 +419,7 @@ hasOutline: false
|
||||
}
|
||||
|
||||
wa-radio-group[name="project-logo-selector"] wa-radio-button:last-of-type::part(button) {
|
||||
border-radius: 0 var(--wa-border-radius-m) var(--wa-border-radius-m) 0;
|
||||
border-radius: 0 var(--wa-border-radius-s) var(--wa-border-radius-s) 0;
|
||||
}
|
||||
|
||||
wa-radio-group[name="project-logo-selector"] wa-tooltip {
|
||||
@@ -442,7 +447,7 @@ hasOutline: false
|
||||
|
||||
.icon-search {
|
||||
border: solid 1px var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-m);
|
||||
}
|
||||
|
||||
@@ -517,7 +522,7 @@ hasOutline: false
|
||||
<wa-icon name="minus" library="fa-classic-regular" slot="collapse-icon"></wa-icon>
|
||||
<wa-input name="project-name" value="" placeholder="Project name" label="What are you working on?"></wa-input>
|
||||
<div>
|
||||
<label class="file-uploader wa-visually-hidden-force" style="display: block;" aria-describedby="file-uploader-description">
|
||||
<label class="file-uploader" style="display: block;" aria-describedby="file-uploader-description">
|
||||
<input name="project-logo" type="file" accept="image/*">
|
||||
Add logo
|
||||
</label>
|
||||
@@ -532,7 +537,7 @@ hasOutline: false
|
||||
<wa-button value="[choose]" appearance="plain" id="icon-chooser-trigger" class="logo-chooser">
|
||||
<wa-tooltip for="icon-chooser-trigger" distance="-3" hoist>Browse Icons</wa-tooltip>
|
||||
<wa-icon name="ellipsis" library="fa-classic-regular"></wa-icon>
|
||||
<span class="wa-visually-hidden">Browse icons</span>
|
||||
<wa-visually-hidden>Browse icons</wa-visually-hidden>
|
||||
</wa-button>
|
||||
<small slot="hint" style="display: inline-block; line-height: var(--wa-line-height-condensed);">It's dangerous to go alone. Take these!</small>
|
||||
</wa-radio-group>
|
||||
@@ -1703,7 +1708,7 @@ hasOutline: false
|
||||
overflow: hidden;
|
||||
|
||||
&:not(wa-card *) {
|
||||
border-radius: calc(var(--wa-border-radius-l) - var(--wa-panel-border-width));
|
||||
border-radius: calc(var(--wa-border-radius-m) - var(--wa-panel-border-width));
|
||||
}
|
||||
|
||||
& > img {
|
||||
@@ -2265,17 +2270,17 @@ hasOutline: false
|
||||
<table style="margin-bottom: 0;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Check all</span></wa-checkbox></th>
|
||||
<th><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Check all</wa-visually-hidden></wa-checkbox></th>
|
||||
<th>Customer</th>
|
||||
<th>Conversation</th>
|
||||
<th>Assigned To</th>
|
||||
<th style="text-align: center;">Status</th>
|
||||
<th><span class="wa-visually-hidden">Actions</span></th>
|
||||
<th><wa-visually-hidden>Actions</wa-visually-hidden></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Keanu Reeves</td>
|
||||
<td class="desc"><span style="font-weight: bold">Am I dead?</span><br><span class="excerpt">Okey dokey... free my mind. Right, no problem, free my mind, free my mind, no problem, right...</span></td>
|
||||
<td><wa-avatar image="/assets/images/themer/avatar-chad.jpg" label="Chad" style="margin-right: var(--wa-space-xs)"></wa-avatar> Chad Stahelski</td>
|
||||
@@ -2305,7 +2310,7 @@ hasOutline: false
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Lawrence Fishburne</td>
|
||||
<td class="desc"><span style="font-weight: bold">We have a rule</span><br><span class="excerpt">We never free a mind once it's reached a certain age. It's dangerous, the mind has trouble letting go.</span></td>
|
||||
<td><wa-avatar image="/assets/images/themer/avatar-char.jpg" label="Char" style="margin-right: var(--wa-space-xs)"></wa-avatar> Char McCoy</td>
|
||||
@@ -2335,7 +2340,7 @@ hasOutline: false
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)" checked><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)" checked><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Carrie-Ann Moss</td>
|
||||
<td class="desc"><span style="font-weight: bold">Was it the same cat?</span><br><span class="excerpt">A déjà vu is usually a glitch in the Matrix. It happens when they change something.</span></td>
|
||||
<td><wa-avatar initials="DE" label="Avatar with initials: DE" style="margin-right: var(--wa-space-xs)"></wa-avatar> Debbie Evans</td>
|
||||
@@ -2365,7 +2370,7 @@ hasOutline: false
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Joe Pantoliano</td>
|
||||
<td class="desc"><span style="font-weight: bold">Ignorance is bliss</span><br><span class="excerpt">Why oh why didn't I take the blue pill?</span></td>
|
||||
<td></td>
|
||||
@@ -2395,7 +2400,7 @@ hasOutline: false
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Hugo Weaving</td>
|
||||
<td class="desc"><span style="font-weight: bold">I'd like to share a revelation</span><br><span class="excerpt">I need the codes, I have to get inside Zion and you have to tell me how.</span></td>
|
||||
<td><wa-avatar image="/assets/images/themer/avatar-dara.jpg" label="Dara" style="margin-right: var(--wa-space-xs)"></wa-avatar> Dara Prescott</td>
|
||||
|
||||
@@ -8,6 +8,8 @@ Welcome to the Web Awesome alpha release for early backers! 👋
|
||||
|
||||
==This is a very early alpha release!== For this preview, we're only offering access to the free components through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up the free stuff you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
|
||||
|
||||
==To be clear, this release _only_ includes a preview the components in Web Awesome Free!==
|
||||
|
||||
Thank you so much for backing us!
|
||||
|
||||
- [Report a bug](https://github.com/shoelace-style/webawesome-alpha/issues)
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Browse Web Awesome's components and utilities for creating responsive web layouts.
|
||||
layout: page-outline
|
||||
categories: ["components", "utilities"]
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-page > main {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
}
|
||||
wa-card .component-name,
|
||||
wa-card .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
</style>
|
||||
|
||||
<p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
|
||||
|
||||
{% set allPages = collections.layout %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
@@ -1,26 +1,26 @@
|
||||
---
|
||||
title: Cluster
|
||||
description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
|
||||
tags: ["utilities", "layout"]
|
||||
layout: element
|
||||
icon: layout/cluster
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-cluster']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-cluster'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-cluster">
|
||||
<div></div>
|
||||
@@ -144,4 +144,4 @@ By default, the gap between cluster items uses `--wa-space-m` from your theme. Y
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,27 +1,25 @@
|
||||
---
|
||||
title: Flank
|
||||
description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
|
||||
tags: ["utilities", "layout"]
|
||||
layout: element
|
||||
icon: layout/flank
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-flank']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-flank'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
When space is limited, the items wrap.
|
||||
Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space. When space is limited, the items wrap.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-flank">
|
||||
@@ -173,4 +171,4 @@ By default, the gap between flank items uses `--wa-space-m` from your theme. You
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Frame
|
||||
description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
|
||||
tags: ["utilities", "layout"]
|
||||
layout: element
|
||||
icon: layout/frame
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -14,12 +12,14 @@ icon: layout/frame
|
||||
|
||||
[class*='wa-frame'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-frame" style="max-inline-size: 20rem;">
|
||||
<div></div>
|
||||
@@ -131,6 +131,7 @@ Frames have a square aspect ratio by default. You can append `:square` (1 / 1),
|
||||
## Border Radius
|
||||
|
||||
Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/style-utilities/border-radius) classes to an element with `wa-frame` to specify the border radius:
|
||||
- `wa-border-radius-xs`
|
||||
- `wa-border-radius-s`
|
||||
- `wa-border-radius-m`
|
||||
- `wa-border-radius-l`
|
||||
@@ -1,26 +1,26 @@
|
||||
---
|
||||
title: Grid
|
||||
description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
|
||||
tags: ["utilities", "layout"]
|
||||
layout: element
|
||||
icon: layout/grid
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-grid']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-grid'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div></div>
|
||||
@@ -39,35 +39,35 @@ Grids work especially well for card lists and content designed for browsing.
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Tulip</h3>
|
||||
<em>Tulipa gesneriana</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Peony</h3>
|
||||
<em>Paeonia officinalis</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Poppy</h3>
|
||||
<em>Papaver rhoeas</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Sunflower</h3>
|
||||
<em>Helianthus annuus</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Daisy</h3>
|
||||
@@ -215,4 +215,4 @@ You can add `wa-span-grid` to any grid item to allow it to span all grid columns
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
83
docs/docs/layout/index.md
Normal file
83
docs/docs/layout/index.md
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Browse Web Awesome's components and utilities for creating responsive web layouts.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-page > main {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
}
|
||||
wa-card .component-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
</style>
|
||||
|
||||
<p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
|
||||
|
||||
<div class="index-grid wa-grid wa-gap-2xl">
|
||||
<h2 class="index-category wa-span-grid">Components</h2>
|
||||
<a href="/docs/components/page">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/thumbnail-placeholder.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Page</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<h2 class="index-category wa-span-grid">Utilities</h2>
|
||||
<a href="/docs/layout/cluster">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/cluster.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Cluster</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/flank">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/flank.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Flank</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/frame">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/frame.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Frame</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/grid">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/grid.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Grid</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/split">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/split.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Split</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/stack">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/stack.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Stack</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,26 +1,26 @@
|
||||
---
|
||||
title: Split
|
||||
description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
|
||||
tags: ["utilities", "layout"]
|
||||
layout: element
|
||||
icon: layout/split
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-split']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-split'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-split">
|
||||
<div></div>
|
||||
@@ -54,7 +54,7 @@ Splits are especially helpful for navigation, header, and footer layouts.
|
||||
min-block-size: 300px;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -77,7 +77,7 @@ Splits are especially helpful for navigation, header, and footer layouts.
|
||||
min-block-size: 300px;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -156,4 +156,4 @@ A split's gap determines how close items can be before they wrap. By default, th
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,26 +1,26 @@
|
||||
---
|
||||
title: Stack
|
||||
description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
|
||||
tags: ["utilities", "layout"]
|
||||
icon: layout/stack
|
||||
layout: element
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-stack']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-stack'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use `wa-stack` to arrange elements in the block direction with even spacing.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div></div>
|
||||
@@ -110,4 +110,4 @@ By default, the gap between stack items uses `--wa-space-m` from your theme. You
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
tags: forms
|
||||
component: checkbox
|
||||
icon: checkbox
|
||||
elements:
|
||||
"<input type=checkbox>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<label><input type="checkbox"> Checkbox</label>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Checked
|
||||
|
||||
Use the `checked` attribute to activate the checkbox.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="checkbox" checked> Checked</label>
|
||||
```
|
||||
|
||||
<!--
|
||||
### Indeterminate
|
||||
|
||||
Use the `indeterminate` JS property to make the checkbox indeterminate.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="checkbox" class="indeterminate"> Indeterminate</label>
|
||||
<script>
|
||||
document.querySelector(".indeterminate").indeterminate = true;
|
||||
</script>
|
||||
```
|
||||
-->
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable the checkbox.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="checkbox" disabled> Disabled</label>
|
||||
```
|
||||
|
||||
<!--
|
||||
### Sizes
|
||||
|
||||
Use the [size utilities](/docs/utilities/size) to change a checkbox's size.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="checkbox" class="wa-size-s"> Small</label>
|
||||
<br />
|
||||
<label><input type="checkbox" class="wa-size-m"> Medium</label>
|
||||
<br />
|
||||
<label><input type="checkbox" class="wa-size-l"> Large</label>
|
||||
```
|
||||
-->
|
||||
|
||||
### Custom Validity
|
||||
|
||||
Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
|
||||
|
||||
```html {.example}
|
||||
<form class="custom-validity">
|
||||
<label><input type="checkbox"> Check me</label>
|
||||
<br />
|
||||
<button type="submit" variant="brand" style="margin-top: 1rem;">Submit</button>
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector('.custom-validity');
|
||||
const checkbox = form.querySelector('input[type=checkbox]');
|
||||
const errorMessage = `Don't forget to check me!`;
|
||||
|
||||
// Set initial validity
|
||||
checkbox.setCustomValidity(errorMessage);
|
||||
|
||||
// Update validity on change
|
||||
checkbox.addEventListener('change', () => {
|
||||
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
|
||||
});
|
||||
|
||||
// Handle submit
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Input
|
||||
description: Inputs collect data from the user.
|
||||
tags: forms
|
||||
icon: input
|
||||
component: input
|
||||
elements:
|
||||
"<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-code-demo::part(preview) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Text Fields
|
||||
|
||||
```html {.example}
|
||||
<label>Input (text) <input type="text" placeholder="placeholder"></label>
|
||||
<wa-input label="WA Input (text)" type="text" placeholder="placeholder"></wa-input>
|
||||
|
||||
<label>Input (number) <input type="number"></label>
|
||||
<wa-input label="WA Input (number)" type="number"></wa-input>
|
||||
|
||||
<label>Input (password) <input type="password" required></label>
|
||||
<wa-input label="WA Input (password)" type="password" required></wa-input>
|
||||
|
||||
<label>Input (email) <input type="email"></label>
|
||||
<wa-input label="WA Input (email)" type="email"></wa-input>
|
||||
|
||||
<label>Input (search) <input type="search"></label>
|
||||
<wa-input label="WA Input (search)" type="search"></wa-input>
|
||||
|
||||
<label>Input (tel) <input type="tel"></label>
|
||||
<wa-input label="WA Input (tel)" type="tel"></wa-input>
|
||||
|
||||
<label>Input (url) <input type="url"></label>
|
||||
<wa-input label="WA Input (url)" type="url"></wa-input>
|
||||
```
|
||||
|
||||
## Color Picker
|
||||
|
||||
Basic:
|
||||
|
||||
```html {.example}
|
||||
<label>Input (color) <input type="color" value="#ff0066"></label>
|
||||
<wa-color-picker label="WA Color Picker" value="#ff0066"></wa-color-picker>
|
||||
```
|
||||
|
||||
With swatches:
|
||||
|
||||
```html {.example}
|
||||
<label>Input (color) <input type="color" value="#ff0066" list="swatches"></label>
|
||||
<datalist id="swatches">
|
||||
<option value="#0070ef">Web Awesome Blue</option>
|
||||
<option>#f5a623</option>
|
||||
<option>#f8e71c</option>
|
||||
<option>#8b572a</option>
|
||||
<option>#7ed321</option>
|
||||
<option>#417505</option>
|
||||
<option>#bd10e0</option>
|
||||
<option>#9013fe</option>
|
||||
</datalist>
|
||||
|
||||
<wa-color-picker label="WA Color Picker" value="#ff0066"
|
||||
swatches="#0070ef; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;"></wa-color-picker>
|
||||
```
|
||||
|
||||
## Time and Date Pickers
|
||||
|
||||
```html {.example}
|
||||
<label>Input (datetime-local) <input type="datetime-local"></label>
|
||||
<wa-input label="WA Input (datetime-local)" type="datetime-local"></wa-input>
|
||||
|
||||
<label>Input (date) <input type="date"></label>
|
||||
<wa-input label="WA Input (date)" type="date"></wa-input>
|
||||
|
||||
<label>Input (time) <input type="time"></label>
|
||||
<wa-input label="WA Input (time)" type="time"></wa-input>
|
||||
```
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"layout": "element.njk",
|
||||
"tags": ["native"]
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
description: Progress bars are used to show the status of an ongoing operation.
|
||||
tags: apps
|
||||
icon: progress-bar
|
||||
status: experimental
|
||||
component: progress-bar
|
||||
elements:
|
||||
"<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
|
||||
---
|
||||
|
||||
|
||||
```html {.example}
|
||||
<progress value="40" max="100"></progress>
|
||||
```
|
||||
|
||||
Indeterminate:
|
||||
|
||||
|
||||
```html {.example}
|
||||
<progress></progress>
|
||||
```
|
||||
|
||||
### Custom Height
|
||||
|
||||
Use the `height` CSS property to set the progress bar's height.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user