Tabs¶
See also
Tabs organize content across different screens, data sets, and other interactions.
Note
Module provides tabs in the form of icons or text.
Usage¶
To create a tab, you must create a new class that inherits from the
MDTabsBase
class and the Kivy container, in which you will create
content for the tab.
class Tab(FloatLayout, MDTabsBase):
'''Class implementing content for a tab.'''
<Tab>:
MDLabel:
text: "Content"
pos_hint: {"center_x": .5, "center_y": .5}
Tabs must be placed in the MDTabs
container:
Root:
MDTabs:
Tab:
text: "Tab 1"
Tab:
text: "Tab 1"
...
Example with tab icon¶
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivymd.icon_definitions import md_icons
KV = '''
BoxLayout:
orientation: "vertical"
MDToolbar:
title: "Example Tabs"
MDTabs:
id: android_tabs
on_tab_switch: app.on_tab_switch(*args)
<Tab>:
MDIconButton:
id: icon
icon: app.icons[0]
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Tab(FloatLayout, MDTabsBase):
'''Class implementing content for a tab.'''
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
return Builder.load_string(KV)
def on_start(self):
for name_tab in self.icons:
self.root.ids.android_tabs.add_widget(Tab(text=name_tab))
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''Called when switching tabs.
:type instance_tabs: <kivymd.uix.tab.MDTabs object>;
:param instance_tab: <__main__.Tab object>;
:param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>;
:param tab_text: text or name icon of tab;
'''
count_icon = [k for k, v in md_icons.items() if v == tab_text]
instance_tab.ids.icon.icon = count_icon[0]
Example().run()
Example with tab text¶
Note
The MDTabsBase
class has an icon parameter and, by default,
tries to find the name of the icon in the file
kivymd/icon_definitions.py
. If the name of the icon is not found,
then the name of the tab will be plain text, if found, the tab will look
like the corresponding icon.
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
KV = '''
BoxLayout:
orientation: "vertical"
MDToolbar:
title: "Example Tabs"
MDTabs:
id: android_tabs
on_tab_switch: app.on_tab_switch(*args)
<Tab>:
MDLabel:
id: label
text: "Tab 0"
halign: "center"
'''
class Tab(FloatLayout, MDTabsBase):
'''Class implementing content for a tab.'''
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
for i in range(20):
self.root.ids.android_tabs.add_widget(Tab(text=f"Tab {i}"))
def on_tab_switch(
self, instance_tabs, instance_tab, instance_tab_label, tab_text
):
'''Called when switching tabs.
:type instance_tabs: <kivymd.uix.tab.MDTabs object>;
:param instance_tab: <__main__.Tab object>;
:param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>;
:param tab_text: text or name icon of tab;
'''
instance_tab.ids.label.text = tab_text
Example().run()
API - kivymd.uix.tab
¶
-
class
kivymd.uix.tab.
MDTabsBase
(**kwargs)¶ Bases:
kivy.uix.widget.Widget
This class allow you to create a tab. You must create a new class that inherits from MDTabsBase. In this way you have total control over the views of your tabbed panel.
-
text
¶ It will be the label text of the tab.
text
is anStringProperty
and defaults to ‘’.
-
tab_label
¶ It is the label object reference of the tab.
tab_label
is anObjectProperty
and defaults to None.
-
on_text
(self, widget, text)¶
-
-
class
kivymd.uix.tab.
MDTabs
(**kwargs)¶ Bases:
kivymd.theming.ThemableBehavior
,kivy.uix.anchorlayout.AnchorLayout
You can use this class to create your own tabbed panel..
- Events
- on_tab_switch
Called when switching tabs.
-
default_tab
¶ Index of the default tab.
default_tab
is anNumericProperty
and defaults to 0.
-
tab_bar_height
¶ Height of the tab bar.
tab_bar_height
is anNumericProperty
and defaults to ‘48dp’.
-
tab_indicator_anim
¶ Tab indicator animation. If you want use animation set it to
True
.tab_indicator_anim
is anBooleanProperty
and defaults to False.
-
tab_indicator_height
¶ Height of the tab indicator.
tab_indicator_height
is anNumericProperty
and defaults to ‘2dp’.
-
anim_duration
¶ Duration of the slide animation.
anim_duration
is anNumericProperty
and defaults to 0.2.
-
anim_threshold
¶ Animation threshold allow you to change the tab indicator animation effect.
anim_threshold
is anBoundedNumericProperty
and defaults to 0.8.
-
allow_stretch
¶ If False - tabs will not stretch to full screen.
allow_stretch
is anBooleanProperty
and defaults to True.
-
background_color
¶ Background color of tabs in
rgba
format.background_color
is anListProperty
and defaults to [].
-
text_color_normal
¶ Text color of the label when it is not selected.
text_color_normal
is anListProperty
and defaults to [].
-
text_color_active
¶ Text color of the label when it is selected.
text_color_active
is anListProperty
and defaults to [].
-
elevation
¶ Tab value elevation.
See also
elevation
is anNumericProperty
and defaults to 0.
-
color_indicator
¶ Color indicator in
rgba
format.color_indicator
is anListProperty
and defaults to [].
-
callback
¶ User callback. The method will be called when the
on_ref_press
event occurs in theMDTabsLabel
class.callback
is anObjectProperty
and defaults to None.
-
on_tab_switch
(self, *args)¶ Called when switching tabs.
-
on_carousel_index
(self, carousel, index)¶
-
add_widget
(self, widget, index=0, canvas=None)¶
-
remove_widget
(self, widget)¶