javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(badge): add more to the description of badge

Browse Source
This commit is contained in:
Brandy Carney
2017-12-14 12:08:15 -05:00
parent b29bdb3152
commit 8a6b3165c7
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/core/src/components/badge/readme.md
View File

@@ -1,19 +1,26 @@
# ion-badge
Badges are simple components in Ionic containing numbers or text. You can display a
badge to indicate that there is new information associated with the item it is on.
Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
```html
<ion-badge>99</ion-badge>
<!-- Colors -->
<ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge>
<ion-badge color="warning">33</ion-badge>
<ion-badge color="danger">44</ion-badge>
<ion-badge color="light">55</ion-badge>
<ion-badge color="dark">66</ion-badge>
```
```html
<ion-content>
<ion-list>
<ion-item>
<ion-badge slot="start">
34
</ion-badge>
My Item
<ion-badge slot="end">
2
</ion-badge>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
</ion-list>
</ion-content>