kopia lustrzana https://github.com/shoelace-style/shoelace
Enrich components `@summary` with description from docs (#962)
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summarypull/984/head
Manuel Schmidt
GitHub
rodzic
70766b4e68
commit
8121faa1d4
|
|
@ -388,7 +388,7 @@
|
|||
</div>
|
||||
|
||||
<div class="component-header__summary">
|
||||
<p>${component.summary}</p>
|
||||
<p>${marked(component.summary)}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -508,10 +508,7 @@ kbd,
|
|||
|
||||
/* Component headers */
|
||||
.component-header {
|
||||
border-bottom: solid 1px var(--sl-color-neutral-200);
|
||||
padding-bottom: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.component-header__tag {
|
||||
|
|
@ -520,6 +517,13 @@ kbd,
|
|||
margin: 0.75rem 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.component-header__summary {
|
||||
font-size: var(--sl-font-size-large);
|
||||
line-height: 1.6;
|
||||
border-top: solid 1px var(--sl-color-neutral-200);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.markdown-section .component-header__tag code {
|
||||
background: none;
|
||||
color: var(--sl-color-neutral-600);
|
||||
|
|
@ -532,13 +536,6 @@ kbd,
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Lead sentences that occur immediately after the header */
|
||||
.component-header + p,
|
||||
.component-header p {
|
||||
font-size: var(--sl-font-size-large);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Repo buttons */
|
||||
.repo-button--sponsor sl-icon {
|
||||
color: var(--sl-color-pink-600);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-animated-image]
|
||||
|
||||
A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
|
||||
```html preview
|
||||
<sl-animated-image
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-animation]
|
||||
|
||||
Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
|
||||
|
||||
To animate an element, wrap it in `<sl-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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-avatar]
|
||||
|
||||
Avatars are used to represent a person or object.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-badge]
|
||||
|
||||
Badges are used to draw attention and display statuses or counts.
|
||||
|
||||
```html preview
|
||||
<sl-badge>Badge</sl-badge>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-breadcrumb-item]
|
||||
|
||||
Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
|
||||
|
||||
```html preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-breadcrumb]
|
||||
|
||||
Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-button-group]
|
||||
|
||||
Button groups can be used to group related buttons into sections.
|
||||
|
||||
```html preview
|
||||
<sl-button-group>
|
||||
<sl-button>Left</sl-button>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-button]
|
||||
|
||||
Buttons represent actions that are available to the user.
|
||||
|
||||
```html preview
|
||||
<sl-button>Button</sl-button>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-card]
|
||||
|
||||
Cards can be used to group related subjects in a container.
|
||||
|
||||
```html preview
|
||||
<sl-card class="card-overview">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-checkbox]
|
||||
|
||||
Checkboxes allow the user to toggle an option on or off.
|
||||
|
||||
```html preview
|
||||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-color-picker]
|
||||
|
||||
Color pickers allow the user to select a color.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker label="Select a color"></sl-color-picker>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
|
||||
[component-header:sl-details]
|
||||
|
||||
Details show a brief summary and expand to show additional content.
|
||||
|
||||
```html preview
|
||||
<sl-details summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
|
||||
[component-header:sl-dialog]
|
||||
|
||||
Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" class="dialog-overview">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-divider]
|
||||
|
||||
Dividers are used to visually separate or group elements.
|
||||
|
||||
```html preview
|
||||
<sl-divider></sl-divider>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
|
||||
[component-header:sl-drawer]
|
||||
|
||||
Drawers slide in from a container to expose additional options and information.
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-overview">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-dropdown]
|
||||
|
||||
Dropdowns expose additional content that "drops down" in a panel.
|
||||
|
||||
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) and [select](/components/select)). The API gives you complete control over showing, hiding, and positioning the panel.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-format-bytes]
|
||||
|
||||
Formats a number as a human readable bytes value.
|
||||
|
||||
```html preview
|
||||
<div class="format-bytes-overview">
|
||||
The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. <br /><br />
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-format-date]
|
||||
|
||||
Formats a date/time using the specified locale and options.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-format-number]
|
||||
|
||||
Formats a number using the specified locale and options.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-icon-button]
|
||||
|
||||
Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
||||
|
||||
For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-icon]
|
||||
|
||||
Icons are symbols that can be used to represent various options within an application.
|
||||
|
||||
Shoelace comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
|
||||
|
||||
?> Depending on how you're loading Shoelace, you may need to copy icon assets and/or [set the base path](getting-started/installation#setting-the-base-path) so Shoelace knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-image-comparer]
|
||||
|
||||
Compare visual differences between similar photos with a sliding panel.
|
||||
|
||||
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.)
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-include]
|
||||
|
||||
Includes give you the power to embed external HTML files into the page.
|
||||
|
||||
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.
|
||||
|
||||
The included content will be inserted into the `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-input]
|
||||
|
||||
Inputs collect data from the user.
|
||||
|
||||
```html preview
|
||||
<sl-input></sl-input>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-menu-item]
|
||||
|
||||
Menu items provide options for the user to pick from in a menu.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px;">
|
||||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-menu-label]
|
||||
|
||||
Menu labels are used to describe a group of menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px;">
|
||||
<sl-menu-label>Fruits</sl-menu-label>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-menu]
|
||||
|
||||
Menus provide a list of options for the user to choose from.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-mutation-observer]
|
||||
|
||||
The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
|
||||
|
||||
The mutation observer will report changes to the content it wraps through the `sl-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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-popup]
|
||||
|
||||
Popup is a utility that lets you declaratively anchor "popup" containers to another element.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-progress-bar]
|
||||
|
||||
Progress bars are used to show the status of an ongoing operation.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar value="50"></sl-progress-bar>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-progress-ring]
|
||||
|
||||
Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring value="25"></sl-progress-ring>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-radio-button]
|
||||
|
||||
Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-radio-group]
|
||||
|
||||
Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-radio]
|
||||
|
||||
Radios allow the user to select a single option from a group.
|
||||
|
||||
Radios are designed to be used with [radio groups](/components/radio-group).
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-range]
|
||||
|
||||
Ranges allow the user to select a single value within a given range using a slider.
|
||||
|
||||
```html preview
|
||||
<sl-range></sl-range>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-rating]
|
||||
|
||||
Ratings give users a way to quickly view and provide feedback.
|
||||
|
||||
```html preview
|
||||
<sl-rating label="Rating"></sl-rating>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-relative-time]
|
||||
|
||||
Outputs a localized time phrase relative to the current date and 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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-resize-observer]
|
||||
|
||||
The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
||||
|
||||
The resize observer will report changes to the dimensions of the elements it wraps through the `sl-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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-select]
|
||||
|
||||
Selects allow you to choose one or more items from a dropdown menu.
|
||||
|
||||
```html preview
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-skeleton]
|
||||
|
||||
Skeletons are used to show where content will eventually be drawn.
|
||||
|
||||
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.
|
||||
|
||||
Skeletons try not to be opinionated, as there are endless possibilities for designing layouts. Therefore, you'll likely use more than one skeleton to create the effect you want. If you find yourself using them frequently, consider creating a template that renders them with the desired arrangement and styles.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-spinner]
|
||||
|
||||
Spinners are used to show the progress of an indeterminate operation.
|
||||
|
||||
```html preview
|
||||
<sl-spinner></sl-spinner>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-split-panel]
|
||||
|
||||
Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
|
||||
```html preview
|
||||
<sl-split-panel>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-switch]
|
||||
|
||||
Switches allow the user to toggle an option on or off.
|
||||
|
||||
```html preview
|
||||
<sl-switch>Switch</sl-switch>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tab-group]
|
||||
|
||||
Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tab-panel]
|
||||
|
||||
Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tab]
|
||||
|
||||
Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
|
||||
|
||||
```html preview
|
||||
<sl-tab>Tab</sl-tab>
|
||||
<sl-tab active>Active</sl-tab>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tag]
|
||||
|
||||
Tags are used as labels to organize things or to indicate a selection.
|
||||
|
||||
```html preview
|
||||
<sl-tag variant="primary">Primary</sl-tag>
|
||||
<sl-tag variant="success">Success</sl-tag>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-textarea]
|
||||
|
||||
Textareas collect data from the user and allow multiple lines of text.
|
||||
|
||||
```html preview
|
||||
<sl-textarea></sl-textarea>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tooltip]
|
||||
|
||||
Tooltips display additional information based on a specific action.
|
||||
|
||||
A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
|
||||
|
||||
Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tree-item]
|
||||
|
||||
A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
|
||||
|
||||
```html preview
|
||||
<sl-tree>
|
||||
<sl-tree-item>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-tree]
|
||||
|
||||
Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
|
||||
|
||||
```html preview
|
||||
<sl-tree>
|
||||
<sl-tree-item>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
[component-header:sl-visually-hidden]
|
||||
|
||||
The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
|
||||
According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
|
||||
|
||||
Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboards user won't be able to determine where the focus indicator is without it.
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import type { CSSResultGroup } from 'lit';
|
|||
const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
|
||||
|
||||
/**
|
||||
* @title Alert
|
||||
* @summary Alerts are used to display important messages inline or as toast notifications.
|
||||
*
|
||||
* @since 2.0
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import styles from './animated-image.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { animations } from './animations';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import styles from './avatar.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Avatars are used to represent a person or object.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import styles from './badge.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Badges are used to draw attention and display statuses or counts.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import styles from './breadcrumb-item.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import styles from './button-group.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Button groups can be used to group related buttons into sections.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import styles from './button.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Buttons represent actions that are available to the user.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import styles from './card.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Cards can be used to group related subjects in a container.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import styles from './checkbox.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Checkboxes allow the user to toggle an option on or off.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ interface EyeDropperInterface {
|
|||
declare const EyeDropper: EyeDropperConstructor;
|
||||
|
||||
/**
|
||||
* @summary Color pickers allow the user to select a color.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import styles from './details.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Details show a brief summary and expand to show additional content.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import styles from './dialog.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import styles from './divider.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Dividers are used to visually separate or group elements.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ import styles from './drawer.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Drawers slide in from a container to expose additional options and information.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ import type SlPopup from '../popup/popup';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Dropdowns expose additional content that "drops down" in a panel.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import ShoelaceElement from '../../internal/shoelace-element';
|
|||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
|
||||
* @summary Formats a number as a human readable bytes value.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import ShoelaceElement from '../../internal/shoelace-element';
|
|||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
* @summary Formats a date/time using the specified locale and options.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import ShoelaceElement from '../../internal/shoelace-element';
|
|||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
* @summary Formats a number using the specified locale and options.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import styles from './icon-button.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import type { CSSResultGroup } from 'lit';
|
|||
let parser: DOMParser;
|
||||
|
||||
/**
|
||||
* @summary Icons are symbols that can be used to represent various options within an application.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import styles from './image-comparer.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Compare visual differences between similar photos with a sliding panel.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { requestInclude } from './request';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Includes give you the power to embed external HTML files into the page.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ const isChromium = navigator.userAgentData?.brands.some(b => b.brand.includes('C
|
|||
const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
|
||||
|
||||
/**
|
||||
* @summary Inputs collect data from the user.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import styles from './menu-item.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Menu items provide options for the user to pick from in a menu.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import styles from './menu-label.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Menu labels are used to describe a group of menu items.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ export interface MenuSelectEventDetail {
|
|||
}
|
||||
|
||||
/**
|
||||
* @summary Menus provide a list of options for the user to choose from.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import styles from './mutation-observer.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import styles from './popup.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import styles from './progress-bar.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Progress bars are used to show the status of an ongoing operation.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import styles from './progress-ring.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import styles from './radio-button.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import type SlRadio from '../radio/radio';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import styles from './radio.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Radios allow the user to select a single option from a group.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ import styles from './range.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Ranges allow the user to select a single value within a given range using a slider.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import styles from './rating.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Ratings give users a way to quickly view and provide feedback.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ const availableUnits: UnitConfig[] = [
|
|||
];
|
||||
|
||||
/**
|
||||
* @summary Outputs a localized time phrase relative to the current date and time.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import styles from './resize-observer.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ import type SlMenu from '../menu/menu';
|
|||
import type { TemplateResult, CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Selects allow you to choose one or more items from a dropdown menu.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import styles from './skeleton.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Skeletons are used to show where content will eventually be drawn.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import styles from './spinner.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Spinners are used to show the progress of an indeterminate operation.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import styles from './split-panel.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import styles from './switch.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Switches allow the user to toggle an option on or off.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import type SlTab from '../tab/tab';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Tab groups organize content into a container that shows one section at a time.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import styles from './tab-panel.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Ładowanie…
Reference in New Issue