mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Remove docs-readme output target
This commit is contained in:
Cory LaViska
@@ -1,49 +1,6 @@
|
||||
# Alert
|
||||
# sl-alert
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary" open>
|
||||
Nothing fancy here, just a simple alert.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="primary" open closable>
|
||||
<sl-icon slot="icon" name="info"></sl-icon>
|
||||
This one is a bit fancier because now it has an icon and is closable.
|
||||
</sl-alert>
|
||||
```
|
||||
|
||||
## Types
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary" open closable>
|
||||
<sl-icon slot="icon" name="info"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br>
|
||||
You can continue working or safely leave the app now.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="success" open closable>
|
||||
<sl-icon slot="icon" name="check-circle"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br>
|
||||
You can continue working or safely leave the app now.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="info" open closable>
|
||||
<sl-icon slot="icon" name="settings"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br>
|
||||
You can continue working or safely leave the app now.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="warning" open closable>
|
||||
<sl-icon slot="icon" name="alert-triangle"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br>
|
||||
You can continue working or safely leave the app now.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="danger" open closable>
|
||||
<sl-icon slot="icon" name="alert-octagon"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br>
|
||||
You can continue working or safely leave the app now.
|
||||
</sl-alert>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -114,4 +71,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,124 +1,5 @@
|
||||
# Button
|
||||
# sl-button
|
||||
|
||||
Good ol' buttons. They're usually the first thing I look at when reviewing a component library. Shoelace offers a variation for every theme color.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" tabindex>Default</sl-button>
|
||||
<sl-button type="primary" tabindex>Primary</sl-button>
|
||||
<sl-button type="success" tabindex>Success</sl-button>
|
||||
<sl-button type="info">Info</sl-button>
|
||||
<sl-button type="warning">Warning</sl-button>
|
||||
<sl-button type="danger">Danger</sl-button>
|
||||
```
|
||||
|
||||
## Pill
|
||||
|
||||
Use the `pill` prop to give buttons rounded edges.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" pill>Default</sl-button>
|
||||
<sl-button type="primary" pill>Primary</sl-button>
|
||||
<sl-button type="success" pill>Success</sl-button>
|
||||
<sl-button type="info" pill>Info</sl-button>
|
||||
<sl-button type="warning" pill>Warning</sl-button>
|
||||
<sl-button type="danger" pill>Danger</sl-button>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
Use the `size` prop to change a button's size.
|
||||
|
||||
```html preview
|
||||
<sl-button size="small">Small</sl-button>
|
||||
<sl-button size="medium">Medium</sl-button>
|
||||
<sl-button size="large">Large</sl-button>
|
||||
```
|
||||
|
||||
## Circle
|
||||
|
||||
Use the `circle` prop to create circular icon buttons.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" size="small" circle><sl-icon name="settings"></sl-icon></sl-button>
|
||||
<sl-button type="default" size="medium" circle><sl-icon name="settings"></sl-icon></sl-button>
|
||||
<sl-button type="default" size="large" circle><sl-icon name="settings"></sl-icon></sl-button>
|
||||
```
|
||||
|
||||
## Text
|
||||
|
||||
Use `type="text"` to create text buttons, which share the same size as regular buttons but don't have backgrounds or borders.
|
||||
|
||||
```html preview
|
||||
<sl-button type="text" size="small">Text</sl-button>
|
||||
<sl-button type="text" size="medium">Text</sl-button>
|
||||
<sl-button type="text" size="large">Text</sl-button>
|
||||
```
|
||||
|
||||
## Block
|
||||
|
||||
Block buttons can be created by setting the button's width to `100%`.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
|
||||
<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
|
||||
<sl-button type="default" size="large" style="width: 100%; margin-bottom: 1rem;">Large</sl-button>
|
||||
```
|
||||
|
||||
## Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default">
|
||||
<sl-icon slot="prefix" name="settings"></sl-icon>
|
||||
Settings
|
||||
</sl-button>
|
||||
<sl-button type="default">
|
||||
<sl-icon slot="suffix" name="refresh-ccw"></sl-icon>
|
||||
Refresh
|
||||
</sl-button>
|
||||
<sl-button type="default">
|
||||
<sl-icon slot="prefix" name="link"></sl-icon>
|
||||
<sl-icon slot="suffix" name="external-link"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
```
|
||||
|
||||
## Caret
|
||||
|
||||
Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
|
||||
|
||||
```html preview
|
||||
<sl-button size="small" caret>Small</sl-button>
|
||||
<sl-button size="medium" caret>Medium</sl-button>
|
||||
<sl-button size="large" caret>Large</sl-button>
|
||||
```
|
||||
|
||||
## Loading
|
||||
|
||||
Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" loading>Default</sl-button>
|
||||
<sl-button type="primary" loading>Primary</sl-button>
|
||||
<sl-button type="success" loading>Success</sl-button>
|
||||
<sl-button type="info" loading>Info</sl-button>
|
||||
<sl-button type="warning" loading>Warning</sl-button>
|
||||
<sl-button type="danger" loading>Danger</sl-button>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
Use the `disabled` prop to disable a button.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" disabled>Default</sl-button>
|
||||
<sl-button type="primary" disabled>Primary</sl-button>
|
||||
<sl-button type="success" disabled>Success</sl-button>
|
||||
<sl-button type="info" disabled>Info</sl-button>
|
||||
<sl-button type="warning" disabled>Warning</sl-button>
|
||||
<sl-button type="danger" disabled>Danger</sl-button>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -197,4 +78,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
# Checkbox
|
||||
# sl-checkbox
|
||||
|
||||
|
||||
```html preview
|
||||
<sl-checkbox>Default</sl-checkbox><br><br>
|
||||
<sl-checkbox checked>Checked</sl-checkbox><br><br>
|
||||
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br><br>
|
||||
<sl-checkbox disabled>Disabled</sl-checkbox><br><br>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -62,4 +57,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
# Color Picker
|
||||
# sl-color-picker
|
||||
|
||||
```html preview
|
||||
<sl-color-picker opacity></sl-color-picker>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-color-picker opacity inline></sl-color-picker>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -59,4 +53,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,24 +1,6 @@
|
||||
# Dialog
|
||||
# sl-dialog
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" id="dialog-1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<sl-button slot="footer" type="primary" id="dialog-1-close">Close</sl-button>
|
||||
</sl-dialog>
|
||||
|
||||
<sl-button id="dialog-1-open">Open Dialog</sl-button>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const dialog = document.querySelector('#dialog-1');
|
||||
const openButton = document.querySelector('#dialog-1-open');
|
||||
const closeButton = document.querySelector('#dialog-1-close');
|
||||
|
||||
openButton.addEventListener('click', () => dialog.show());
|
||||
closeButton.addEventListener('click', () => dialog.hide());
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -97,4 +79,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
# Dropdown Divider
|
||||
# sl-dropdown-divider
|
||||
|
||||
TODO
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -8,4 +7,4 @@ TODO
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
# Dropdown Item
|
||||
# sl-dropdown-item
|
||||
|
||||
TODO
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -47,4 +46,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,63 +1,5 @@
|
||||
# Dropdown
|
||||
# sl-dropdown
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-dropdown-item>Dropdown Item 1</sl-dropdown-item>
|
||||
<sl-dropdown-item>Dropdown Item 2</sl-dropdown-item>
|
||||
<sl-dropdown-item>Dropdown Item 3</sl-dropdown-item>
|
||||
<sl-dropdown-divider></sl-dropdown-divider>
|
||||
<sl-dropdown-item checked>Checked</sl-dropdown-item>
|
||||
<sl-dropdown-item disabled>Disabled</sl-dropdown-item>
|
||||
<sl-dropdown-divider></sl-dropdown-divider>
|
||||
<sl-dropdown-item>
|
||||
Prefix
|
||||
<sl-icon slot="prefix" name="gift"></sl-icon>
|
||||
</sl-dropdown-item>
|
||||
<sl-dropdown-item>
|
||||
Suffix Icon
|
||||
<sl-icon slot="suffix" name="heart"></sl-icon>
|
||||
</sl-dropdown-item>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
<sl-dropdown-item>Cut</sl-dropdown-item>
|
||||
<sl-dropdown-item>Copy</sl-dropdown-item>
|
||||
<sl-dropdown-item>Paste</sl-dropdown-item>
|
||||
<sl-dropdown-divider></sl-dropdown-divider>
|
||||
<sl-dropdown-item>Find</sl-dropdown-item>
|
||||
<sl-dropdown-item>Replace</sl-dropdown-item>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Scrolling Menu</sl-button>
|
||||
<sl-dropdown-item>Item 1</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 2</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 3</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 4</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 5</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 6</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 7</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 8</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 9</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 10</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 11</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 12</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 13</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 14</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 15</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 16</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 17</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 18</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 19</sl-dropdown-item>
|
||||
<sl-dropdown-item>Item 20</sl-dropdown-item>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -128,4 +70,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,42 +1,6 @@
|
||||
# Icon
|
||||
# sl-icon
|
||||
|
||||
```html preview
|
||||
<div style="font-size: 1rem; margin-bottom: 2rem;">
|
||||
<sl-icon name="alert-triangle"></sl-icon>
|
||||
<sl-icon name="archive"></sl-icon>
|
||||
<sl-icon name="battery"></sl-icon>
|
||||
<sl-icon name="bell"></sl-icon>
|
||||
<sl-icon name="clock"></sl-icon>
|
||||
<sl-icon name="chevron-down"></sl-icon>
|
||||
<sl-icon name="download"></sl-icon>
|
||||
<sl-icon name="file"></sl-icon>
|
||||
<sl-icon name="flag"></sl-icon>
|
||||
<sl-icon name="image"></sl-icon>
|
||||
<sl-icon name="mic"></sl-icon>
|
||||
<sl-icon name="search"></sl-icon>
|
||||
<sl-icon name="trash"></sl-icon>
|
||||
<sl-icon name="x-circle"></sl-icon>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 2rem; margin-bottom: 2rem;">
|
||||
<sl-icon name="alert-triangle"></sl-icon>
|
||||
<sl-icon name="archive"></sl-icon>
|
||||
<sl-icon name="battery"></sl-icon>
|
||||
<sl-icon name="bell"></sl-icon>
|
||||
<sl-icon name="clock"></sl-icon>
|
||||
<sl-icon name="chevron-down"></sl-icon>
|
||||
<sl-icon name="download"></sl-icon>
|
||||
<sl-icon name="file"></sl-icon>
|
||||
<sl-icon name="flag"></sl-icon>
|
||||
<sl-icon name="image"></sl-icon>
|
||||
<sl-icon name="mic"></sl-icon>
|
||||
<sl-icon name="search"></sl-icon>
|
||||
<sl-icon name="trash"></sl-icon>
|
||||
<sl-icon name="x-circle"></sl-icon>
|
||||
</div>
|
||||
```
|
||||
|
||||
Icons are courtesy of [Feather Icons](https://feathericons.com/).
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -76,4 +40,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,77 +1,5 @@
|
||||
# Input
|
||||
# sl-input
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Small" size="small"></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Medium" size="medium"></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Large" size="large"></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Small" size="small">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
<sl-icon name="settings" slot="suffix"></sl-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Medium" size="medium">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
<sl-icon name="settings" slot="suffix"></sl-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Large" size="large">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
<sl-icon name="settings" slot="suffix"></sl-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Clearable" size="medium" clearable></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Clearable" size="large" clearable></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Disabled" size="medium" disabled></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="number" placeholder="Number"></sl-input>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -198,4 +126,4 @@ graph TD;
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,20 +1,5 @@
|
||||
# Progress Bar
|
||||
# sl-progress-bar
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -37,4 +22,4 @@
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,14 +1,6 @@
|
||||
# Progress Ring
|
||||
# sl-progress-ring
|
||||
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -24,4 +16,4 @@
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
# Radio
|
||||
# sl-radio
|
||||
|
||||
|
||||
```html preview
|
||||
<sl-radio>Default</sl-radio><br><br>
|
||||
<sl-radio checked>Checked</sl-radio><br><br>
|
||||
<sl-radio disabled>Disabled</sl-radio><br><br>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -60,4 +56,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,33 +1,6 @@
|
||||
# Range
|
||||
# sl-range
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-range id="range-with-custom-formatter" min="0" max="100" step="1"></sl-range>
|
||||
<script>
|
||||
(() => {
|
||||
document.querySelector('#range-with-custom-formatter').tooltipFormatter = value => `Total - ${value}%`;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-range min="1" max="10" step=".25"></sl-range>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-range min="0" max="100" step="1" disabled></sl-range>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-range min="0" max="100" step="1" tooltip="off"></sl-range>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -80,4 +53,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
# Spinner
|
||||
# sl-spinner
|
||||
|
||||
|
||||
```html preview
|
||||
<sl-spinner></sl-spinner>
|
||||
<sl-spinner diameter="32"></sl-spinner>
|
||||
<sl-spinner diameter="48"></sl-spinner>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -19,4 +15,4 @@
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
# Switch
|
||||
# sl-switch
|
||||
|
||||
```html preview
|
||||
<sl-switch>Switch</sl-switch><br><br>
|
||||
<sl-switch checked>Checked</sl-switch><br><br>
|
||||
<sl-switch disabled>Disabled</sl-switch><br><br>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -61,4 +56,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,124 +1,5 @@
|
||||
# Tab Group
|
||||
# sl-tab-group
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="top">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||||
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||||
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||||
|
||||
<sl-tab-panel name="general">General</sl-tab-panel>
|
||||
<sl-tab-panel name="custom">Custom</sl-tab-panel>
|
||||
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
|
||||
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="bottom">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||||
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||||
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||||
|
||||
<sl-tab-panel name="general">General</sl-tab-panel>
|
||||
<sl-tab-panel name="custom">Custom</sl-tab-panel>
|
||||
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
|
||||
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="left">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||||
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||||
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||||
|
||||
<sl-tab-panel name="general">General</sl-tab-panel>
|
||||
<sl-tab-panel name="custom">Custom</sl-tab-panel>
|
||||
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
|
||||
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="right">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||||
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||||
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||||
|
||||
<sl-tab-panel name="general">General</sl-tab-panel>
|
||||
<sl-tab-panel name="custom">Custom</sl-tab-panel>
|
||||
<sl-tab-panel name="advanced">Advanced</sl-tab-panel>
|
||||
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
|
||||
<sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
|
||||
|
||||
<sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
|
||||
<sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
Serious consideration was given to simplifying the tab group API into two components with a structure similar to:
|
||||
|
||||
```html
|
||||
<!-- Not a valid syntax -->
|
||||
<sl-tab-group placement="top">
|
||||
<sl-tab label="General">General</sl-tab>
|
||||
<sl-tab label="Custom">Custom</sl-tab>
|
||||
<sl-tab label="Advanced">Advanced</sl-tab>
|
||||
<sl-tab label="Disabled" disabled>Disabled</sl-tab>
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
However, there are two caveats to this approach. The first is that labels must be generated and stored in the tab group's shadow DOM. For accessibility reasons, tabs and tab panels must be linked via `id` using the `aria-controls` and `aria-labeledby` attribute, respectively. When a tab is inside a shadow DOM, its `id` becomes inaccessible to the light DOM and accessibility is broken.
|
||||
|
||||
The second thing is that labels would be limited to text only. If you wanted to put an icon, a badge, or another element inside the label, it wouldn't be possible with this approach.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -162,4 +43,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
# Tab Panel
|
||||
# sl-tab-panel
|
||||
|
||||
TODO
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -23,4 +22,4 @@ TODO
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
# Tab
|
||||
# sl-tab
|
||||
|
||||
TODO
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -47,4 +46,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
# Textarea
|
||||
# sl-textarea
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Standard" resize="none"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Resizable" resize="vertical"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Auto" resize="auto"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Disabled" resize="none" disabled></sl-textarea><br><br>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -100,4 +91,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -1,29 +1,5 @@
|
||||
# Tooltip
|
||||
# sl-tooltip
|
||||
|
||||
```html preview
|
||||
<sl-button>Tooltip</sl-button>
|
||||
<sl-tooltip>This is a tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Tooltip With Arrow</sl-button>
|
||||
<sl-tooltip arrow>This is a tooltip with arrow</sl-tooltip>
|
||||
|
||||
<a href="#">Tooltip On Link</a>
|
||||
<sl-tooltip>This is a tooltip on a link</sl-tooltip>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button>Top</sl-button>
|
||||
<sl-tooltip placement="top" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Bottom</sl-button>
|
||||
<sl-tooltip placement="bottom" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Left</sl-button>
|
||||
<sl-tooltip placement="left" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Right</sl-button>
|
||||
<sl-tooltip placement="right" arrow>Tooltip</sl-tooltip>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -88,4 +64,4 @@ Type: `Promise<void>`
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@@ -20,10 +20,6 @@ export const config: Config = {
|
||||
{
|
||||
type: 'dist-custom-elements-bundle'
|
||||
},
|
||||
{
|
||||
type: 'docs-readme',
|
||||
footer: ''
|
||||
},
|
||||
{
|
||||
type: 'docs-json',
|
||||
file: './dist/components.json'
|
||||
|
||||
Reference in New Issue
Block a user