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 pulse prop to badge

Browse Source
This commit is contained in:
Cory LaViska
2020-07-27 07:32:17 -04:00
parent 6aa16801bd
commit 1bfbd665fa
4 changed files with 81 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/badge.md
View File

@@ -24,6 +24,8 @@ Set the `type` attribute to change the badge's type.
### Pill Badges
Use the `pill` attribute to give badges rounded edges.
```html preview
<sl-badge type="primary" pill>Primary</sl-icon></sl-badge>
<sl-badge type="success" pill>Success</sl-badge>
@@ -32,6 +34,26 @@ Set the `type` attribute to change the badge's type.
<sl-badge type="danger" pill>Danger</sl-badge>
```
### Pulsating Badges
Use the `pulse` attribute to draw attention to the badge with a subtle animation.
```html preview
<div class="badge-pulse">
<sl-badge type="primary" pill pulse>1</sl-icon></sl-badge>
<sl-badge type="success" pill pulse>1</sl-badge>
<sl-badge type="info" pill pulse>1</sl-badge>
<sl-badge type="warning" pill pulse>1</sl-badge>
<sl-badge type="danger" pill pulse>1</sl-badge>
</div>
<style>
.badge-pulse sl-badge:not(:last-of-type) {
margin-right: 1rem;
}
</style>
```
### 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.