mirror of
https://github.com/shoelace-style/shoelace.git
synced 2026-01-12 11:09:13 +00:00
Update docs
This commit is contained in:
Cory LaViska
@@ -105,3 +105,7 @@ Boolean props should _always_ default to `false`, otherwise there's no way for t
|
||||
The Shoelace _source_ is developed using Sass for the convenience of nested selectors, imports, and tedious things such as color palette generation. By design, Sass variables, color functions, and other preprocessor-specific feaures are not used in the source and will not be accepted in a PR.
|
||||
|
||||
Consumers of the library should never need to worry about preprocessing the library.
|
||||
|
||||
### Positioning Popovers
|
||||
|
||||
Shoelace uses an internal popover utility for dropdowns, tooltips, etc. This is a light abstraction of Popper.js designed to make positioning and transitioning things easy and consistent throughout the library. When possible, use this utility instead of relying on Popper directly. See `src/utilities/popover.ts` for details.
|
||||
|
||||
@@ -12,38 +12,28 @@ Color pickers allow the user to select a color.
|
||||
|
||||
### Opacity
|
||||
|
||||
Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on `format`.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker opacity></sl-color-picker>
|
||||
```
|
||||
|
||||
### RGB
|
||||
### Formats
|
||||
|
||||
Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, and `hsl`. Note that the color picker will accept any parsable format (including CSS color names) regardless of this option.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker format="rgb"></sl-color-picker>
|
||||
```
|
||||
|
||||
### RGBA
|
||||
|
||||
```html preview
|
||||
<sl-color-picker format="rgb" opacity></sl-color-picker>
|
||||
```
|
||||
|
||||
### HSL
|
||||
|
||||
```html preview
|
||||
<sl-color-picker format="hsl"></sl-color-picker>
|
||||
```
|
||||
|
||||
### HSLA
|
||||
|
||||
```html preview
|
||||
<sl-color-picker format="hsl" opacity></sl-color-picker>
|
||||
<sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>
|
||||
<sl-color-picker format="rgb" value="rgb(80, 227, 194)"></sl-color-picker>
|
||||
<sl-color-picker format="hsl" value="hsl(90, 69%, 72%)"></sl-color-picker>
|
||||
```
|
||||
|
||||
### Inline
|
||||
|
||||
The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker opacity inline></sl-color-picker>
|
||||
<sl-color-picker inline></sl-color-picker>
|
||||
```
|
||||
|
||||
[component-metadata:sl-color-picker]
|
||||
|
||||
@@ -15,6 +15,8 @@ Details show a brief summary and expand to show additional content.
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disable` attribute to prevent the details from expanding.
|
||||
|
||||
```html preview
|
||||
<sl-details summary="Disabled" disabled>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
@@ -55,7 +57,7 @@ Details are designed to function independently, but you can simulate a group or
|
||||
|
||||
<style>
|
||||
.details-group-example sl-details:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: var(--sl-spacing-xx-small);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -32,6 +32,30 @@ Dialogs appear above the page and require the user's immediate attention.
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Width
|
||||
|
||||
Use the `--width` custom property to set the dialog's width.
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-dialog>
|
||||
|
||||
<sl-button>Open Dialog</sl-button>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const dialog = document.querySelector('.dialog-width');
|
||||
const openButton = dialog.nextElementSibling;
|
||||
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
|
||||
|
||||
openButton.addEventListener('click', () => dialog.show());
|
||||
closeButton.addEventListener('click', () => dialog.hide());
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
### Scrolling
|
||||
|
||||
By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
|
||||
@@ -58,7 +82,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
|
||||
</script>
|
||||
```
|
||||
|
||||
### Ignore Overlay Clicks
|
||||
### Ignoring Clicks on the Overlay
|
||||
|
||||
By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `slOverlayDismiss` event.
|
||||
|
||||
|
||||
@@ -28,6 +28,8 @@ Drawers slide out from a container to expose additional options and information.
|
||||
|
||||
### Placement
|
||||
|
||||
Drawers slide out from the right by default. To slide them out from the left, use the `placement` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" placement="left" class="drawer-placement">
|
||||
This drawer slides in from the left.
|
||||
@@ -48,7 +50,7 @@ Drawers slide out from a container to expose additional options and information.
|
||||
</script>
|
||||
```
|
||||
|
||||
### Contained
|
||||
### Contained to an Element
|
||||
|
||||
By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
|
||||
|
||||
@@ -78,6 +80,30 @@ By default, the drawer slides out of its [containing block](https://developer.mo
|
||||
</script>
|
||||
```
|
||||
|
||||
### Custom Width
|
||||
|
||||
Use the `--width` custom property to set the drawer's width.
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-custom-width" style="--width: 50vw;">
|
||||
This drawer is always 50% of the viewport.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-drawer>
|
||||
|
||||
<sl-button>Open Drawer</sl-button>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const drawer = document.querySelector('.drawer-custom-width');
|
||||
const openButton = drawer.nextElementSibling;
|
||||
const closeButton = drawer.querySelector('sl-button[type="primary"]');
|
||||
|
||||
openButton.addEventListener('click', () => drawer.show());
|
||||
closeButton.addEventListener('click', () => drawer.hide());
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
### Scrolling
|
||||
|
||||
By design, a drawer's height is 100% of its container and will never exceed that of the viewport. As such, drawers will not scroll with the page ensuring the header and footer are always accessible to the user.
|
||||
@@ -104,70 +130,7 @@ By design, a drawer's height is 100% of its container and will never exceed that
|
||||
</script>
|
||||
```
|
||||
|
||||
### Custom Width
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-custom-width" style="--width: 50vw;">
|
||||
This drawer is always 50% of the viewport.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-drawer>
|
||||
|
||||
<sl-button>Open Drawer</sl-button>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const drawer = document.querySelector('.drawer-custom-width');
|
||||
const openButton = drawer.nextElementSibling;
|
||||
const closeButton = drawer.querySelector('sl-button[type="primary"]');
|
||||
|
||||
openButton.addEventListener('click', () => drawer.show());
|
||||
closeButton.addEventListener('click', () => drawer.hide());
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
### No Header
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" no-header class="drawer-no-header">
|
||||
This drawer doesn't have a header.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-drawer>
|
||||
|
||||
<sl-button>Open Drawer</sl-button>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const drawer = document.querySelector('.drawer-no-header');
|
||||
const openButton = drawer.nextElementSibling;
|
||||
const closeButton = drawer.querySelector('sl-button[type="primary"]');
|
||||
|
||||
openButton.addEventListener('click', () => drawer.show());
|
||||
closeButton.addEventListener('click', () => drawer.hide());
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
### No Footer
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" no-footer class="drawer-no-footer">
|
||||
This drawer doesn't have a footer.
|
||||
</sl-drawer>
|
||||
|
||||
<sl-button>Open Drawer</sl-button>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const drawer = document.querySelector('.drawer-no-footer');
|
||||
const openButton = drawer.nextElementSibling;
|
||||
|
||||
openButton.addEventListener('click', () => drawer.show());
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
### Ignore Overlay Clicks
|
||||
### Ignoring Clicks on the Overlay
|
||||
|
||||
By default, drawers are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `slOverlayDismiss` event.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
Dropdowns expose additional content that "drops down" in a panel.
|
||||
|
||||
Dropdowns consist of a trigger and a panel. Activating the trigger will open the panel and interacting outside of the panel will close it.
|
||||
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.md) 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.md) and [select](/components/select.md)). The API gives you complete control over showing, hiding, and positioning the panel.
|
||||
|
||||
@@ -35,6 +35,8 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
|
||||
|
||||
### Placement
|
||||
|
||||
The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
|
||||
|
||||
```html preview
|
||||
<sl-dropdown placement="top-start">
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
@@ -51,6 +53,8 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
|
||||
|
||||
### Distance
|
||||
|
||||
The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
|
||||
|
||||
```html preview
|
||||
<sl-dropdown distance="30">
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
@@ -67,6 +71,8 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
|
||||
|
||||
### Skidding
|
||||
|
||||
The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
|
||||
|
||||
```html preview
|
||||
<sl-dropdown skidding="30">
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
@@ -81,34 +87,4 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
### Scrolling Content
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Scrolling Menu</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Item 1</sl-menu-item>
|
||||
<sl-menu-item>Item 2</sl-menu-item>
|
||||
<sl-menu-item>Item 3</sl-menu-item>
|
||||
<sl-menu-item>Item 4</sl-menu-item>
|
||||
<sl-menu-item>Item 5</sl-menu-item>
|
||||
<sl-menu-item>Item 6</sl-menu-item>
|
||||
<sl-menu-item>Item 7</sl-menu-item>
|
||||
<sl-menu-item>Item 8</sl-menu-item>
|
||||
<sl-menu-item>Item 9</sl-menu-item>
|
||||
<sl-menu-item>Item 10</sl-menu-item>
|
||||
<sl-menu-item>Item 11</sl-menu-item>
|
||||
<sl-menu-item>Item 12</sl-menu-item>
|
||||
<sl-menu-item>Item 13</sl-menu-item>
|
||||
<sl-menu-item>Item 14</sl-menu-item>
|
||||
<sl-menu-item>Item 15</sl-menu-item>
|
||||
<sl-menu-item>Item 16</sl-menu-item>
|
||||
<sl-menu-item>Item 17</sl-menu-item>
|
||||
<sl-menu-item>Item 18</sl-menu-item>
|
||||
<sl-menu-item>Item 19</sl-menu-item>
|
||||
<sl-menu-item>Item 20</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
[component-metadata:sl-dropdown]
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
|
||||
Forms collect data that can easily be processed and sent to a server.
|
||||
|
||||
All of Shoelace's components make use of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, style, and behavior. One caveat of this approach is that native `<form>` elements don't recognize Shoelace form controls. This component solves that problem by serializing _both_ Shoelace form controls and native form controls.
|
||||
All of Shoelace's components make use of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, style, and behavior. One caveat of this approach is that native `<form>` elements don't recognize Shoelace form controls.
|
||||
|
||||
This component solves that problem by serializing _both_ Shoelace form controls and native form controls. The resulting form data is exposed in the `slSubmit` event in a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object.
|
||||
|
||||
```html preview
|
||||
<sl-form class="form-overview">
|
||||
@@ -28,21 +30,21 @@ All of Shoelace's components make use of the [shadow DOM](https://developer.mozi
|
||||
|
||||
form.addEventListener('slSubmit', event => {
|
||||
const formData = event.detail.formData;
|
||||
const formControls = event.detail.formControls;
|
||||
let output = '';
|
||||
|
||||
// do something with the form data...
|
||||
// Do something with the form data
|
||||
for (const entry of formData.entries()) {
|
||||
output += `${entry[0]}: ${entry[1]}\n`;
|
||||
}
|
||||
alert(output);
|
||||
|
||||
// ...or do something with the raw form controls
|
||||
console.log(formControls);
|
||||
// Tip: you can also access every form control that was serialized, which
|
||||
// is useful for validation purposes.
|
||||
console.log(event.detail.formControls);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
?> Shoelace forms don't make use of `action` and `method` attributes, and they don't submit automatically like native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example above.
|
||||
?> Shoelace forms don't make use of `action` and `method` attributes and they don't submit automatically like native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example above.
|
||||
|
||||
[component-metadata:sl-form]
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Inputs collect data from the user.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Input"></sl-input>
|
||||
<sl-input type="text"></sl-input>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
@@ -14,14 +14,26 @@ Inputs collect data from the user.
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the input an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" label="Name"></sl-input>
|
||||
<br>
|
||||
<sl-input type="email" label="Email" placeholder="bob@example.com"></sl-input>
|
||||
```
|
||||
|
||||
### Placeholder
|
||||
|
||||
Use the `placeholder` attribute to add a placeholder.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Type something"></sl-input>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` attribute to change an input's size.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Small" size="small"></sl-input>
|
||||
<br>
|
||||
@@ -32,6 +44,8 @@ Inputs collect data from the user.
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` prop to give inputs rounded edges.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Small" size="small" pill></sl-input>
|
||||
<br>
|
||||
@@ -42,6 +56,8 @@ Inputs collect data from the user.
|
||||
|
||||
### Prefix & Suffix Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Small" size="small">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
@@ -61,6 +77,8 @@ Inputs collect data from the user.
|
||||
|
||||
### Clearable
|
||||
|
||||
Add the `clearable` prop to add a clear button when the input has content.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>
|
||||
<br>
|
||||
@@ -71,6 +89,8 @@ Inputs collect data from the user.
|
||||
|
||||
### Toggle Password
|
||||
|
||||
Add the `toggle-password` prop to add a toggle button that will show the password when activated.
|
||||
|
||||
```html preview
|
||||
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
|
||||
<br>
|
||||
@@ -81,6 +101,8 @@ Inputs collect data from the user.
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable an input.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>
|
||||
<br>
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
|
||||
Menus provide a list of options for the user.
|
||||
|
||||
Use [menu items](/components/menu-item.md), [menu dividers](/components/menu-divider.md), and [menu labels](/components/menu-label.md) to compose a menu.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
|
||||
@@ -5,23 +5,48 @@
|
||||
Progress bars are used to show the progress of a determinate operation.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="0"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="25"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="50"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="75"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100"></sl-progress-bar>
|
||||
<sl-progress-bar percentage="50"></sl-progress-bar>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Height & Label
|
||||
### Custom Height
|
||||
|
||||
Use the `--height` custom property to set the progress bar's height.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="0" height="18">0%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="25" height="18">25%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="50" height="18">50%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100" height="18">100%</sl-progress-bar>
|
||||
<sl-progress-bar percentage="50" style="--height: 6px;"></sl-progress-bar>
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the default slot to show a label.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="50" class="progress-bar-labels">50%</sl-progress-bar>
|
||||
|
||||
<br>
|
||||
|
||||
<sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
|
||||
<sl-button circle><sl-icon name="plus"></sl-icon></sl-button>
|
||||
|
||||
<script>
|
||||
const progressBar = document.querySelector('.progress-bar-labels');
|
||||
const subtractButton = progressBar.nextElementSibling.nextElementSibling;
|
||||
const addButton = subtractButton.nextElementSibling;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const percentage = Math.min(100, progressBar.percentage + 10);
|
||||
progressBar.percentage = percentage;
|
||||
progressBar.textContent = `${percentage}%`;
|
||||
});
|
||||
|
||||
subtractButton.addEventListener('click', () => {
|
||||
const percentage = Math.max(0, progressBar.percentage - 10)
|
||||
progressBar.percentage = percentage;
|
||||
progressBar.textContent = `${percentage}%`;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-bar]
|
||||
|
||||
@@ -5,25 +5,56 @@
|
||||
Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
|
||||
```html preview
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
<sl-progress-ring percentage="0">0%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage="25">25%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage="50">50%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage="75">75%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage="100">100%</sl-progress-ring>
|
||||
</div>
|
||||
<sl-progress-ring percentage="50"></sl-progress-ring><br>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` attribute to set the diameter of the progress ring.
|
||||
|
||||
```html preview
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
<sl-progress-ring percentage="50" size="100">50%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage="50" size="150">50%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage="50" size="200">50%</sl-progress-ring><br>
|
||||
</div>
|
||||
<sl-progress-ring percentage="50" size="200"></sl-progress-ring><br>
|
||||
```
|
||||
|
||||
### Stroke Width
|
||||
|
||||
Use the `stroke-width` attribute to set the width of the progress ring's indicator.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring><br>
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the default slot to show a label.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring percentage="50" size="200" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
|
||||
|
||||
<br>
|
||||
|
||||
<sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
|
||||
<sl-button circle><sl-icon name="plus"></sl-icon></sl-button>
|
||||
|
||||
<script>
|
||||
const progressRing = document.querySelector('.progress-ring-labels');
|
||||
const subtractButton = progressRing.nextElementSibling.nextElementSibling;
|
||||
const addButton = subtractButton.nextElementSibling;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const percentage = Math.min(100, progressRing.percentage + 10);
|
||||
progressRing.percentage = percentage;
|
||||
progressRing.textContent = `${percentage}%`;
|
||||
});
|
||||
|
||||
subtractButton.addEventListener('click', () => {
|
||||
const percentage = Math.max(0, progressRing.percentage - 10)
|
||||
progressRing.percentage = percentage;
|
||||
progressRing.textContent = `${percentage}%`;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-ring]
|
||||
|
||||
@@ -12,7 +12,33 @@ Ranges allow the user to select a single value within a given range using a slid
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Formatter
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable a slider.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" disabled></sl-range>
|
||||
```
|
||||
|
||||
### Tooltip Placement
|
||||
|
||||
By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
|
||||
```
|
||||
|
||||
### Disable the Tooltip
|
||||
|
||||
To disable the tooltip, set `tooltip` to `none`.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
|
||||
```
|
||||
|
||||
### Custom Tooltip Formatter
|
||||
|
||||
You can change the tooltip's content by setting the `tooltipFormatter` prop to a function that accepts the range's value as an argument.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
|
||||
@@ -23,16 +49,4 @@ Ranges allow the user to select a single value within a given range using a slid
|
||||
</script>
|
||||
```
|
||||
|
||||
### Without Tooltip
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" disabled></sl-range>
|
||||
```
|
||||
|
||||
[component-metadata:sl-range]
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-select]
|
||||
|
||||
Selects...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Selects allow you to choose one or more items from a dropdown menu.
|
||||
|
||||
```html preview
|
||||
<sl-select placeholder="Select one">
|
||||
@@ -24,6 +22,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the select an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-select label="Select one">
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
@@ -34,6 +34,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
|
||||
### Multiple
|
||||
|
||||
To allow multiple options to be selected, use the `multiple` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-select placeholder="Select a few" multiple>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
@@ -48,6 +50,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` attribute to change a select's size.
|
||||
|
||||
```html preview
|
||||
<sl-select placeholder="Small" size="small" multiple>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
@@ -72,8 +76,22 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
</sl-select>
|
||||
```
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` prop to give selects rounded edges.
|
||||
|
||||
```html preview
|
||||
<sl-select label="Select one" pill multiple>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
</sl-select>
|
||||
```
|
||||
|
||||
### Groups
|
||||
|
||||
Options can be grouped visually using menu labels and menu dividers.
|
||||
|
||||
```html preview
|
||||
<sl-select placeholder="Select one">
|
||||
<sl-menu-label>Group 1</sl-menu-label>
|
||||
@@ -90,6 +108,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable a select.
|
||||
|
||||
```html preview
|
||||
<sl-select placeholder="Disabled" disabled>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
|
||||
Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
Tab groups make use of [tabs](/components/tab.md) and [tab panels](/components/tab-panel.md). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="top">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -22,6 +24,8 @@ Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
### Tabs on Bottom
|
||||
|
||||
Tabs can be shown on the bottom by setting `placement` to `bottom`.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="bottom">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -38,6 +42,8 @@ Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
### Tabs on Left
|
||||
|
||||
Tabs can be shown on the left by setting `placement` to `left`.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="left">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -54,6 +60,8 @@ Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
### Tabs on Right
|
||||
|
||||
Tabs can be shown on the right by setting `placement` to `right`.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="right">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -70,6 +78,8 @@ Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
### Scrolling Tabs
|
||||
|
||||
When there are more tabs than horizontal space allows, the nav will be scrollable.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
|
||||
|
||||
@@ -16,6 +16,8 @@ Tags are used as labels to organize things or to indicate a selection.
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change a tab's size.
|
||||
|
||||
```html preview
|
||||
<sl-tag type="primary" size="small">Primary</sl-tag>
|
||||
<sl-tag type="success" size="small">Success</sl-tag>
|
||||
@@ -42,6 +44,8 @@ Tags are used as labels to organize things or to indicate a selection.
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` prop to give tabs rounded edges.
|
||||
|
||||
```html preview
|
||||
<sl-tag type="primary" size="small" pill>Primary</sl-tag>
|
||||
<sl-tag type="success" size="small" pill>Success</sl-tag>
|
||||
@@ -68,6 +72,8 @@ Tags are used as labels to organize things or to indicate a selection.
|
||||
|
||||
### Removable
|
||||
|
||||
Use the `removable` attribute to add a remove button to the tag.
|
||||
|
||||
```html preview
|
||||
<sl-tag type="primary" size="small" removable>Primary</sl-tag>
|
||||
<sl-tag type="success" size="small" removable>Success</sl-tag>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Textareas collect data from the user and allow multiple lines of text.
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea"></sl-textarea>
|
||||
<sl-textarea></sl-textarea>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
@@ -14,26 +14,50 @@ Textareas collect data from the user and allow multiple lines of text.
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the textarea an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-textarea label="Comments"></sl-textarea>
|
||||
```
|
||||
|
||||
### No Resize
|
||||
### Rows
|
||||
|
||||
Use the `rows` attribute to change the number of text rows that get shown.
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea" resize="none"></sl-textarea>
|
||||
<sl-textarea rows="2"></sl-textarea>
|
||||
```
|
||||
|
||||
### Resize to Content
|
||||
### Placeholders
|
||||
|
||||
Use the `placeholder` attribute to add a placeholder.
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea" resize="auto"></sl-textarea>
|
||||
<sl-textarea placeholder="Type something"></sl-textarea>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable an input.
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea" disabled></sl-textarea>
|
||||
```
|
||||
|
||||
### Prevent Resizing
|
||||
|
||||
By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.
|
||||
|
||||
```html preview
|
||||
<sl-textarea resize="none"></sl-textarea>
|
||||
```
|
||||
|
||||
### Expand with Content
|
||||
|
||||
Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.
|
||||
|
||||
```html preview
|
||||
<sl-textarea resize="auto"></sl-textarea>
|
||||
```
|
||||
|
||||
[component-metadata:sl-textarea]
|
||||
|
||||
@@ -18,6 +18,8 @@ Tooltip's use `display: contents` so they won't interfere with how elements are
|
||||
|
||||
### Placement
|
||||
|
||||
Use the `placement` attribute to set the preferred placement of the tooltip.
|
||||
|
||||
```html preview
|
||||
<div class="tooltip-placement-example">
|
||||
<div class="tooltip-placement-example-row">
|
||||
@@ -109,6 +111,8 @@ Tooltip's use `display: contents` so they won't interfere with how elements are
|
||||
|
||||
### Click Trigger
|
||||
|
||||
Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.
|
||||
|
||||
```html preview
|
||||
<sl-tooltip content="Click again to dismiss" trigger="click">
|
||||
<sl-button>Click to Toggle</sl-button>
|
||||
@@ -117,10 +121,12 @@ Tooltip's use `display: contents` so they won't interfere with how elements are
|
||||
|
||||
### Manual Trigger
|
||||
|
||||
Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` prop to control when the tooltip is shown.
|
||||
|
||||
```html preview
|
||||
<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
|
||||
|
||||
<sl-tooltip content="This is an avatar" class="manual-tooltip">
|
||||
<sl-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
|
||||
<sl-avatar></sl-avatar>
|
||||
</sl-tooltip>
|
||||
|
||||
@@ -132,10 +138,12 @@ Tooltip's use `display: contents` so they won't interfere with how elements are
|
||||
</script>
|
||||
```
|
||||
|
||||
### No Arrows
|
||||
### Remove Arrows
|
||||
|
||||
You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow-size` design token.
|
||||
|
||||
```html preview
|
||||
<div style="--sl-tooltip-arrow-size: 0">
|
||||
<div style="--sl-tooltip-arrow-size: 0;">
|
||||
<sl-tooltip content="This is a tooltip">
|
||||
<sl-button>Above</sl-button>
|
||||
</sl-tooltip>
|
||||
@@ -146,4 +154,13 @@ Tooltip's use `display: contents` so they won't interfere with how elements are
|
||||
</div>
|
||||
```
|
||||
|
||||
To override it globally, set it in a root block in your stylesheet after `shoelace.css` is loaded.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--sl-tooltip-arrow-size: 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
[component-metadata:sl-tooltip]
|
||||
|
||||
Reference in New Issue
Block a user