mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
fix relative links
This commit is contained in:
@@ -16,5 +16,5 @@ layout: component
|
||||
```
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
|
||||
Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
|
||||
:::
|
||||
|
||||
@@ -135,7 +135,7 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<wa-b
|
||||
|
||||
### Split Buttons
|
||||
|
||||
Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
|
||||
Create a split button using a button and a dropdown. Use a [visually hidden](/docs/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Example Button Group">
|
||||
|
||||
@@ -40,5 +40,5 @@ layout: component
|
||||
```
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [carousel examples](/components/carousel).
|
||||
Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
|
||||
:::
|
||||
|
||||
@@ -25,7 +25,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t
|
||||
|
||||
### Custom Icons
|
||||
|
||||
Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [`<wa-icon>`](/components/icon) or your own images.
|
||||
Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [`<wa-icon>`](/docs/components/icon) or your own images.
|
||||
|
||||
```html {.example}
|
||||
<wa-copy-button value="Copied from a custom button">
|
||||
|
||||
@@ -127,7 +127,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
|
||||
|
||||
### Header Actions
|
||||
|
||||
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
|
||||
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
|
||||
|
||||
```html {.example}
|
||||
<wa-dialog label="Dialog" with-header with-footer class="dialog-header-actions">
|
||||
|
||||
@@ -54,7 +54,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
|
||||
|
||||
### Menu Dividers
|
||||
|
||||
Use dividers in [menus](/components/menu) to visually group menu items.
|
||||
Use dividers in [menus](/docs/components/menu) to visually group menu items.
|
||||
|
||||
```html {.example}
|
||||
<wa-menu style="max-width: 200px;">
|
||||
|
||||
@@ -187,7 +187,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
|
||||
|
||||
### Header Actions
|
||||
|
||||
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
|
||||
The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed.
|
||||
|
||||
```html {.example}
|
||||
<wa-drawer label="Drawer" with-header with-footer class="drawer-header-actions">
|
||||
|
||||
@@ -6,7 +6,7 @@ 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.
|
||||
|
||||
Dropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
|
||||
Dropdowns are designed to work well with [menus](/docs/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/docs/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
|
||||
|
||||
```html {.example}
|
||||
<wa-dropdown>
|
||||
@@ -35,7 +35,7 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
|
||||
|
||||
### Getting the Selected Item
|
||||
|
||||
When dropdowns are used with [menus](/components/menu), you can listen for the [`wa-select`](/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
|
||||
When dropdowns are used with [menus](/docs/components/menu), you can listen for the [`wa-select`](/docs/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
|
||||
|
||||
```html {.example}
|
||||
<div class="dropdown-selection">
|
||||
@@ -142,7 +142,7 @@ The offset of the panel along the trigger can be customized using the `skidding`
|
||||
|
||||
### Submenus
|
||||
|
||||
To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/components/menu-item).
|
||||
To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/docs/components/menu-item).
|
||||
|
||||
```html {.example}
|
||||
<wa-dropdown>
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Icons buttons are simple, icon-only buttons that can be used for ac
|
||||
layout: component
|
||||
---
|
||||
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/components/icon).
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
|
||||
|
||||
```html {.example}
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Menus provide a list of options for the user to choose from.
|
||||
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.
|
||||
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.
|
||||
|
||||
```html {.example}
|
||||
<wa-menu style="max-width: 200px;">
|
||||
@@ -26,7 +26,7 @@ Menus are intended for system menus (dropdown menus, select menus, context menus
|
||||
|
||||
### In Dropdowns
|
||||
|
||||
Menus work really well when used inside [dropdowns](/components/dropdown).
|
||||
Menus work really well when used inside [dropdowns](/docs/components/dropdown).
|
||||
|
||||
```html {.example}
|
||||
<wa-dropdown>
|
||||
@@ -41,7 +41,7 @@ Menus work really well when used inside [dropdowns](/components/dropdown).
|
||||
|
||||
### Submenus
|
||||
|
||||
To create a submenu, nest an `<wa-menu slot="submenu">` in any [menu item](/components/menu-item).
|
||||
To create a submenu, nest an `<wa-menu slot="submenu">` in any [menu item](/docs/components/menu-item).
|
||||
|
||||
```html {.example}
|
||||
<wa-menu style="max-width: 200px;">
|
||||
|
||||
@@ -9,7 +9,7 @@ This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdg
|
||||
Popup doesn't provide any styles — just positioning! The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.
|
||||
|
||||
:::warning
|
||||
Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a [tooltip](/components/tooltip) or similar because _it does not facilitate an accessible experience!_ Almost every correct usage of `<wa-popup>` will involve building other components. It should rarely, if ever, occur directly in your HTML.
|
||||
Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a [tooltip](/docs/components/tooltip) or similar because _it does not facilitate an accessible experience!_ Almost every correct usage of `<wa-popup>` will involve building other components. It should rarely, if ever, occur directly in your HTML.
|
||||
:::
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Radios buttons allow the user to select a single option from a grou
|
||||
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.
|
||||
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.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
|
||||
@@ -28,7 +28,7 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h
|
||||
|
||||
### Radio Buttons
|
||||
|
||||
[Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control.
|
||||
[Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
|
||||
@@ -52,7 +52,7 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
|
||||
|
||||
### Sizing Options
|
||||
|
||||
The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
|
||||
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
|
||||
|
||||
```html preview
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
|
||||
@@ -71,7 +71,7 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu
|
||||
```
|
||||
|
||||
:::info
|
||||
[Radios](/components/radio) and [Radio Buttons](/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
|
||||
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
|
||||
:::
|
||||
|
||||
### Validation
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Radios allow the user to select a single option from a group.
|
||||
layout: component
|
||||
---
|
||||
|
||||
Radios are designed to be used with [radio groups](/components/radio-group).
|
||||
Radios are designed to be used with [radio groups](/docs/components/radio-group).
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
@@ -46,7 +46,7 @@ Use the `disabled` attribute to disable a radio.
|
||||
|
||||
## Sizes
|
||||
|
||||
Add the `size` attribute to the [Radio Group](/components/radio-group) to change the radios' size.
|
||||
Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" value="1">
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Tab groups organize content into a container that shows one section
|
||||
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.
|
||||
Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/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.
|
||||
|
||||
```html {.example}
|
||||
<wa-tab-group>
|
||||
|
||||
@@ -19,5 +19,5 @@ layout: component
|
||||
```
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
||||
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
|
||||
:::
|
||||
|
||||
@@ -5,5 +5,5 @@ layout: component
|
||||
---
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
||||
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
|
||||
:::
|
||||
Reference in New Issue
Block a user