diff --git a/docs/api/badge.md b/docs/api/badge.md index c5ff3d188e5..6a4e6671919 100644 --- a/docs/api/badge.md +++ b/docs/api/badge.md @@ -25,6 +25,18 @@ import Basic from '@site/static/usage/v8/badge/basic/index.md'; +## Badges in Tab Buttons + +Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element. + +:::info +Empty badges are only available for `md` mode. +::: + +import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md'; + + + ## Theming ### Colors diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md index bb67296f61f..f3f18c8cd39 100644 --- a/docs/api/tab-bar.md +++ b/docs/api/tab-bar.md @@ -148,6 +148,18 @@ export default defineComponent({ +## Badges in Tab Buttons + +Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element. + +:::info +Empty badges are only available for `md` mode. +::: + +import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md'; + + + ## Properties diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md new file mode 100644 index 00000000000..e300331495d --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_html.md @@ -0,0 +1,20 @@ +```html + + + + Favorites + + + + + + Music + + + + + Calendar + 47 + + +``` diff --git a/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md b/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md new file mode 100644 index 00000000000..9454e1984a0 --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { heart, calendar, musicalNote } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ heart, calendar, musicalNote }); + } +} +``` diff --git a/static/usage/v8/badge/inside-tab-bar/demo.html b/static/usage/v8/badge/inside-tab-bar/demo.html new file mode 100644 index 00000000000..dbd8f6c7060 --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/demo.html @@ -0,0 +1,45 @@ + + + + + + Badge + + + + + + + + + + + +
+ + + + Favorites + + + + + + Music + + + + + Calendar + 47 + + +
+ + + + diff --git a/static/usage/v8/badge/inside-tab-bar/index.md b/static/usage/v8/badge/inside-tab-bar/index.md new file mode 100644 index 00000000000..66e65779a9c --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/badge/inside-tab-bar/javascript.md b/static/usage/v8/badge/inside-tab-bar/javascript.md new file mode 100644 index 00000000000..e300331495d --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/javascript.md @@ -0,0 +1,20 @@ +```html + + + + Favorites + + + + + + Music + + + + + Calendar + 47 + + +``` diff --git a/static/usage/v8/badge/inside-tab-bar/react.md b/static/usage/v8/badge/inside-tab-bar/react.md new file mode 100644 index 00000000000..7ba592426fb --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react'; +import { heart, calendar, musicalNote } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + Favorites + + + + + Music + + + + Calendar + 47 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/badge/inside-tab-bar/vue.md b/static/usage/v8/badge/inside-tab-bar/vue.md new file mode 100644 index 00000000000..3534095941b --- /dev/null +++ b/static/usage/v8/badge/inside-tab-bar/vue.md @@ -0,0 +1,41 @@ +```html + + + +```