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:
id: nav_drawer
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
(**kwargs)¶ Float layout class. See module documentation for more information.
-
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)¶ Widget class. See module documentation for more information.
- Events
- on_touch_down: (touch, )
Fired when a new touch event occurs. touch is the touch object.
- on_touch_move: (touch, )
Fired when an existing touch moves. touch is the touch object.
- on_touch_up: (touch, )
Fired when an existing touch disappears. touch is the touch object.
- on_kv_post: (base_widget, )
Fired after all the kv rules associated with the widget and all other widgets that are in any of those rules have had all their kv rules applied. base_widget is the base-most widget whose instantiation triggered the kv rules (i.e. the widget instantiated from Python, e.g.
MyWidget()
).Changed in version 1.11.0.
Warning
Adding a __del__ method to a class derived from Widget with Python prior to 3.4 will disable automatic garbage collection for instances of that class. This is because the Widget class creates reference cycles, thereby preventing garbage collection.
Changed in version 1.0.9: Everything related to event properties has been moved to the
EventDispatcher
. Event properties can now be used when contructing a simple class without subclassingWidget
.Changed in version 1.5.0: The constructor now accepts on_* arguments to automatically bind callbacks to properties or events, as in the Kv language.
-
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)¶ Receive a touch down event.
- Parameters
- touch:
MotionEvent
class Touch received. The touch is in parent coordinates. See
relativelayout
for a discussion on coordinate systems.
- touch:
- Returns
bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.
-
on_touch_move
(self, touch)¶ Receive a touch move event. The touch is in parent coordinates.
See
on_touch_down()
for more information.
-
on_touch_up
(self, touch)¶ Receive a touch up event. The touch is in parent coordinates.
See
on_touch_down()
for more information.