mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Update markdown files
This commit is contained in:
Cory LaViska
@@ -7,10 +7,10 @@ Checkboxes...
|
||||
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.
|
||||
|
||||
```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>
|
||||
<sl-checkbox>Default</sl-checkbox><br>
|
||||
<sl-checkbox checked>Checked</sl-checkbox><br>
|
||||
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br>
|
||||
<sl-checkbox disabled>Disabled</sl-checkbox><br>
|
||||
```
|
||||
|
||||
[component-metadata:sl-checkbox]
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
# Dropdown Divider
|
||||
|
||||
[component-header:sl-dropdown-divider]
|
||||
|
||||
Dropdown dividers can be used to separate dropdown items and other content inside dropdowns.
|
||||
|
||||
See the Dropdown component for more usage examples.
|
||||
A demonstration of this component can be found in the [dropdown examples](/components/dropdown.md).
|
||||
|
||||
[component-metadata:sl-dropdown-divider]
|
||||
[component-metadata:sl-dropdown-divider]
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
# Dropdown Item
|
||||
|
||||
[component-header:sl-dropdown-item]
|
||||
|
||||
Dropdown items can be used inside dropdowns to add menu items that the user can select.
|
||||
|
||||
See the Dropdown component for more usage examples.
|
||||
A demonstration of this component can be found in the [dropdown examples](/components/dropdown.md).
|
||||
|
||||
[component-metadata:sl-dropdown-item]
|
||||
[component-metadata:sl-dropdown-item]
|
||||
|
||||
@@ -1,41 +1,51 @@
|
||||
# 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>
|
||||
[component-header:sl-icon]
|
||||
|
||||
<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...
|
||||
|
||||
Default icons are courtesy of the [Feather Icons](https://feathericons.com/) project.
|
||||
|
||||
```html preview
|
||||
<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>
|
||||
```
|
||||
|
||||
Icons are courtesy of [Feather Icons](https://feathericons.com/).
|
||||
[component-metadata:sl-icon]
|
||||
|
||||
[component-metadata:sl-icon]
|
||||
## Examples
|
||||
|
||||
### Sizes
|
||||
|
||||
Icon sizes are determined by the current font size.
|
||||
|
||||
```html preview
|
||||
<div style="font-size: 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>
|
||||
```
|
||||
@@ -1,76 +1,79 @@
|
||||
# Input
|
||||
|
||||
[component-header:sl-input]
|
||||
|
||||
Inputs...
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Input"></sl-input>
|
||||
```
|
||||
|
||||
[component-metadata:sl-input]
|
||||
|
||||
## Examples
|
||||
|
||||
### Size
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Small" size="small"></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br>
|
||||
<sl-input type="text" placeholder="Medium" size="medium"></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br>
|
||||
<sl-input type="text" placeholder="Large" size="large"></sl-input>
|
||||
```
|
||||
|
||||
<br><br>
|
||||
|
||||
### Prefix & Suffix Icons
|
||||
```html preview
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
### Clearable
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br>
|
||||
<sl-input type="text" placeholder="Clearable" size="medium" clearable></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br>
|
||||
<sl-input type="text" placeholder="Clearable" size="large" clearable></sl-input>
|
||||
```
|
||||
|
||||
<br><br>
|
||||
### Toggle Password
|
||||
|
||||
```html preview
|
||||
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<br>
|
||||
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
|
||||
|
||||
<br><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>
|
||||
### Number
|
||||
|
||||
```html preview
|
||||
<sl-input type="number" placeholder="Number"></sl-input>
|
||||
```
|
||||
|
||||
[component-metadata:sl-input]
|
||||
### Disabled
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>
|
||||
<br>
|
||||
<sl-input type="text" placeholder="Disabled" size="medium" disabled></sl-input>
|
||||
<br>
|
||||
<sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>
|
||||
```
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# Progress Bar
|
||||
|
||||
[component-header:sl-progress-bar]
|
||||
|
||||
Progress bars...
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="0"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="25"></sl-progress-bar><br>
|
||||
@@ -8,6 +14,12 @@
|
||||
<sl-progress-bar percentage="100"></sl-progress-bar>
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-bar]
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Height & Label
|
||||
|
||||
```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>
|
||||
@@ -15,5 +27,3 @@
|
||||
<sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100" height="18">100%</sl-progress-bar>
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-bar]
|
||||
@@ -1,5 +1,11 @@
|
||||
# Progress Ring
|
||||
|
||||
[component-header:sl-progress-ring]
|
||||
|
||||
Progress rings...
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
<sl-progress-ring percentage="0">0%</sl-progress-ring><br>
|
||||
@@ -10,4 +16,4 @@
|
||||
</div>
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-bar]
|
||||
[component-metadata:sl-progress-ring]
|
||||
@@ -1,9 +1,15 @@
|
||||
# Radio
|
||||
|
||||
[component-header:sl-radio]
|
||||
|
||||
Radios...
|
||||
|
||||
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.
|
||||
|
||||
```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>
|
||||
<sl-radio>Default</sl-radio><br>
|
||||
<sl-radio checked>Checked</sl-radio><br>
|
||||
<sl-radio disabled>Disabled</sl-radio><br>
|
||||
```
|
||||
|
||||
[component-metadata:sl-radio]
|
||||
[component-metadata:sl-radio]
|
||||
|
||||
@@ -1,32 +1,37 @@
|
||||
# Range
|
||||
|
||||
[component-header:sl-range]
|
||||
|
||||
Ranges...
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
```
|
||||
|
||||
<br><br>
|
||||
[component-metadata:sl-range]
|
||||
|
||||
<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
|
||||
## Examples
|
||||
|
||||
<br><br>
|
||||
### Custom Formatter
|
||||
|
||||
```html preview
|
||||
<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>
|
||||
### Without Tooltip
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" tooltip="off"></sl-range>
|
||||
```
|
||||
|
||||
[component-metadata:sl-range]
|
||||
### Disabled
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" disabled></sl-range>
|
||||
```
|
||||
@@ -1,5 +1,11 @@
|
||||
# Spinner
|
||||
|
||||
[component-header:sl-spinner]
|
||||
|
||||
Spinners...
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
<sl-spinner></sl-spinner>
|
||||
<sl-spinner diameter="32"></sl-spinner>
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
# Switch
|
||||
|
||||
[component-header:sl-switch]
|
||||
|
||||
Switches...
|
||||
|
||||
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.
|
||||
|
||||
```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>
|
||||
<sl-switch>Default</sl-switch><br>
|
||||
<sl-switch checked>Checked</sl-switch><br>
|
||||
<sl-switch disabled>Disabled</sl-switch><br>
|
||||
```
|
||||
|
||||
[component-metadata:sl-switch]
|
||||
[component-metadata:sl-switch]
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# Tab Group
|
||||
|
||||
[component-header:sl-tab-group]
|
||||
|
||||
Tab groups...
|
||||
|
||||
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.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="top">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -14,6 +20,12 @@
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
[component-metadata:sl-tab-group]
|
||||
|
||||
## Examples
|
||||
|
||||
### Tabs on Bottom
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="bottom">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -27,6 +39,7 @@
|
||||
<sl-tab-panel name="disabled">Disabled</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
```
|
||||
### Tabs on Left
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="left">
|
||||
@@ -42,6 +55,8 @@
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
### Tabs on Right
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="right">
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
@@ -56,6 +71,8 @@
|
||||
</sl-tab-group>
|
||||
```
|
||||
|
||||
### Scrolling Tabs
|
||||
|
||||
```html preview
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
|
||||
@@ -101,23 +118,3 @@
|
||||
<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.
|
||||
|
||||
[component-metadata:sl-tab-group]
|
||||
@@ -1,7 +1,9 @@
|
||||
# Tab Panel
|
||||
|
||||
Tab Panels are used to create panels inside Tab Groups.
|
||||
[component-header:sl-tab-panel]
|
||||
|
||||
See the Tab Group component for more usage examples.
|
||||
Tab panels...
|
||||
|
||||
[component-metadata:sl-tab-panel]
|
||||
A demonstration of this component can be found in the [tab group examples](/components/tab-group.md).
|
||||
|
||||
[component-metadata:sl-tab-panel]
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
# Tab
|
||||
|
||||
Tabs are used to create tabs inside Tab Groups.
|
||||
[component-header:sl-tab]
|
||||
|
||||
See the Tab Group component for more usage examples.
|
||||
Tabs...
|
||||
|
||||
[component-metadata:sl-tab]
|
||||
A demonstration of this component can be found in the [tab group examples](/components/tab-group.md).
|
||||
|
||||
[component-metadata:sl-tab]
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
# Textarea
|
||||
|
||||
[component-header:sl-textarea]
|
||||
|
||||
Textareas...
|
||||
|
||||
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.
|
||||
|
||||
```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>
|
||||
<sl-textarea placeholder="Textarea"></sl-textarea>
|
||||
```
|
||||
|
||||
[component-metadata:sl-textarea]
|
||||
[component-metadata:sl-textarea]
|
||||
|
||||
## Examples
|
||||
|
||||
### No Resize
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea" resize="none"></sl-textarea>
|
||||
```
|
||||
|
||||
### Resize to Content
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea" resize="auto"></sl-textarea>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea" resize="none" disabled></sl-textarea>
|
||||
```
|
||||
@@ -1,28 +1,39 @@
|
||||
# Tooltip
|
||||
|
||||
[component-header:sl-tooltip]
|
||||
|
||||
Tooltips...
|
||||
|
||||
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.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
[component-metadata:sl-tooltip]
|
||||
[component-metadata:sl-tooltip]
|
||||
|
||||
## Examples
|
||||
|
||||
### Placement
|
||||
|
||||
```html preview
|
||||
<sl-button>Top</sl-button>
|
||||
<sl-tooltip placement="top">Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Bottom</sl-button>
|
||||
<sl-tooltip placement="bottom">Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Left</sl-button>
|
||||
<sl-tooltip placement="left">Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Right</sl-button>
|
||||
<sl-tooltip placement="right">Tooltip</sl-tooltip>
|
||||
```
|
||||
|
||||
### Arrow
|
||||
|
||||
```html preview
|
||||
<sl-button>Tooltip With Arrow</sl-button>
|
||||
<sl-tooltip arrow>This is a tooltip with arrow</sl-tooltip>
|
||||
```
|
||||
|
||||
16
src/components.d.ts
vendored
16
src/components.d.ts
vendored
@@ -401,14 +401,14 @@ export namespace Components {
|
||||
* The input's step attribute.
|
||||
*/
|
||||
"step": number;
|
||||
/**
|
||||
* The tooltip's position.
|
||||
*/
|
||||
"tooltip": "top" | "bottom" | "off";
|
||||
/**
|
||||
* A function used to format the tooltip's value.
|
||||
*/
|
||||
"tooltipFormatter": (value: number) => string;
|
||||
/**
|
||||
* The preferred placedment of the tooltip.
|
||||
*/
|
||||
"tooltipPlacement": "top" | "bottom" | "hidden";
|
||||
/**
|
||||
* The input's value attribute.
|
||||
*/
|
||||
@@ -1232,14 +1232,14 @@ declare namespace LocalJSX {
|
||||
* The input's step attribute.
|
||||
*/
|
||||
"step"?: number;
|
||||
/**
|
||||
* The tooltip's position.
|
||||
*/
|
||||
"tooltip"?: "top" | "bottom" | "off";
|
||||
/**
|
||||
* A function used to format the tooltip's value.
|
||||
*/
|
||||
"tooltipFormatter"?: (value: number) => string;
|
||||
/**
|
||||
* The preferred placedment of the tooltip.
|
||||
*/
|
||||
"tooltipPlacement"?: "top" | "bottom" | "hidden";
|
||||
/**
|
||||
* The input's value attribute.
|
||||
*/
|
||||
|
||||
@@ -42,8 +42,8 @@ export class Range {
|
||||
/** The input's step attribute. */
|
||||
@Prop() step = 1;
|
||||
|
||||
/** The tooltip's position. */
|
||||
@Prop() tooltip: 'top' | 'bottom' | 'off' = 'top';
|
||||
/** The preferred placedment of the tooltip. */
|
||||
@Prop() tooltipPlacement: 'top' | 'bottom' | 'hidden' = 'top';
|
||||
|
||||
/** A function used to format the tooltip's value. */
|
||||
@Prop() tooltipFormatter = (value: number) => value.toString();
|
||||
@@ -100,7 +100,7 @@ export class Range {
|
||||
}
|
||||
|
||||
syncTooltip() {
|
||||
if (this.tooltip !== 'off') {
|
||||
if (this.tooltipPlacement !== 'hidden') {
|
||||
const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
|
||||
const inputWidth = this.input.offsetWidth;
|
||||
const tooltipWidth = this.output.offsetWidth;
|
||||
@@ -120,8 +120,8 @@ export class Range {
|
||||
// States
|
||||
'sl-range--disabled': this.disabled,
|
||||
'sl-range--focused': this.hasFocus,
|
||||
'sl-range--tooltip-top': this.tooltip === 'top',
|
||||
'sl-range--tooltip-bottom': this.tooltip === 'bottom'
|
||||
'sl-range--tooltip-top': this.tooltipPlacement === 'top',
|
||||
'sl-range--tooltip-bottom': this.tooltipPlacement === 'bottom'
|
||||
}}
|
||||
>
|
||||
<input
|
||||
@@ -138,7 +138,7 @@ export class Range {
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
/>
|
||||
{this.tooltip !== 'off' && (
|
||||
{this.tooltipPlacement !== 'hidden' && (
|
||||
<output ref={el => (this.output = el)} class="sl-range__tooltip">
|
||||
{this.tooltipFormatter(this.value)}
|
||||
</output>
|
||||
|
||||
Reference in New Issue
Block a user