Label


Label


Label
@State var selectedIndex1 = 0
let items: [DLBottomItem] = [
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
)
]

DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)

3. Label

You can edit the label with the "text" parameter.

@State var selectedIndex1 = 0
let items: [DLBottomItem] = [
DLBottomItem(
label: "",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "",
icon: "ic_Placeholder"
)
]

DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)

4. badgeSize

You can edit the badgeSize with the .sm or .md(text: String) parameter.

Label


Label


2
Label
@State var selectedIndex1 = 0
let items: [DLBottomItem] = [
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder",
badgeSize: .sm
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder",
badgeSize: .md(text: "2")
)
]

DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)

Jetpack Compose

The BottomNavigation component is used to enable easy navigation within an app or to clarify which page you are on.

1. Reference

This component inherits props from the Bottom Navigation.

Prop

Type

Default

itmes

label

icon

badgeSize

selectedIndex

2. Icon

You can edit the icon with the "icon" parameter.

Label


Label


Label
BottomNavigation {
item(
selected = selectedItemQuintuple3 == 0,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 0 },
)
item(
selected = selectedItemQuintuple3 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 1 },
)
item(
selected = selectedItemQuintuple3 == 2,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 2 },
)
}

3. Label

You can edit the label with the "text" parameter.

BottomNavigation {
item(
selected = selectedItemQuintuple2 == 0,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
onClick = { selectedItemQuintuple2 = 0 }
)
item(
selected = selectedItemQuintuple2 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
onClick = { selectedItemQuintuple2 = 1 }
)
item(
selected = selectedItemQuintuple2 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
onClick = { selectedItemQuintuple2 = 1 }
)
}

4. badgeSize

You can edit the badgeSize with the .sm or .md(text: String) parameter.

Label


Label


2
Label
BottomNavigation {
item(
selected = selectedItemQuintuple3 == 0,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 0 },
badge = null
)
item(
selected = selectedItemQuintuple3 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 1 },
badge = BottomBarBadge(BadgeNotificationSize.sm)
)
item(
selected = selectedItemQuintuple3 == 2,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 2 },
badge = BottomBarBadge(badgeSize = BadgeNotificationSize.md, number = 2)
)
}