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

Add pill variation to badge

Browse Source
This commit is contained in:
Cory LaViska
2020-07-16 15:31:46 -04:00
parent a65b0848e4
commit 79a48a3cc2
5 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/plugins/metadata/metadata.js
View File

@@ -292,11 +292,11 @@
</div>
<div class="component-header__info">
<sl-badge type="info">
<sl-badge type="info" pill>
Since ${tags.since || '?'}
</sl-badge>
<sl-badge type="${badgeType}" style="text-transform: capitalize;">
<sl-badge type="${badgeType}" pill style="text-transform: capitalize;">
${tags.status}
</sl-badge>
</div>

20
docs/components/badge.md
View File

@@ -22,6 +22,16 @@ Set the `type` attribute to change the badge's type.
<sl-badge type="danger">Danger</sl-badge>
```
### Pill Badges
```html preview
<sl-badge type="primary" pill>Primary</sl-icon></sl-badge>
<sl-badge type="success" pill>Success</sl-badge>
<sl-badge type="info" pill>Info</sl-badge>
<sl-badge type="warning" pill>Warning</sl-badge>
<sl-badge type="danger" pill>Danger</sl-badge>
```
### With Buttons
One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
@@ -29,17 +39,17 @@ One of the most common use cases for badges is attaching them to buttons. To mak
```html preview
<sl-button>
Requests
<sl-badge>30</sl-badge>
<sl-badge pill>30</sl-badge>
</sl-button>
<sl-button style="margin-left: 1rem;">
Warnings
<sl-badge type="warning">8</sl-badge>
<sl-badge type="warning" pill>8</sl-badge>
</sl-button>
<sl-button style="margin-left: 1rem;">
Errors
<sl-badge type="danger">6</sl-badge>
<sl-badge type="danger" pill>6</sl-badge>
</sl-button>
```
@@ -52,8 +62,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
>
<sl-menu-label>Messages</sl-menu-label>
<sl-menu-item>Comments <sl-badge slot="suffix">4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix">12</sl-badge></sl-menu-item>
<sl-menu-item>Comments <sl-badge slot="suffix" pill>4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix" pill>12</sl-badge></sl-menu-item>
</sl-menu>
```