BottomNavigation
Bottom navigation bars allow movement between primary destinations in an app: For ease of understanding, this code works like this: Use method
Usage
<Root>
MDBottomNavigation:
MDBottomNavigationItem:
name: "screen 1"
YourContent:
MDBottomNavigationItem:
name: "screen 2"
YourContent:
MDBottomNavigationItem:
name: "screen 3"
YourContent:
<Root>
ScreenManager:
Screen:
name: "screen 1"
YourContent:
Screen:
name: "screen 2"
YourContent:
Screen:
name: "screen 3"
YourContent:
Example
from kivy.lang import Builder
from kivymd.app import MDApp
class Test(MDApp):
def build(self):
self.theme_cls.material_style = "M3"
return Builder.load_string(
'''
#:import get_color_from_hex kivy.utils.get_color_from_hex
MDScreen:
MDBottomNavigation:
panel_color: get_color_from_hex("#eeeaea")
selected_color_background: get_color_from_hex("#97ecf8")
text_color_active: 0, 0, 0, 1
MDBottomNavigationItem:
name: 'screen 1'
text: 'Mail'
icon: 'gmail'
badge_icon: "numeric-10"
MDLabel:
text: 'Mail'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'Discord'
icon: 'discord'
badge_icon: "numeric-5"
MDLabel:
text: 'Discord'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'LinkedIN'
icon: 'linkedin'
MDLabel:
text: 'LinkedIN'
halign: 'center'
'''
)
Test().run()
MDBottomNavigationItem
provides the following events for use:__events__ = (
"on_tab_touch_down",
"on_tab_touch_move",
"on_tab_touch_up",
"on_tab_press",
"on_tab_release",
)
Root:
MDBottomNavigation:
MDBottomNavigationItem:
on_tab_touch_down: print("on_tab_touch_down")
on_tab_touch_move: print("on_tab_touch_move")
on_tab_touch_up: print("on_tab_touch_up")
on_tab_press: print("on_tab_press")
on_tab_release: print("on_tab_release")
YourContent:
How to automatically switch a tab?
switch_tab
which takes as argument
the name of the tab you want to switch to.Use custom icon
MDBottomNavigation:
MDBottomNavigationItem:
icon: "icon.png"
API - kivymd.uix.bottomnavigation.bottomnavigation
- class kivymd.uix.bottomnavigation.bottomnavigation.MDTab(**kwargs)
A tab is simply a screen with meta information that defines the content that goes in the tab header.
- text
Tab header text.
text
is anStringProperty
and defaults to ‘’.
- icon
Tab header icon.
icon
is anStringProperty
and defaults to ‘checkbox-blank-circle’.
- badge_icon
Tab header badge icon.
New in version 1.0.0.
badge_icon
is anStringProperty
and defaults to ‘’.
- on_tab_touch_down(self, *args)
- on_tab_touch_move(self, *args)
- on_tab_touch_up(self, *args)
- on_tab_press(self, *args)
- on_tab_release(self, *args)
- class kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNavigationItem(**kwargs)
A tab is simply a screen with meta information that defines the content that goes in the tab header.
- on_tab_press(self, *args)
Called when clicking on a panel item.
- on_leave(self, *args)
- class kivymd.uix.bottomnavigation.bottomnavigation.TabbedPanelBase(**kwargs)
A class that contains all variables a
TabPannel
must have. It is here so I (zingballyhoo) don’t get mad about theTabbedPannels
not being DRY.- current
Current tab name.
current
is anStringProperty
and defaults to None.
- previous_tab
previous_tab
is anMDTab
and defaults to None.
- panel_color
Panel color of bottom navigation.
panel_color
is anColorProperty
and defaults to None.
- tabs
- class kivymd.uix.bottomnavigation.bottomnavigation.MDBottomNavigation(**kwargs)
A bottom navigation that is implemented by delegating all items to a
ScreenManager
.- Events
on_switch_tabs
Called when switching tabs. Returns the object of the tab to be opened.
New in version 1.0.0.
- text_color_normal
Text color of the label when it is not selected.
MDBottomNavigation: text_color_normal: 1, 0, 1, 1
text_color_normal
is anColorProperty
and defaults to [1, 1, 1, 1].
- text_color_active
Text color of the label when it is selected.
MDBottomNavigation: text_color_active: 0, 0, 0, 1
text_color_active
is anColorProperty
and defaults to [1, 1, 1, 1].
- use_text
Use text for
MDBottomNavigationItem
or not. IfTrue
, theMDBottomNavigation
panel height will be reduced by the text height.New in version 1.0.0.
use_text
is anBooleanProperty
and defaults to True.
- selected_color_background
The background color of the highlighted item when using Material Design v3.
New in version 1.0.0.
MDBottomNavigation: elected_color_background: 0, 0, 1, .4
selected_color_background
is anColorProperty
and defaults to None.
- font_name
Font name of the label.
New in version 1.0.0.
MDBottomNavigation: font_name: "path/to/font.ttf"
font_name
is anStringProperty
and defaults to ‘Roboto’.
- first_widget
first_widget
is anMDBottomNavigationItem
and defaults to None.
- tab_header
tab_header
is anMDBottomNavigationHeader
and defaults to None.
- set_bars_color
If True the background color of the navigation bar will be set automatically according to the current color of the toolbar.
New in version 1.0.0.
set_bars_color
is anBooleanProperty
and defaults to False.
- switch_tab(self, name_tab)
Switching the tab by name.
- refresh_tabs(self, *args)
Refresh all tabs.
- on_switch_tabs(self, bottom_navigation_item, name_tab: str)
Called when switching tabs. Returns the object of the tab to be opened.
- on_size(self, *args)
- on_resize(self, instance: Union[WindowSDL, None] = None, width: Union[int, None] = None, do_again: bool = True)
Called when the application window is resized.
- add_widget(self, widget, **kwargs)
Add a new widget as a child of this widget.
- Parameters
- widget:
Widget
Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
New in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
New in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- remove_widget(self, widget)
Remove a widget from the children of this widget.
- Parameters
- widget:
Widget
Widget to remove from our children list.
- widget:
>>> from kivy.uix.button import Button >>> root = Widget() >>> button = Button() >>> root.add_widget(button) >>> root.remove_widget(button)