mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Automate component navigation
This commit is contained in:
Lea Verou
@@ -51,6 +51,15 @@ export default function (eleventyConfig) {
|
||||
return firstArg;
|
||||
});
|
||||
|
||||
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(/^\//, '');
|
||||
|
||||
@@ -25,207 +25,27 @@
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
{% for component in collections.component | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.isAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/animated-image">Animated Image</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/animation">Animation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/avatar">Avatar</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/badge">Badge</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/breadcrumb">Breadcrumb</a>
|
||||
<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>
|
||||
<li>
|
||||
<a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
|
||||
</li>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/button">Button</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/button-group">Button Group</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/callout">Callout</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/card">Card</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/carousel">Carousel</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/carousel-item">Carousel Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/checkbox">Checkbox</a>
|
||||
</li>
|
||||
{% if not isAlpha %}
|
||||
<li>
|
||||
<a href="/docs/components/code-demo">Code Demo</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<a href="/docs/components/color-picker">Color Picker</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/copy-button">Copy Button</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/details">Details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/dialog">Dialog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/divider">Divider</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/drawer">Drawer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/dropdown">Dropdown</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/format-bytes">Format Bytes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/format-date">Format Date</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/format-number">Format Number</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/icon">Icon</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/icon-button">Icon Button</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/image-comparer">Image Comparer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/include">Include</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/input">Input</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/menu">Menu</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/menu-item">Menu Item</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/menu-label">Menu Label</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/mutation-observer">Mutation Observer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/page">Page</a>
|
||||
<wa-icon name="flask"></wa-icon>
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/popup">Popup</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/progress-bar">Progress Bar</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/progress-ring">Progress Ring</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/qr-code">QR Code</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/radio-group">Radio Group</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/radio">Radio</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/radio-button">Radio Button</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/range">Range</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/rating">Rating</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/relative-time">Relative Time</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/resize-observer">Resize Observer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/select">Select</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/option">Option</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/skeleton">Skeleton</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/spinner">Spinner</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/split-panel">Split Panel</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/switch">Switch</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/tab-group">Tab Group</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/tab">Tab</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/tab-panel">Tab Panel</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/tag">Tag</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/textarea">Textarea</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/tooltip">Tooltip</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/tree">Tree</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/tree-item">Tree Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{% if not isAlpha %}
|
||||
<li>
|
||||
<a href="/docs/components/viewport-demo">Viewport Demo</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Layout #}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Animated Image
|
||||
description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Animation
|
||||
description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
|
||||
layout: component
|
||||
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.
|
||||
@@ -196,4 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
|
||||
animation.play = true;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Avatars are used to represent a person or object.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Badge
|
||||
description: Badges are used to draw attention and display statuses or counts.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Breadcrumb Item
|
||||
description: Breadcrumb Items are used inside breadcrumbs to represent different links.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: breadcrumb
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
layout: component
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Button Group
|
||||
description: Button groups can be used to group related buttons into sections.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Button
|
||||
description: Buttons represent actions that are available to the user.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Card
|
||||
description: Cards can be used to group related subjects in a container.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Carousel Item
|
||||
description: A carousel item represent a slide within a carousel.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: carousel
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Carousel
|
||||
description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Code Demo
|
||||
description: Code demos can be used to render code examples as inline live demos.
|
||||
layout: component
|
||||
tags: component
|
||||
noAlpha: true
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Color Picker
|
||||
description: Color pickers allow the user to select a color.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
3
docs/docs/components/components.json
Normal file
3
docs/docs/components/components.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"layout": "component.njk"
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Copy Button
|
||||
description: Copies data to the clipboard when the user clicks the button.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Details
|
||||
description: Details show a brief summary and expand to show additional content.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Dialog
|
||||
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
@@ -219,4 +219,4 @@ To give focus to a specific element when the dialog opens, use the `autofocus` a
|
||||
|
||||
openButton.addEventListener('click', () => dialog.open = true);
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers are used to visually separate or group elements.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Drawer
|
||||
description: Drawers slide in from a container to expose additional options and information.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Dropdown
|
||||
description: 'Dropdowns expose additional content that "drops down" in a panel.'
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Format Bytes
|
||||
description: Formats a number as a human readable bytes value.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Format Date
|
||||
description: Formats a date/time using the specified locale and options.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Format Number
|
||||
description: Formats a number using the specified locale and options.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Icon Button
|
||||
description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Icon
|
||||
description: Icons are symbols that can be used to represent various options within an application.
|
||||
layout: component
|
||||
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).
|
||||
@@ -146,7 +146,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/tw
|
||||
resolver: (name, family) => {
|
||||
const suffix = family === 'filled' ? '-fill' : '';
|
||||
return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
@@ -517,7 +517,7 @@ For example, this will change the default icon library to use [Bootstrap Icons](
|
||||
resolver: (name, family) => {
|
||||
const suffix = family === 'filled' ? '-fill' : '';
|
||||
return `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}${suffix}.svg`
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Image Comparer
|
||||
description: Compare visual differences between similar photos with a sliding panel.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Include
|
||||
description: Includes give you the power to embed external HTML files into the page.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Input
|
||||
description: Inputs collect data from the user.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Menu Item
|
||||
description: Menu items provide options for the user to pick from in a menu.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Menu Label
|
||||
description: Menu labels are used to describe a group of menu items.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Menu
|
||||
description: Menus provide a list of options for the user to choose from.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Mutation Observer
|
||||
description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.
|
||||
layout: component
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Option
|
||||
description: Options define the selectable items within various form controls such as select.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: select
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Page
|
||||
description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
layout: component
|
||||
tags: component
|
||||
isPro: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Popup
|
||||
description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
|
||||
layout: component
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
description: Progress bars are used to show the status of an ongoing operation.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Progress Ring
|
||||
description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: QR Code
|
||||
description: Generates a QR code and renders it using the Canvas API.
|
||||
layout: component
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Radio Button
|
||||
description: Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: 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,7 @@
|
||||
---
|
||||
title: Radio Group
|
||||
description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Radio
|
||||
description: Radios allow the user to select a single option from a group.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: radio-group
|
||||
---
|
||||
|
||||
Radios are designed to be used with [radio groups](/docs/components/radio-group).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Range
|
||||
description: Ranges allow the user to select a single value within a given range using a slider.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Rating
|
||||
description: Ratings give users a way to quickly view and provide feedback.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -138,4 +138,4 @@ You can also use the `getSymbol` property to render different icons based on val
|
||||
return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
|
||||
};
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Relative Time
|
||||
description: Outputs a localized time phrase relative to the current date and time.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Resize Observer
|
||||
description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.
|
||||
layout: component
|
||||
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,7 +1,7 @@
|
||||
---
|
||||
title: Select
|
||||
description: Selects allow you to choose items from a menu of predefined options.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Skeleton
|
||||
description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
|
||||
layout: component
|
||||
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.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Spinner
|
||||
description: Spinners are used to show the progress of an indeterminate operation.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Split Panel
|
||||
description: Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Switches allow the user to toggle an option on or off.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tab Group
|
||||
description: Tab groups organize content into a container that shows one section at a time.
|
||||
layout: component
|
||||
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.
|
||||
@@ -125,7 +125,7 @@ You can make a tab closable by adding a close button next to the tab and inside
|
||||
const closableTab = tabGroup.querySelectorAll('wa-tab')[1];
|
||||
const closeButton = tabGroup.querySelector('wa-icon-button');
|
||||
const restoreButton = tabGroup.nextElementSibling.nextElementSibling;
|
||||
|
||||
|
||||
// Remove the tab when the close button is clicked
|
||||
closeButton.addEventListener('click', () => {
|
||||
closableTab.remove();
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tab Panel
|
||||
description: Tab panels are used inside tab groups to display tabbed content.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: tab-group
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Tab
|
||||
description: Tabs are used inside tab groups to represent and activate tab panels.
|
||||
layout: component
|
||||
tags: component
|
||||
parent: tab-group
|
||||
---
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
|
||||
:::
|
||||
:::
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tag
|
||||
description: Tags are used as labels to organize things or to indicate a selection.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Textarea
|
||||
description: Textareas collect data from the user and allow multiple lines of text.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tooltip
|
||||
description: Tooltips display additional information based on a specific action.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
|
||||
@@ -172,4 +172,4 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
|
||||
padding: var(--wa-space-m);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tree Item
|
||||
description: A tree item serves as a hierarchical node that lives inside a tree.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +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.
|
||||
layout: component
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -255,4 +255,4 @@ Decorative icons can be used before labels to provide hints for each node.
|
||||
</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
</wa-tree>
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Viewport Demo
|
||||
description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
|
||||
layout: component
|
||||
tags: component
|
||||
noAlpha: true
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
layout: component
|
||||
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."
|
||||
|
||||
Reference in New Issue
Block a user