javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(badge): add usage

Browse Source
This commit is contained in:
Brandy Carney
2018-04-10 18:25:15 -04:00
parent 850d7fc74d
commit 9b9aab9f2b
3 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/badge/readme.md
View File

@ -2,25 +2,6 @@
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. 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>
<!-- Item with badge on left and right -->
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

22
core/src/components/badge/usage/angular.md Normal file
View File

@ -0,0 +1,22 @@
```html
<!-- Default -->
<ion-badge>99</ion-badge>
<!-- Colors -->
<ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge>
<ion-badge color="tertiary">33</ion-badge>
<ion-badge color="success">44</ion-badge>
<ion-badge color="warning">55</ion-badge>
<ion-badge color="danger">66</ion-badge>
<ion-badge color="light">77</ion-badge>
<ion-badge color="medium">88</ion-badge>
<ion-badge color="dark">99</ion-badge>
<!-- Item with badge on left and right -->
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
```

22
core/src/components/badge/usage/javascript.md Normal file
View File

@ -0,0 +1,22 @@
```html
<!-- Default -->
<ion-badge>99</ion-badge>
<!-- Colors -->
<ion-badge color="primary">11</ion-badge>
<ion-badge color="secondary">22</ion-badge>
<ion-badge color="tertiary">33</ion-badge>
<ion-badge color="success">44</ion-badge>
<ion-badge color="warning">55</ion-badge>
<ion-badge color="danger">66</ion-badge>
<ion-badge color="light">77</ion-badge>
<ion-badge color="medium">88</ion-badge>
<ion-badge color="dark">99</ion-badge>
<!-- Item with badge on left and right -->
<ion-item>
<ion-badge slot="start">11</ion-badge>
<ion-label>My Item</ion-label>
<ion-badge slot="end">22</ion-badge>
</ion-item>
```