js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Doc updates

Browse Source
This commit is contained in:
Cory LaViska
2020-06-19 13:30:15 -04:00
parent 8ab93bb1fa
commit a56b3e2583
3 changed files with 23 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/components/badge.md
View File

@@ -12,13 +12,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
<sl-badge type="info">Info</sl-badge>
<sl-badge type="warning">Warning</sl-badge>
<sl-badge type="danger">Danger</sl-badge>
<br><br>
<sl-button>
Unread
<sl-badge>12</sl-badge>
</sl-button>
```
[component-metadata:sl-badge]

6
docs/components/icon.md
View File

@@ -4,7 +4,7 @@
Icons are symbols that can be used to represent or provide context to various options and actions within an application.
Shoelace comes bundled with over 600 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. You can also use your own SVG icons with this component with the `src` attribute.
Shoelace comes bundled with over 600 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. You can also use your own SVG icons with this component through the `src` attribute.
<div class="icon-search">
<div class="icon-search-controls">
@@ -12,8 +12,8 @@ Shoelace comes bundled with over 600 icons courtesy of the [Bootstrap Icons](htt
<sl-icon slot="prefix" name="search"></sl-icon>
</sl-input>
<sl-select value="outline">
<sl-menu-item value="outline">Outlined icons</sl-menu-item>
<sl-menu-item value="fill">Filled icons</sl-menu-item>
<sl-menu-item value="outline">Outlined</sl-menu-item>
<sl-menu-item value="fill">Filled</sl-menu-item>
<sl-menu-item value="all">All icons</sl-menu-item>
</sl-select>
</div>

40
docs/components/tag.md
View File

@@ -21,11 +21,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
### Size
```html preview
<sl-tag size="small" type="primary">Primary</sl-tag>
<sl-tag size="small" type="success">Success</sl-tag>
<sl-tag size="small" type="info">Info</sl-tag>
<sl-tag size="small" type="warning">Warning</sl-tag>
<sl-tag size="small" type="danger">Danger</sl-tag>
<sl-tag type="primary" size="small">Primary</sl-tag>
<sl-tag type="success" size="small">Success</sl-tag>
<sl-tag type="info" size="small">Info</sl-tag>
<sl-tag type="warning" size="small">Warning</sl-tag>
<sl-tag type="danger" size="small">Danger</sl-tag>
<br><br>
@@ -47,25 +47,25 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
### Removable
```html preview
<sl-tag removable size="small" type="primary">Primary</sl-tag>
<sl-tag removable size="small" type="success">Success</sl-tag>
<sl-tag removable size="small" type="info">Info</sl-tag>
<sl-tag removable size="small" type="warning">Warning</sl-tag>
<sl-tag removable size="small" type="danger">Danger</sl-tag>
<sl-tag type="primary" size="small" removable>Primary</sl-tag>
<sl-tag type="success" size="small" removable>Success</sl-tag>
<sl-tag type="info" size="small" removable>Info</sl-tag>
<sl-tag type="warning" size="small" removable>Warning</sl-tag>
<sl-tag type="danger" size="small" removable>Danger</sl-tag>
<br><br>
<sl-tag removable size="medium" type="primary">Primary</sl-tag>
<sl-tag removable size="medium" type="success">Success</sl-tag>
<sl-tag removable size="medium" type="info">Info</sl-tag>
<sl-tag removable size="medium" type="warning">Warning</sl-tag>
<sl-tag removable size="medium" type="danger">Danger</sl-tag>
<sl-tag size="medium" type="primary" removable>Primary</sl-tag>
<sl-tag size="medium" type="success" removable>Success</sl-tag>
<sl-tag size="medium" type="info" removable>Info</sl-tag>
<sl-tag size="medium" type="warning" removable>Warning</sl-tag>
<sl-tag size="medium" type="danger" removable>Danger</sl-tag>
<br><br>
<sl-tag removable size="large" type="primary">Primary</sl-tag>
<sl-tag removable size="large" type="success">Success</sl-tag>
<sl-tag removable size="large" type="info">Info</sl-tag>
<sl-tag removable size="large" type="warning">Warning</sl-tag>
<sl-tag removable size="large" type="danger">Danger</sl-tag>
<sl-tag size="large" type="primary" removable>Primary</sl-tag>
<sl-tag size="large" type="success" removable>Success</sl-tag>
<sl-tag size="large" type="info" removable>Info</sl-tag>
<sl-tag size="large" type="warning" removable>Warning</sl-tag>
<sl-tag size="large" type="danger" removable>Danger</sl-tag>
```