Bottom Navigation¶
Bottom navigation bars allow movement between primary destinations in an app:
Usage¶
<Root>>:
MDBottomNavigation:
MDBottomNavigationItem:
name: "screen 1"
YourContent:
MDBottomNavigationItem:
name: "screen 2"
YourContent:
MDBottomNavigationItem:
name: "screen 3"
YourContent:
For ease of understanding, this code works like this:
<Root>>:
ScreenManager:
Screen:
name: "screen 1"
YourContent:
Screen:
name: "screen 2"
YourContent:
Screen:
name: "screen 3"
YourContent:
Example¶
from kivymd.app import MDApp
from kivy.lang import Builder
class Test(MDApp):
def build(self):
self.theme_cls.primary_palette = "Gray"
return Builder.load_string(
'''
BoxLayout:
orientation:'vertical'
MDToolbar:
title: 'Bottom navigation'
md_bg_color: .2, .2, .2, 1
specific_text_color: 1, 1, 1, 1
MDBottomNavigation:
panel_color: .2, .2, .2, 1
MDBottomNavigationItem:
name: 'screen 1'
text: 'Python'
icon: 'language-python'
MDLabel:
text: 'Python'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'C++'
icon: 'language-cpp'
MDLabel:
text: 'I programming of C++'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'JS'
icon: 'language-javascript'
MDLabel:
text: 'JS'
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",
)
See also
See __events__
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?¶
Use method switch_tab
which takes as argument
the name of the tab you want to switch to.
API - kivymd.uix.bottomnavigation
¶
-
class
kivymd.uix.bottomnavigation.
MDTab
(**kwargs)¶ Bases:
kivy.uix.screenmanager.Screen
,kivymd.theming.ThemableBehavior
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’.
-
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.
MDBottomNavigationItem
¶ Bases:
kivymd.uix.bottomnavigation.MDTab
-
on_tab_press
(self, *args)¶
-
on_leave
(self, *args)¶
-
-
class
kivymd.uix.bottomnavigation.
TabbedPanelBase
¶ Bases:
kivymd.theming.ThemableBehavior
,kivymd.uix.behaviors.backgroundcolorbehavior.SpecificBackgroundColorBehavior
,kivy.uix.boxlayout.BoxLayout
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 anListProperty
and defaults to [].
-
tabs
¶
-
-
class
kivymd.uix.bottomnavigation.
MDBottomNavigation
(**kwargs)¶ Bases:
kivymd.uix.bottomnavigation.TabbedPanelBase
A bottom navigation that is implemented by delegating all items to a ScreenManager.
-
first_widget
¶ first_widget
is anMDBottomNavigationItem
and defaults to Nome.
-
tab_header
¶ tab_header
is anMDBottomNavigationHeader
and defaults to Nome.
-
on_panel_color
(self, instance, value)¶
-
switch_tab
(self, name_tab)¶ Switching the tab by name.
-
on_resize
(self, instance=None, width=None, do_again=True)¶
-
add_widget
(self, widget, **kwargs)¶ Add tabs to the screen or the layout.
- Parameters
widget – The widget to add.
-
remove_widget
(self, widget)¶ Remove tabs from the screen or the layout.
- Parameters
widget – The widget to remove.
-