mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Move examples to readmes
This commit is contained in:
Cory LaViska
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>shoelace - Stencil Component Starter</title>
|
||||
<title>Shoelace: A forward-thinking library of Web Components.</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Stencil Component Starter" />
|
||||
<meta
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
* {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--sl-font-sans-serif);
|
||||
font-size: 16px;
|
||||
@@ -175,6 +179,7 @@ body.close .sidebar-toggle {
|
||||
.code-block {
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.025);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.code-block__preview {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "shoelace",
|
||||
"version": "0.0.1",
|
||||
"description": "Stencil Component Starter",
|
||||
"description": "A forward-thinking library of Web Components.",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"es2015": "dist/esm/index.mjs",
|
||||
|
||||
@@ -1,6 +1,47 @@
|
||||
# Alert
|
||||
|
||||
TODO
|
||||
```html preview
|
||||
<sl-alert type="primary">This is a primary alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="success">This is a success alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="info">This is a info alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="warning">This is a warning alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="danger">This is a danger alert, if you couldn't tell.</sl-alert>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary">
|
||||
<ion-icon slot="icon" name="information-circle-outline"></ion-icon>
|
||||
This is a primary alert, if you couldn't tell.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="success">
|
||||
<ion-icon slot="icon" name="checkmark-outline"></ion-icon>
|
||||
This is a success alert, if you couldn't tell.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="info">
|
||||
<ion-icon slot="icon" name="settings-outline"></ion-icon>
|
||||
This is a info alert, if you couldn't tell.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="warning">
|
||||
<ion-icon slot="icon" name="alert-circle-outline"></ion-icon>
|
||||
This is a warning alert, if you couldn't tell.
|
||||
</sl-alert><br>
|
||||
|
||||
<sl-alert type="danger">
|
||||
<ion-icon slot="icon" name="alarm-outline"></ion-icon>
|
||||
This is a danger alert, if you couldn't tell.
|
||||
</sl-alert>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary" closable>This is a primary alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="success" closable>This is a success alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="info" closable>This is a info alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="warning" closable>This is a warning alert, if you couldn't tell.</sl-alert><br>
|
||||
<sl-alert type="danger" closable>This is a danger alert, if you couldn't tell.</sl-alert>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
# Checkbox
|
||||
|
||||
TODO
|
||||
|
||||
```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 -->
|
||||
|
||||
|
||||
@@ -1,6 +1,67 @@
|
||||
# Dropdown
|
||||
|
||||
TODO
|
||||
```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
|
||||
<ion-icon slot="prefix" name="save-outline"></ion-icon>
|
||||
</sl-dropdown-item>
|
||||
<sl-dropdown-item>
|
||||
Suffix Text
|
||||
<small slot="suffix"><kbd>cmd+s<kbd></small>
|
||||
</sl-dropdown-item>
|
||||
<sl-dropdown-item>
|
||||
Suffix Icon
|
||||
<ion-icon slot="suffix" name="open-outline"></ion-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 -->
|
||||
|
||||
@@ -1,9 +1,124 @@
|
||||
# Input
|
||||
|
||||
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Type Something"></sl-input>
|
||||
<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">
|
||||
<ion-icon name="settings-outline" slot="prefix"></ion-icon>
|
||||
<ion-icon name="open-outline" slot="suffix"></ion-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Medium" size="medium">
|
||||
<ion-icon name="settings-outline" slot="prefix"></ion-icon>
|
||||
<ion-icon name="open-outline" slot="suffix"></ion-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Large" size="large">
|
||||
<ion-icon name="settings-outline" slot="prefix"></ion-icon>
|
||||
<ion-icon name="open-outline" slot="suffix"></ion-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Addons" size="small">
|
||||
<span slot="before">$</span>
|
||||
<span slot="after">.00</span>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Addons" size="medium">
|
||||
<span slot="before">$</span>
|
||||
<span slot="after">.00</span>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Addons" size="large">
|
||||
<span slot="before">$</span>
|
||||
<span slot="after">.00</span>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Addons and Icons" size="small">
|
||||
<span slot="before">$</span>
|
||||
<span slot="after">.00</span>
|
||||
<ion-icon name="settings-outline" slot="prefix"></ion-icon>
|
||||
<ion-icon name="open-outline" slot="suffix"></ion-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Addons and Icons" size="medium">
|
||||
<span slot="before">$</span>
|
||||
<span slot="after">.00</span>
|
||||
<ion-icon name="settings-outline" slot="prefix"></ion-icon>
|
||||
<ion-icon name="open-outline" slot="suffix"></ion-icon>
|
||||
</sl-input>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-input type="text" placeholder="Addons and Icons" size="large">
|
||||
<span slot="before">$</span>
|
||||
<span slot="after">.00</span>
|
||||
<ion-icon name="settings-outline" slot="prefix"></ion-icon>
|
||||
<ion-icon name="open-outline" slot="suffix"></ion-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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
# Progress Bar
|
||||
|
||||
TODO
|
||||
```html preview
|
||||
<sl-progress-bar percentage="25">25%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="50">50%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="75">75%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100">100%</sl-progress-bar>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="25" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="50" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="75" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100" height="6"></sl-progress-bar>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
# Progress Ring
|
||||
|
||||
TODO
|
||||
|
||||
```html preview
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
<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 -->
|
||||
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
# Radio
|
||||
|
||||
TODO
|
||||
|
||||
```html preview
|
||||
<sl-radio name="test">Default</sl-radio><br><br>
|
||||
<sl-radio name="test"checked>Checked</sl-radio><br><br>
|
||||
<sl-radio name="test"disabled>Disabled</sl-radio><br><br>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@@ -1,7 +1,32 @@
|
||||
# Range
|
||||
|
||||
TODO
|
||||
```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>
|
||||
|
||||
<!-- TODO: JS not executing -->
|
||||
<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 -->
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
# Spinner
|
||||
|
||||
TODO
|
||||
```html preview
|
||||
<sl-spinner></sl-spinner>
|
||||
<sl-spinner size="2em"></sl-spinner>
|
||||
<sl-spinner size="3em"></sl-spinner>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
# Switch
|
||||
|
||||
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
```html preview
|
||||
<sl-switch>Default</sl-switch>
|
||||
|
||||
<sl-switch checked>Checked</sl-switch>
|
||||
|
||||
<sl-switch disabled>Disabled</sl-switch>
|
||||
<sl-switch>Switch</sl-switch><br><br>
|
||||
<sl-switch checked>Checked</sl-switch><br><br>
|
||||
<sl-switch disabled>Disabled</sl-switch><br><br>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,106 @@
|
||||
# Tabs
|
||||
|
||||
TODO
|
||||
```html preview
|
||||
<sl-tabs position="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-tabs>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tabs position="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-tabs>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tabs position="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-tabs>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tabs position="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-tabs>
|
||||
```
|
||||
|
||||
```html preview
|
||||
<sl-tabs>
|
||||
<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-tabs>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
# Textarea
|
||||
|
||||
TODO
|
||||
```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 -->
|
||||
|
||||
@@ -1,6 +1,29 @@
|
||||
# Tooltip
|
||||
|
||||
TODO
|
||||
```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 -->
|
||||
|
||||
@@ -595,14 +595,14 @@
|
||||
|
||||
<h2>Progress Bar</h2>
|
||||
<sl-progress-bar percentage="25">25%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage=50">50%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="50">50%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="75">75%</sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100">100%</sl-progress-bar>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-progress-bar percentage="25" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage=50" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="50" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="75" height="6"></sl-progress-bar><br>
|
||||
<sl-progress-bar percentage="100" height="6"></sl-progress-bar>
|
||||
|
||||
@@ -611,7 +611,7 @@
|
||||
<h2>Progress Ring</h2>
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
<sl-progress-ring percentage="25">25%</sl-progress-ring><br>
|
||||
<sl-progress-ring percentage=50">50%</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>
|
||||
|
||||
Reference in New Issue
Block a user