Tabs¶

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()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/tabs-simple-example.gif

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()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/tabs-simple-example-text.gif

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 an StringProperty and defaults to ‘’.

tab_label¶

It is the label object reference of the tab.

tab_label is an ObjectProperty and defaults to None.