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:
MDNavigationLayout:
ScreenManager:
Screen_1:
Screen_2:
MDNavigationDrawer:
# This custom rule should implement what will be appear in your MDNavigationDrawer
ContentNavigationDrawer
A simple example:
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivymd.app import MDApp
KV = '''
Screen:
MDNavigationLayout:
ScreenManager:
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Navigation Drawer"
elevation: 10
left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]]
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.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")]]
MDNavigationLayout:
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()
NavigationDrawer with type standard
¶
You can use the standard
behavior type for the NavigationDrawer:
MDNavigationDrawer:
type: "standard"
API - kivymd.uix.navigationdrawer
¶
- class kivymd.uix.navigationdrawer.MDNavigationLayout(**kwargs)¶
Float layout class. See module documentation for more information.
- update_pos(self, *args)¶
- 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)¶
FakeRectangularElevationBehavio`r is a shadow mockup for widgets. Improves performance using cached images inside `kivymd.images dir
This class cast a fake Rectangular shadow behaind the widget.
You can either use this behavior to overwrite the elevation of a prefab widget, or use it directly inside a new widget class definition.
Use this class as follows for new widgets:
class NewWidget( ThemableBehavior, FakeCircularElevationBehavior, SpecificBackgroundColorBehavior, # here you add the other front end classes for the widget front_end, ): [...]
With this method each class can draw it’s content in the canvas in the correct order, avoiding some visual errors.
FakeCircularElevationBehavior will load prefabricated textures to optimize loading times.
Also, this class allows you to overwrite real time shadows, in the sence that if you are using a standard widget, like a button, MDCard or Toolbar, you can include this class after the base class to optimize the loading times.
As an example of this flexibility:
class Custom_rectangular_Card( MDCard, FakeRectangularElevationBehavior ): [...]
Note
About rounded corners: be careful, since this behavior is a mockup and will not draw any rounded corners.
- type¶
Type of drawer. Modal type will be on top of screen. Standard type will be at left or right of screen. Also it automatically disables
close_on_click
andenable_swiping
to prevent closing drawer for standard type.type
is aOptionProperty
and defaults to modal.
- 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. It automatically sets to False for “standard” type.
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.
- enable_swiping¶
Allow to open or close navigation drawer with swipe. It automatically sets to False for “standard” type.
enable_swiping
is aBooleanProperty
and defaults to True.
- 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 aColorProperty
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”.
- 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.
- on_radius(self, instance, value)¶
- on_type(self, *args)¶