mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
remove extensions from layouts
This commit is contained in:
Cory LaViska
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Not Found
|
||||
description: Sorry, I couldn't find that.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
permalink: 404.html
|
||||
noindex: true
|
||||
---
|
||||
|
||||
@@ -8,16 +8,6 @@
|
||||
<li><a href="/docs/localization">Localization</a></li>
|
||||
</ul>
|
||||
|
||||
{# Experimental #}
|
||||
<h2>Experimental</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/experimental/themer">Theme Builder</a></li>
|
||||
<li><a href="/docs/experimental/style-guide">Style Guide</a></li>
|
||||
<li><a href="/docs/experimental/form-validation">Form Validation Styles</a></li>
|
||||
<li><a href="/docs/experimental/sandbox">Sandbox</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
{# Resources #}
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
@@ -133,9 +123,6 @@
|
||||
<li>
|
||||
<a href="/docs/components/mutation-observer">Mutation Observer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/page">Page</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/popup">Popup</a>
|
||||
</li>
|
||||
@@ -251,4 +238,4 @@
|
||||
<li>
|
||||
<a href="/docs/theming/component-groups">Component Groups</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Animated Image
|
||||
description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: 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.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Avatars are used to represent a person or object.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Breadcrumb Item
|
||||
description: Breadcrumb Items are used inside breadcrumbs to represent different links.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```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.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Button
|
||||
description: Buttons represent actions that are available to the user.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Card
|
||||
description: Cards can be used to group related subjects in a container.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Carousel Item
|
||||
description: A carousel item represent a slide within a carousel.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Color Picker
|
||||
description: Color pickers allow the user to select a color.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Copy Button
|
||||
description: Copies data to the clipboard when the user clicks the button.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Details
|
||||
description: Details show a brief summary and expand to show additional content.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers are used to visually separate or group elements.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Drawer
|
||||
description: Drawers slide in from a container to expose additional options and information.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Dropdown
|
||||
description: 'Dropdowns expose additional content that "drops down" in a panel.'
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Format Date
|
||||
description: Formats a date/time using the specified locale and options.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/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.njk
|
||||
layout: 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,7 +1,7 @@
|
||||
---
|
||||
title: Image Comparer
|
||||
description: Compare visual differences between similar photos with a sliding panel.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Menu Item
|
||||
description: Menu items provide options for the user to pick from in a menu.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Menu Label
|
||||
description: Menu labels are used to describe a group of menu items.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Menu
|
||||
description: Menus provide a list of options for the user to choose from.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/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.njk
|
||||
layout: 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,7 @@
|
||||
---
|
||||
title: Option
|
||||
description: Options define the selectable items within various form controls such as select.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Page
|
||||
description: Layouts offer an easy way to scaffold pages using minimal markup.
|
||||
layout: 'component.njk'
|
||||
layout: component
|
||||
---
|
||||
|
||||
The layout 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,7 @@
|
||||
---
|
||||
title: Popup
|
||||
description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: QR Code
|
||||
description: Generates a QR code and renders it using the Canvas API.
|
||||
layout: component.njk
|
||||
layout: 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,7 @@
|
||||
---
|
||||
title: Radio Button
|
||||
description: Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
Radio buttons are designed to be used with [radio groups](/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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Radio
|
||||
description: Radios allow the user to select a single option from a group.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
Radios are designed to be used with [radio groups](/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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Rating
|
||||
description: Ratings give users a way to quickly view and provide feedback.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Relative Time
|
||||
description: Outputs a localized time phrase relative to the current date and time.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Switches allow the user to toggle an option on or off.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tab Panel
|
||||
description: Tab panels are used inside tab groups to display tabbed content.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tab
|
||||
description: Tabs are used inside tab groups to represent and activate tab panels.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
:::info
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tag
|
||||
description: Tags are used as labels to organize things or to indicate a selection.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Textarea
|
||||
description: Textareas collect data from the user and allow multiple lines of text.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tooltip
|
||||
description: Tooltips display additional information based on a specific action.
|
||||
layout: component.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tree Item
|
||||
description: A tree item serves as a hierarchical node that lives inside a tree.
|
||||
layout: component.njk
|
||||
layout: 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.njk
|
||||
layout: component
|
||||
---
|
||||
|
||||
```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.njk
|
||||
layout: 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."
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Customizing
|
||||
description: Learn how to customize Web Awesome through parts and custom properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Web Awesome components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Form Control Validation
|
||||
description: TODO
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Theming Sandbox
|
||||
description: TODO
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
## Card
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Style Guide
|
||||
description: TODO
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
The styles shown below can be all yours by adding Web Awesome's applied stylesheet to your project.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
meta:
|
||||
title: Themer
|
||||
layout: page.njk
|
||||
layout: page
|
||||
hasOutline: false
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Installation
|
||||
description: Choose the installation method that works best for you.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
You can load Web Awesome via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Localization
|
||||
description: Discover how to localize Web Awesome with minimal effort.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `<html>` element. Here's an example that renders Web Awesome components in Spanish.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: E-commerce
|
||||
description: TODO
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Accessibility Commitment
|
||||
description: Web Awesome recognizes the need for all users to have undeterred access to the websites and applications that are created with it.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Web Awesome recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Community
|
||||
description: Web Awesome has a growing community of designers and developers that are building amazing things with web components.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Web Awesome has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Contributing
|
||||
description: Web Awesome is an open source project, meaning everyone can use it and contribute to its development.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Web Awesome is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Web Awesome.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Themes
|
||||
description: Everything you need to know about theming Web Awesome.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Web Awesome is designed to be highly customizable through pure CSS. Out of the box, the default theme includes both light and dark styles. Alternatively, you can design your own theme.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Borders
|
||||
description: Change the edges and corners of your components with Web Awesome's border properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
## Style
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Color
|
||||
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Component Groups
|
||||
description: Style groups of components that share similar qualities with these Web Awesome custom properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Focus
|
||||
description: Configure recognizable focus states with Web Awesome's focus properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Shadows
|
||||
description: Elevate your components with Web Awesome's shadow properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Space
|
||||
description: Lock down consistent spacing Web Awesome's space properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Transitions
|
||||
description: Customize your theme's built-in transitions with Web Awesome's transition properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Typography
|
||||
description: Get consistent font styles and vertical rhythm with Web Awesome's typography properties.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
## Font Family
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Usage
|
||||
description: Learn more about using custom elements.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
Web Awesome components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Web Awesome
|
||||
description: Build better with Web Awesome, the open source library of web components from Font Awesome.
|
||||
layout: page.njk
|
||||
layout: page
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user