coco
37 lines
1.0 KiB
Markdown
37 lines
1.0 KiB
Markdown
# BadgeBox
|
|
A `BadgeBox` is used to decorate content with a badge that can contain dynamic information, such as the presence of a new notification or a number of pending requests. Badges can be icon only or contain short text.
|
|
|
|
A common use case is to display a badge with bottom navigation items. For more information, see Bottom Navigation
|
|
|
|
A simple icon with badge example looks like:
|
|
|
|
<p align="left">
|
|
<img src ="{{ site.images }}/material/badgebox/img.png" />
|
|
</p>
|
|
|
|
```kotlin
|
|
@OptIn(ExperimentalMaterialApi::class)
|
|
@Preview
|
|
@Composable
|
|
fun BadgeBoxDemo() {
|
|
BottomNavigation {
|
|
BottomNavigationItem(
|
|
icon = {
|
|
BadgedBox(badge = { Badge { Text("8") } }) {
|
|
Icon(
|
|
Icons.Filled.Favorite,
|
|
contentDescription = "Favorite"
|
|
)
|
|
}
|
|
|
|
},
|
|
selected = false,
|
|
onClick = {})
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
### See also:
|
|
* [Full Example Code]({{ site.samplefolder }}/material/badgebox/BadgeBoxDemo.kt)
|