Skip to content

Commit 4b4fe21

Browse files
thetaPCbrandyscarney
thetaPC
and
brandyscarney
authored
docs(badge, tab-bar): add playground to show usage of badges in tab-bar (#4045)
Co-authored-by: Brandy Smith <[email protected]>
1 parent 70fd717 commit 4b4fe21

File tree

9 files changed

+226
-0
lines changed

9 files changed

+226
-0
lines changed

‎docs/api/badge.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@ import Basic from '@site/static/usage/v8/badge/basic/index.md';
2525

2626
<Basic />
2727

28+
## Badges in Tab Buttons
29+
30+
Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.
31+
32+
:::info
33+
Empty badges are only available for `md` mode.
34+
:::
35+
36+
import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
37+
38+
<InsideTabBar />
39+
2840
## Theming
2941

3042
### Colors

‎docs/api/tab-bar.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,18 @@ export default defineComponent({
148148

149149
</Tabs>
150150

151+
## Badges in Tab Buttons
152+
153+
Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.
154+
155+
:::info
156+
Empty badges are only available for `md` mode.
157+
:::
158+
159+
import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
160+
161+
<InsideTabBar />
162+
151163
## Properties
152164
<Props />
153165

‎static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<ion-tab-bar color="light">
3+
<ion-tab-button tab="1">
4+
<ion-icon name="heart"></ion-icon>
5+
<ion-label>Favorites</ion-label>
6+
<ion-badge color="danger"></ion-badge>
7+
</ion-tab-button>
8+
9+
<ion-tab-button tab="2">
10+
<ion-icon name="musical-note"></ion-icon>
11+
<ion-label>Music</ion-label>
12+
</ion-tab-button>
13+
14+
<ion-tab-button tab="3">
15+
<ion-icon name="calendar"></ion-icon>
16+
<ion-label>Calendar</ion-label>
17+
<ion-badge color="danger">47</ion-badge>
18+
</ion-tab-button>
19+
</ion-tab-bar>
20+
```

‎static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
4+
import { addIcons } from 'ionicons';
5+
import { heart, calendar, musicalNote } from 'ionicons/icons';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
styleUrls: ['./example.component.css'],
11+
imports: [IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel],
12+
})
13+
export class ExampleComponent {
14+
constructor() {
15+
/**
16+
* Any icons you want to use in your application
17+
* can be registered in app.component.ts and then
18+
* referenced by name anywhere in your application.
19+
*/
20+
addIcons({ heart, calendar, musicalNote });
21+
}
22+
}
23+
```

‎static/usage/v8/badge/inside-tab-bar/demo.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Badge</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-tab-bar {
14+
flex: 1;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-tab-bar color="light">
24+
<ion-tab-button tab="1">
25+
<ion-icon name="heart"></ion-icon>
26+
<ion-label>Favorites</ion-label>
27+
<ion-badge color="danger"></ion-badge>
28+
</ion-tab-button>
29+
30+
<ion-tab-button tab="2">
31+
<ion-icon name="musical-note"></ion-icon>
32+
<ion-label>Music</ion-label>
33+
</ion-tab-button>
34+
35+
<ion-tab-button tab="3">
36+
<ion-icon name="calendar"></ion-icon>
37+
<ion-label>Calendar</ion-label>
38+
<ion-badge color="danger">47</ion-badge>
39+
</ion-tab-button>
40+
</ion-tab-bar>
41+
</div>
42+
</ion-content>
43+
</ion-app>
44+
</body>
45+
</html>

‎static/usage/v8/badge/inside-tab-bar/index.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="8"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v8/badge/inside-tab-bar/demo.html"
24+
/>

‎static/usage/v8/badge/inside-tab-bar/javascript.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<ion-tab-bar color="light">
3+
<ion-tab-button tab="1">
4+
<ion-icon name="heart"></ion-icon>
5+
<ion-label>Favorites</ion-label>
6+
<ion-badge color="danger"></ion-badge>
7+
</ion-tab-button>
8+
9+
<ion-tab-button tab="2">
10+
<ion-icon name="musical-note"></ion-icon>
11+
<ion-label>Music</ion-label>
12+
</ion-tab-button>
13+
14+
<ion-tab-button tab="3">
15+
<ion-icon name="calendar"></ion-icon>
16+
<ion-label>Calendar</ion-label>
17+
<ion-badge color="danger">47</ion-badge>
18+
</ion-tab-button>
19+
</ion-tab-bar>
20+
```

‎static/usage/v8/badge/inside-tab-bar/react.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
4+
import { heart, calendar, musicalNote } from 'ionicons/icons';
5+
6+
function Example() {
7+
return (
8+
<>
9+
<IonTabBar color="light">
10+
<IonTabButton tab="tab1">
11+
<IonIcon icon={heart} />
12+
<IonLabel>Favorites</IonLabel>
13+
<IonBadge color="danger"></IonBadge>
14+
</IonTabButton>
15+
<IonTabButton tab="tab2">
16+
<IonIcon icon={musicalNote} />
17+
<IonLabel>Music</IonLabel>
18+
</IonTabButton>
19+
<IonTabButton tab="tab3">
20+
<IonIcon icon={calendar} />
21+
<IonLabel>Calendar</IonLabel>
22+
<IonBadge color="danger">47</IonBadge>
23+
</IonTabButton>
24+
</IonTabBar>
25+
</>
26+
);
27+
}
28+
export default Example;
29+
```

‎static/usage/v8/badge/inside-tab-bar/vue.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```html
2+
<template>
3+
<ion-tab-bar color="light">
4+
<ion-tab-button tab="1">
5+
<ion-icon :icon="heart" />
6+
<ion-label>Favorites</ion-label>
7+
<ion-badge color="danger"></ion-badge>
8+
</ion-tab-button>
9+
10+
<ion-tab-button tab="2">
11+
<ion-icon :icon="musicalNote" />
12+
<ion-label>Music</ion-label>
13+
</ion-tab-button>
14+
15+
<ion-tab-button tab="3">
16+
<ion-icon :icon="calendar" />
17+
<ion-label>Calendar</ion-label>
18+
<ion-badge color="danger">47</ion-badge>
19+
</ion-tab-button>
20+
</ion-tab-bar>
21+
</template>
22+
23+
<script lang="ts">
24+
import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/vue';
25+
import { heart, calendar, musicalNote } from 'ionicons/icons';
26+
import { defineComponent } from 'vue';
27+
28+
export default defineComponent({
29+
components: {
30+
IonBadge,
31+
IonTabBar,
32+
IonTabButton,
33+
IonIcon,
34+
IonLabel,
35+
},
36+
setup() {
37+
return { heart, calendar, musicalNote };
38+
},
39+
});
40+
</script>
41+
```

0 commit comments

Comments
 (0)