Navigation Drawer¶
Navigation drawers provide access to destinations in your app.
When using the class MDNavigationDrawer
skeleton of your KV markup
should look like this:
Root:
NavigationLayout:
ScreenManager:
Screen_1:
Screen_2:
MDNavigationDrawer:
# This custom rule should implement what will be appear in your MDNavigationDrawer
ContentNavigationDrawer
A simple example:
from kivy.uix.boxlayout import BoxLayout
from kivymd.app import MDApp
from kivy.lang import Builder
KV = '''
Screen:
NavigationLayout:
ScreenManager:
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Navigation Drawer"
elevation: 10
left_action_items: [['menu', lambda x: nav_drawer.toggle_nav_drawer()]]
Widget:
MDNavigationDrawer:
ContentNavigationDrawer:
'''
class ContentNavigationDrawer(BoxLayout):
pass
class TestNavigationDrawer(MDApp):
def build(self):
return Builder.load_string(KV)
TestNavigationDrawer().run()
Note
MDNavigationDrawer
is an empty
MDCard
panel.
Let’s extend the ContentNavigationDrawer
class from the above example and
create content for our MDNavigationDrawer
panel:
# Menu item in the DrawerList list.
<ItemDrawer>:
theme_text_color: "Custom"
on_release: self.parent.set_color_item(self)
IconLeftWidget:
id: icon
icon: root.icon
theme_text_color: "Custom"
text_color: root.text_color
class ItemDrawer(OneLineIconListItem):
icon = StringProperty()
Top of ContentNavigationDrawer
and DrawerList
for menu items:
<ContentNavigationDrawer>:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
AnchorLayout:
anchor_x: "left"
size_hint_y: None
height: avatar.height
Image:
id: avatar
size_hint: None, None
size: "56dp", "56dp"
source: "kivymd_logo.png"
MDLabel:
text: "KivyMD library"
font_style: "Button"
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: "kivydevelopment@gmail.com"
font_style: "Caption"
size_hint_y: None
height: self.texture_size[1]
ScrollView:
DrawerList:
id: md_list
class ContentNavigationDrawer(BoxLayout):
pass
class DrawerList(ThemableBehavior, MDList):
def set_color_item(self, instance_item):
'''Called when tap on a menu item.'''
# Set the color of the icon and text for the menu item.
for item in self.children:
if item.text_color == self.theme_cls.primary_color:
item.text_color = self.theme_cls.text_color
break
instance_item.text_color = self.theme_cls.primary_color
Create a menu list for ContentNavigationDrawer
:
def on_start(self):
icons_item = {
"folder": "My files",
"account-multiple": "Shared with me",
"star": "Starred",
"history": "Recent",
"checkbox-marked": "Shared with me",
"upload": "Upload",
}
for icon_name in icons_item.keys():
self.root.ids.content_drawer.ids.md_list.add_widget(
ItemDrawer(icon=icon_name, text=icons_item[icon_name])
)
Switching screens in the ScreenManager
and using the common MDToolbar
¶
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
from kivymd.app import MDApp
KV = '''
<ContentNavigationDrawer>:
ScrollView:
MDList:
OneLineListItem:
text: "Screen 1"
on_press:
root.nav_drawer.set_state("close")
root.screen_manager.current = "scr 1"
OneLineListItem:
text: "Screen 2"
on_press:
root.nav_drawer.set_state("close")
root.screen_manager.current = "scr 2"
Screen:
MDToolbar:
id: toolbar
pos_hint: {"top": 1}
elevation: 10
title: "MDNavigationDrawer"
left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
NavigationLayout:
x: toolbar.height
ScreenManager:
id: screen_manager
Screen:
name: "scr 1"
MDLabel:
text: "Screen 1"
halign: "center"
Screen:
name: "scr 2"
MDLabel:
text: "Screen 2"
halign: "center"
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
screen_manager: screen_manager
nav_drawer: nav_drawer
'''
class ContentNavigationDrawer(BoxLayout):
screen_manager = ObjectProperty()
nav_drawer = ObjectProperty()
class TestNavigationDrawer(MDApp):
def build(self):
return Builder.load_string(KV)
TestNavigationDrawer().run()
API - kivymd.uix.navigationdrawer
¶
-
class
kivymd.uix.navigationdrawer.
NavigationLayout
¶ Bases:
kivy.uix.floatlayout.FloatLayout
-
add_scrim
(self, widget)¶
-
update_scrim_rectangle
(self, *args)¶
-
add_widget
(self, widget, index=0, canvas=None)¶ Only two layouts are allowed:
ScreenManager
andMDNavigationDrawer
.
-
-
class
kivymd.uix.navigationdrawer.
MDNavigationDrawer
(**kwargs)¶ Bases:
kivymd.uix.card.MDCard
-
anchor
¶ Anchoring screen edge for drawer. Set it to ‘right’ for right-to-left languages. Available options are: ‘left’, ‘right’.
anchor
is aOptionProperty
and defaults to left.
-
close_on_click
¶ Close when click on scrim or keyboard escape.
close_on_click
is aBooleanProperty
and defaults to True.
-
state
¶ Indicates if panel closed or opened. Sets after
status
change. Available options are: ‘close’, ‘open’.state
is aOptionProperty
and defaults to ‘close’.
-
status
¶ Detailed state. Sets before
state
. Bind tostate
instead ofstatus
. Available options are: ‘closed’, ‘opening_with_swipe’, ‘opening_with_animation’, ‘opened’, ‘closing_with_swipe’, ‘closing_with_animation’.status
is aOptionProperty
and defaults to ‘closed’.
-
open_progress
¶ Percent of visible part of side panel. The percent is specified as a floating point number in the range 0-1. 0.0 if panel is closed and 1.0 if panel is opened.
open_progress
is aNumericProperty
and defaults to 0.0.
-
swipe_distance
¶ The distance of the swipe with which the movement of navigation drawer begins.
swipe_distance
is aNumericProperty
and defaults to 10.
-
swipe_edge_width
¶ The size of the area in px inside which should start swipe to drag navigation drawer.
swipe_edge_width
is aNumericProperty
and defaults to 20.
-
scrim_color
¶ Color for scrim. Alpha channel will be multiplied with
_scrim_alpha
. Set fourth channel to 0 if you want to disable scrim.scrim_color
is aListProperty
and defaults to [0, 0, 0, 0.5].
-
scrim_alpha_transition
¶ The name of the animation transition type to use for changing
scrim_alpha
.scrim_alpha_transition
is aStringProperty
and defaults to ‘linear’.
-
opening_transition
¶ The name of the animation transition type to use when animating to the
state
‘open’.opening_transition
is aStringProperty
and defaults to ‘out_cubic’.
-
opening_time
¶ The time taken for the panel to slide to the
state
‘open’.opening_time
is aNumericProperty
and defaults to 0.2.
-
closing_transition
¶ The name of the animation transition type to use when animating to the
state
‘close’.closing_transition
is aStringProperty
and defaults to ‘out_sine’.
-
closing_time
¶ The time taken for the panel to slide to the
state
‘close’.closing_time
is aNumericProperty
and defaults to 0.2.
-
set_state
(self, new_state='toggle', animation=True)¶ Change state of the side panel. New_state can be one of “toggle”, “open” or “close”.
-
toggle_nav_drawer
(self)¶
-
update_status
(self, *_)¶
-
get_dist_from_side
(self, x)¶
-
on_touch_down
(self, touch)¶
-
on_touch_move
(self, touch)¶
-
on_touch_up
(self, touch)¶
-