mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Merge branch 'next' of https://github.com/shoelace-style/webawesome into next
This commit is contained in:
Cory LaViska
@@ -1,13 +1,13 @@
|
||||
{# Cards for pages listed by category #}
|
||||
|
||||
<section id="grid" class="index-grid">
|
||||
{% for category, pages in allPages | groupByTags(categories) -%}
|
||||
<section id="{{ category }}" class="index-grid">
|
||||
<h2 class="index-category">{{ category | capitalize }}</h2>
|
||||
<h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
|
||||
{%- for page in pages -%}
|
||||
{%- if not page.data.unlisted -%}
|
||||
{%- if not page.data.unlisted and not page.data.parent -%}
|
||||
{% include "page-card.njk" %}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</section>
|
||||
{%- endfor -%}
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<a href="{{ page.url }}">
|
||||
<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" %}
|
||||
|
||||
@@ -28,15 +28,15 @@
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
{% for component in collections.component | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.noAlpha) %}
|
||||
{% for component in collections.components | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.noAlpha) and not component.data.unlisted %}
|
||||
<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.component | sort %}
|
||||
{% for child in collections.components | sort %}
|
||||
{% if child.data.parent == component.fileSlug and not (isAlpha and child.data.noAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
|
||||
|
||||
@@ -134,7 +134,24 @@ export function sort(arr, keys = ['data.order', 'data.title']) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 = [];
|
||||
|
||||
@@ -162,3 +179,22 @@ export function groupByTags(collection, tags) {
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -321,8 +321,45 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
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 {
|
||||
@@ -331,100 +368,6 @@ 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;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Animated Image
|
||||
description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
tags: component
|
||||
tags: [imagery, niche]
|
||||
icon: animated-image
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Animation
|
||||
description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
|
||||
tags: component
|
||||
tags: [helpers, primitives]
|
||||
icon: animation
|
||||
---
|
||||
|
||||
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.
|
||||
@@ -196,4 +197,3 @@ Animations won't play until you apply the `play` attribute. You can omit it init
|
||||
animation.play = true;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Avatars are used to represent a person or object.
|
||||
tags: component
|
||||
tags: [imagery, apps, content]
|
||||
icon: avatar
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Badge
|
||||
description: Badges are used to draw attention and display statuses or counts.
|
||||
tags: component
|
||||
tags: [feedback, content]
|
||||
icon: badge
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -127,4 +128,3 @@ 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,7 +1,8 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
tags: component
|
||||
tags: [navigation]
|
||||
icon: breadcrumb
|
||||
---
|
||||
|
||||
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.
|
||||
@@ -171,4 +172,3 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
|
||||
</wa-dropdown>
|
||||
</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Button Group
|
||||
description: Button groups can be used to group related buttons into sections.
|
||||
tags: component
|
||||
tags: [actions, forms, apps]
|
||||
icon: button-group
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Button
|
||||
description: Buttons represent actions that are available to the user.
|
||||
tags: component
|
||||
tags: [actions, forms]
|
||||
native: button
|
||||
icon: button
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
tags: component
|
||||
tags: [feedback, content]
|
||||
icon: callout
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Card
|
||||
description: Cards can be used to group related subjects in a container.
|
||||
tags: component
|
||||
tags: [organization, layout]
|
||||
icon: card
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Carousel Item
|
||||
description: A carousel item represent a slide within a carousel.
|
||||
tags: component
|
||||
parent: carousel
|
||||
icon: carousel-item
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Carousel
|
||||
description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||||
tags: component
|
||||
tags: [imagery, disclosure]
|
||||
icon: carousel
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
tags: forms
|
||||
tags: [inputs, forms]
|
||||
native: checkbox
|
||||
icon: checkbox
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Color Picker
|
||||
description: Color pickers allow the user to select a color.
|
||||
tags: component
|
||||
tags: [inputs, forms]
|
||||
native: input
|
||||
icon: color-picker
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Copy Button
|
||||
description: Copies data to the clipboard when the user clicks the button.
|
||||
tags: component
|
||||
tags: [actions, apps]
|
||||
icon: copy-button
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Details
|
||||
description: Details show a brief summary and expand to show additional content.
|
||||
tags: component
|
||||
tags: [organization, apps, content, disclosure]
|
||||
icon: details
|
||||
native: details
|
||||
---
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
title: Dialog
|
||||
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
|
||||
tags: component
|
||||
tags: [organization, apps, disclosure]
|
||||
icon: dialog
|
||||
native: dialog
|
||||
keywords: modal
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers are used to visually separate or group elements.
|
||||
tags: component
|
||||
tags: [organization, content, forms]
|
||||
icon: divider
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Drawer
|
||||
description: Drawers slide in from a container to expose additional options and information.
|
||||
tags: component
|
||||
tags: [organization, disclosure]
|
||||
icon: drawer
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Dropdown
|
||||
description: 'Dropdowns expose additional content that "drops down" in a panel.'
|
||||
tags: component
|
||||
tags: [actions, apps]
|
||||
icon: dropdown
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Format Bytes
|
||||
description: Formats a number as a human readable bytes value.
|
||||
tags: component
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-bytes
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Format Date
|
||||
description: Formats a date/time using the specified locale and options.
|
||||
tags: component
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-date
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Format Number
|
||||
description: Formats a number using the specified locale and options.
|
||||
tags: component
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-number
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Icon Button
|
||||
description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
||||
tags: component
|
||||
tags: [actions, apps]
|
||||
icon: icon-button
|
||||
---
|
||||
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Icon
|
||||
description: Icons are symbols that can be used to represent various options within an application.
|
||||
tags: component
|
||||
tags: [imagery, apps, popular]
|
||||
icon: icon
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Image Comparer
|
||||
description: Compare visual differences between similar photos with a sliding panel.
|
||||
tags: component
|
||||
tags: [imagery, niche]
|
||||
icon: image-comparer
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Include
|
||||
description: Includes give you the power to embed external HTML files into the page.
|
||||
tags: component
|
||||
tags: [helpers, primitives]
|
||||
icon: include
|
||||
---
|
||||
|
||||
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,414 +1,24 @@
|
||||
---
|
||||
title: Components
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
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.
|
||||
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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
{% set allPages = collections.components %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
|
||||
<div id="component-filter-empty" hidden>
|
||||
No results
|
||||
@@ -417,7 +27,7 @@ layout: page-outline
|
||||
<script type="module">
|
||||
const container = document.getElementById('component-filter');
|
||||
const empty = document.getElementById('component-filter-empty');
|
||||
const grid = document.getElementById('component-grid');
|
||||
const grid = document.getElementById('content');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
function updateResults() {
|
||||
@@ -429,15 +39,16 @@ layout: page-outline
|
||||
});
|
||||
|
||||
// Show matching components
|
||||
grid.querySelectorAll('a').forEach(link => {
|
||||
grid.querySelectorAll('a:has(> wa-card)').forEach(link => {
|
||||
console.log(link);
|
||||
const content = link.textContent.toLowerCase();
|
||||
const keywords = link.getAttribute('data-keywords') || '';
|
||||
const isMatch = filter === '' || (content + keywords).includes(filter);
|
||||
link.classList.toggle('hidden', !isMatch);
|
||||
link.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;
|
||||
@@ -454,22 +65,8 @@ layout: page-outline
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#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 {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
#component-filter-empty {
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
title: Input
|
||||
description: Inputs collect data from the user.
|
||||
tags: component
|
||||
tags: [inputs, forms]
|
||||
icon: input
|
||||
native: input
|
||||
keywords: textfield text field
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -164,4 +166,4 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
|
||||
@@ -3,6 +3,7 @@ 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,6 +3,7 @@ title: Menu Label
|
||||
description: Menu labels are used to describe a group of menu items.
|
||||
tags: component
|
||||
parent: menu
|
||||
icon: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Menu
|
||||
description: Menus provide a list of options for the user to choose from.
|
||||
tags: component
|
||||
tags: [actions, apps]
|
||||
icon: menu
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Mutation Observer
|
||||
description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.
|
||||
tags: component
|
||||
tags: [helpers, primitives]
|
||||
icon: mutation-observer
|
||||
---
|
||||
|
||||
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,6 +3,7 @@ title: Option
|
||||
description: Options define the selectable items within various form controls such as select.
|
||||
tags: component
|
||||
parent: select
|
||||
icon: option
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Sample Documentation Page
|
||||
description: A sample page for a documentation website using Web Awesome's page component.
|
||||
layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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">
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Page
|
||||
description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
tags: ["component", "layout"]
|
||||
tags: [organization, layout]
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Popup
|
||||
description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
|
||||
tags: component
|
||||
tags: [helpers, primitives]
|
||||
icon: popup
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
description: Progress bars are used to show the status of an ongoing operation.
|
||||
tags: component
|
||||
tags: [feedback, apps]
|
||||
native: progress
|
||||
icon: progress-bar
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="40"></wa-progress-bar>
|
||||
<wa-progress-bar value="40">
|
||||
<wa-icon slot="prefix" name="tasks"></wa-icon>
|
||||
</wa-progress-bar>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -14,8 +17,6 @@ native: progress
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
|
||||
This will not be visible to sighted users.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
|
||||
```
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
---
|
||||
title: Progress Ring
|
||||
description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
tags: component
|
||||
tags: [feedback, apps]
|
||||
icon: progress-ring
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="25"></wa-progress-ring>
|
||||
<wa-progress-ring value="25">
|
||||
<wa-icon slot="prefix" name="circle-notch"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -15,7 +18,9 @@ tags: component
|
||||
Use the `--size` custom property to set the diameter of the progress ring.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--size: 200px;">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
```
|
||||
|
||||
### Track and Indicator Width
|
||||
@@ -23,7 +28,9 @@ 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-progress-ring>
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
|
||||
<wa-icon slot="prefix" name="arrows-alt"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
```
|
||||
|
||||
### Colors
|
||||
@@ -37,19 +44,13 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
||||
--track-color: pink;
|
||||
--indicator-color: deeppink;
|
||||
"
|
||||
></wa-progress-ring>
|
||||
>
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</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,7 +1,8 @@
|
||||
---
|
||||
title: QR Code
|
||||
description: Generates a QR code and renders it using the Canvas API.
|
||||
tags: component
|
||||
tags: [actions, apps, niche]
|
||||
icon: qr-code
|
||||
---
|
||||
|
||||
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.
|
||||
@@ -11,7 +12,9 @@ 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-input>
|
||||
<wa-input maxlength="255" clearable label="Value">
|
||||
<wa-icon slot="prefix" name="link"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -43,7 +46,9 @@ 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-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-qr-code>
|
||||
```
|
||||
|
||||
### Size
|
||||
@@ -51,7 +56,9 @@ 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-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" size="64">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-qr-code>
|
||||
```
|
||||
|
||||
### Radius
|
||||
@@ -59,7 +66,9 @@ 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-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5">
|
||||
<wa-icon slot="prefix" name="circle"></wa-icon>
|
||||
</wa-qr-code>
|
||||
```
|
||||
|
||||
### Error Correction
|
||||
@@ -68,10 +77,18 @@ 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-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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Radio Button
|
||||
description: Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
tags: component
|
||||
tags: forms
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Radio Group
|
||||
description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
|
||||
tags: component
|
||||
tags: [inputs, forms]
|
||||
icon: radio-group
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -4,6 +4,7 @@ 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).
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Range
|
||||
description: Ranges allow the user to select a single value within a given range using a slider.
|
||||
tags: forms
|
||||
tags: [inputs, forms]
|
||||
native: slider
|
||||
icon: range
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Rating
|
||||
description: Ratings give users a way to quickly view and provide feedback.
|
||||
tags: component
|
||||
tags: [inputs, interactive]
|
||||
icon: rating
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Relative Time
|
||||
description: Outputs a localized time phrase relative to the current date and time.
|
||||
tags: component
|
||||
tags: [helpers, inline, content]
|
||||
icon: relative-time
|
||||
---
|
||||
|
||||
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,7 +1,8 @@
|
||||
---
|
||||
title: Resize Observer
|
||||
description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.
|
||||
tags: component
|
||||
tags: [helpers, primitives]
|
||||
icon: resize-observer
|
||||
---
|
||||
|
||||
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,8 +1,9 @@
|
||||
---
|
||||
title: Select
|
||||
description: Selects allow you to choose items from a menu of predefined options.
|
||||
tags: forms
|
||||
tags: [inputs, forms]
|
||||
native: select
|
||||
icon: select
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Skeleton
|
||||
description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
|
||||
tags: component
|
||||
tags: [feedback, apps, content]
|
||||
icon: skeleton
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
title: Spinner
|
||||
description: Spinners are used to show the progress of an indeterminate operation.
|
||||
tags: component
|
||||
tags: [feedback, apps]
|
||||
keywords: loader
|
||||
icon: spinner
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Split Panel
|
||||
description: Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
tags: component
|
||||
tags: [organization, layout, apps]
|
||||
icon: split-panel
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Switches allow the user to toggle an option on or off.
|
||||
tags: component
|
||||
tags: [inputs, forms]
|
||||
icon: switch
|
||||
keywords: toggle
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tab Group
|
||||
description: Tab groups organize content into a container that shows one section at a time.
|
||||
tags: component
|
||||
tags: [navigation, disclosure]
|
||||
icon: tab-group
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@@ -3,6 +3,7 @@ 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,6 +3,7 @@ title: Tab
|
||||
description: Tabs are used inside tab groups to represent and activate tab panels.
|
||||
tags: component
|
||||
parent: tab-group
|
||||
icon: tab
|
||||
---
|
||||
|
||||
:::info
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tag
|
||||
description: Tags are used as labels to organize things or to indicate a selection.
|
||||
tags: component
|
||||
tags: [feedback, content, apps]
|
||||
icon: tag
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Textarea
|
||||
description: Textareas collect data from the user and allow multiple lines of text.
|
||||
tags: forms
|
||||
tags: [inputs, forms]
|
||||
icon: textarea
|
||||
native: input
|
||||
---
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tooltip
|
||||
description: Tooltips display additional information based on a specific action.
|
||||
tags: component
|
||||
tags: [feedback, apps, disclosure]
|
||||
icon: tooltip
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tree Item
|
||||
description: A tree item serves as a hierarchical node that lives inside a tree.
|
||||
tags: component
|
||||
tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
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: component
|
||||
tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -28,7 +28,7 @@ Use the `checked` attribute to activate the checkbox.
|
||||
Use the `indeterminate` JS property to make the checkbox indeterminate.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="checkbox" checked class="indeterminate"> Indeterminate</label>
|
||||
<label><input type="checkbox" class="indeterminate"> Indeterminate</label>
|
||||
<script>
|
||||
document.querySelector(".indeterminate").indeterminate = true;
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user