Tabs#
#
See also
Tabs organize content across different screens, data sets, and other interactions.
Use tabs to group content into helpful categories
Two types: primary and secondary
Tabs can horizontally scroll, so a UI can have as many tabs as needed
Place tabs next to each other as peers
Primary tabs
Secondary tabs
Usage primary tabs#
Primary tabs should be used when just one set of tabs are needed.
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.tab import (
MDTabsItem,
MDTabsItemIcon,
MDTabsItemText,
MDTabsBadge,
)
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
if tab_icon == "treasure-chest":
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
MDTabsBadge(
text="99",
),
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
else:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.divider import MDDivider
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
MDTabsItem,
MDTabsItemIcon,
MDTabsItemText,
MDTabsBadge,
MDTabsPrimary,
)
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
if tab_icon == "treasure-chest":
self.root.get_ids().tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
MDTabsBadge(
text="99",
),
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
else:
self.root.get_ids().tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
self.root.get_ids().tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return (
MDScreen(
MDTabsPrimary(
MDDivider(),
id="tabs",
pos_hint={"center_x": .5, "center_y": .5},
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
Example().run()
Anatomy primary tabs#
Usage secondary tabs#
Secondary tabs are necessary when a screen requires more than one level of tabs. These tabs use a simpler style of indicator, but their function is identical to primary tabs.
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.tab import (
MDTabsItemIcon,
MDTabsItemText,
MDTabsBadge, MDTabsItemSecondary,
)
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsSecondary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
if tab_icon == "treasure-chest":
self.root.ids.tabs.add_widget(
MDTabsItemSecondary(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
MDTabsBadge(
text="5",
),
)
)
else:
self.root.ids.tabs.add_widget(
MDTabsItemSecondary(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.divider import MDDivider
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
MDTabsItemIcon,
MDTabsItemText,
MDTabsBadge,
MDTabsSecondary,
MDTabsItemSecondary,
)
class Example(MDApp):
def on_start(self):
for tab_icon, tab_name in {
"airplane": "Flights",
"treasure-chest": "Trips",
"compass-outline": "Explore",
}.items():
if tab_icon == "treasure-chest":
self.root.get_ids().tabs.add_widget(
MDTabsItemSecondary(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
MDTabsBadge(
text="5",
),
)
)
else:
self.root.get_ids().tabs.add_widget(
MDTabsItemSecondary(
MDTabsItemIcon(
icon=tab_icon,
),
MDTabsItemText(
text=tab_name,
),
)
)
self.root.get_ids().tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return (
MDScreen(
MDTabsSecondary(
MDDivider(),
id="tabs",
pos_hint={"center_x": .5, "center_y": .5},
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
Example().run()
Anatomy secondary tabs#
Behaviors#
Scrollable tabs#
When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsItemText, MDTabsItem
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
size_hint_x: .6
allow_stretch: False
label_only: True
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_name in [
"Moscow",
"Saint Petersburg",
"Novosibirsk",
"Yekaterinburg",
"Kazan",
"Nizhny Novgorod",
"Chelyabinsk",
]:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.tabs.switch_tab(text="Moscow")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.divider import MDDivider
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
MDTabsItemText,
MDTabsPrimary,
MDTabsItem,
)
class Example(MDApp):
def on_start(self):
for tab_name in [
"Moscow",
"Saint Petersburg",
"Novosibirsk",
"Yekaterinburg",
"Kazan",
"Nizhny Novgorod",
"Chelyabinsk",
]:
self.root.get_ids().tabs.add_widget(
MDTabsItem(
MDTabsItemText(
text=tab_name,
),
)
)
self.root.get_ids().tabs.switch_tab(text="Moscow")
def build(self):
self.theme_cls.primary_palette = "Olive"
return (
MDScreen(
MDTabsPrimary(
MDDivider(),
id="tabs",
pos_hint={"center_x": .5, "center_y": .5},
size_hint_x=0.6,
allow_stretch=False,
label_only=True,
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
Example().run()
Fixed tabs#
Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as between transportation methods in a map. To navigate between fixed tabs, tap an individual tab, or swipe left or right in the content area.
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsItemText, MDTabsItem
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
pos_hint: {"center_x": .5, "center_y": .5}
size_hint_x: .6
allow_stretch: True
label_only: True
MDDivider:
'''
class Example(MDApp):
def on_start(self):
for tab_name in [
"Moscow", "Saint Petersburg", "Novosibirsk"
]:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemText(
text=tab_name,
),
)
)
self.root.ids.tabs.switch_tab(text="Moscow")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.divider import MDDivider
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
MDTabsItemText,
MDTabsPrimary,
MDTabsItem,
)
class Example(MDApp):
def on_start(self):
for tab_name in [
"Moscow", "Saint Petersburg", "Novosibirsk"
]:
self.root.get_ids().tabs.add_widget(
MDTabsItem(
MDTabsItemText(
text=tab_name,
),
)
)
self.root.get_ids().tabs.switch_tab(text="Moscow")
def build(self):
self.theme_cls.primary_palette = "Olive"
return (
MDScreen(
MDTabsPrimary(
MDDivider(),
id="tabs",
pos_hint={"center_x": .5, "center_y": .5},
size_hint_x=0.6,
allow_stretch=True,
label_only=True,
),
md_bg_color=self.theme_cls.backgroundColor,
)
)
Example().run()
Tap a tab#
Navigate to a tab by tapping on it.
Swipe within the content area#
To navigate between tabs, users can swipe left or right within the content area.
Switching tab#
You can switch tabs by icon name, by tab name, and by tab objects:
instance_tabs.switch_tab(icon="airplane")
instance_tabs.switch_tab(text="Airplane")
instance_tabs.switch_tab(
instance=instance_tabs_item # MDTabsItem
)
iOS liquid glass tab bar#
See also
A tab bar lets people navigate between top-level sections of your app.
KivyMD for iOS provides horizontal and vertical tab bars:
Anatomy horizontal tab bar#
Example vertical tab bar#
from kivymd.app import MDApp
from kivymd.uix.button import IOSIconButton
from kivymd.uix.fitimage import FitImage
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
IOSTabBarButton,
IOSTabBarItem,
IOSTabBarItemIcon,
IOSTabBarLayout,
IOSTabBarVertical,
)
class TabBarVertical(IOSTabBarVertical):
def __init__(self, **kwargs):
super().__init__(**kwargs)
items_data = [
"home",
"compass",
"bell",
"account",
]
for icon in items_data:
item = IOSTabBarItem(
IOSTabBarItemIcon(
icon=icon
),
inactive_color=self.theme_cls.primaryColor,
active_color="#CD853F",
)
self.add_widget(item)
class HomeScreen(MDScreen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
image = FitImage(
source="bg.png",
opacity=0.3,
)
self.add_widget(image)
self.tab_bar = TabBarVertical(
target_background=image,
blur_amount=20,
)
search_btn = IOSTabBarButton(
IOSIconButton(
icon="magnify"
),
size=(self.tab_bar.width, self.tab_bar.width),
border_radius=[self.tab_bar.width / 2] * 4,
target_background=image,
on_release=lambda btn: print("Search pressed!"),
)
self.tab_layout = IOSTabBarLayout(
orientation="vertical",
pos_hint={"center_x": 0.5, "center_y": 0.5},
size_hint=(None, None),
)
self.tab_layout.add_widget(self.tab_bar)
self.tab_layout.add_widget(search_btn)
self.add_widget(self.tab_layout)
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Olive"
return HomeScreen()
if __name__ == "__main__":
MainApp().run()
from kivymd.app import MDApp
from kivymd.uix.button import IOSIconButton
from kivymd.uix.fitimage import FitImage
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
IOSTabBarButton,
IOSTabBarItem,
IOSTabBarItemIcon,
IOSTabBarItemText,
IOSTabBarLayout,
IOSTabBarVertical,
)
class TabBarVertical(IOSTabBarVertical):
def __init__(self, **kwargs):
super().__init__(**kwargs)
items_data = [
"home",
"compass",
"bell",
"account",
]
self.widgets = [
IOSTabBarItem(
IOSTabBarItemIcon(
icon=icon
),
inactive_color=self.theme_cls.primaryColor,
active_color="#CD853F",
) for icon in items_data
]
class HomeScreen(MDScreen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
image = FitImage(
source="bg.png",
opacity=0.3,
)
self.tab_bar = TabBarVertical(
target_background=image,
blur_amount=20,
)
search_btn = IOSTabBarButton(
IOSIconButton(
icon="magnify"
),
size=(self.tab_bar.width, self.tab_bar.width),
border_radius=[self.tab_bar.width / 2] * 4,
on_release=lambda btn: print("Search pressed!"),
)
self.widgets = [
image,
IOSTabBarLayout(
self.tab_bar,
search_btn,
orientation="vertical",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
]
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Olive"
return HomeScreen()
if __name__ == "__main__":
MainApp().run()
Note
In vertical mode, the text for Tab Bar elements is ignored.
Only the element icon will be added.
Example horizontal tab bar#
from kivymd.app import MDApp
from kivymd.uix.button import IOSIconButton
from kivymd.uix.fitimage import FitImage
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
IOSTabBarButton,
IOSTabBarHorizontal,
IOSTabBarItem,
IOSTabBarItemIcon,
IOSTabBarItemText,
IOSTabBarLayout,
)
class TabBarHorizontal(IOSTabBarHorizontal):
def __init__(self, **kwargs):
super().__init__(**kwargs)
items_data = [
("home", "Home"),
("compass", "View"),
("bell", "Message"),
("account", "Account"),
]
for icon, text in items_data:
item = IOSTabBarItem(
IOSTabBarItemIcon(
icon=icon
),
IOSTabBarItemText(
text=text
),
inactive_color=self.theme_cls.primaryColor,
active_color="#CD853F",
)
self.add_widget(item)
class HomeScreen(MDScreen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
image = FitImage(
source="bg.png",
opacity=0.3,
)
self.add_widget(image)
self.tab_bar = TabBarHorizontal(
target_background=image,
blur_amount=20,
)
search_btn = IOSTabBarButton(
IOSIconButton(
icon="magnify"
),
size=(self.tab_bar.height, self.tab_bar.height),
border_radius=[self.tab_bar.height / 2] * 4,
target_background=image,
on_release=lambda btn: print("Search pressed!"),
)
self.tab_layout = IOSTabBarLayout(
orientation="horizontal",
pos_hint={"center_x": 0.5, "center_y": 0.5},
size_hint=(None, None),
)
self.tab_layout.add_widget(self.tab_bar)
self.tab_layout.add_widget(search_btn)
self.add_widget(self.tab_layout)
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Olive"
return HomeScreen()
if __name__ == "__main__":
MainApp().run()
from kivymd.app import MDApp
from kivymd.uix.button import IOSIconButton
from kivymd.uix.fitimage import FitImage
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
IOSTabBarButton,
IOSTabBarItem,
IOSTabBarItemIcon,
IOSTabBarItemText,
IOSTabBarLayout,
IOSTabBarHorizontal,
)
class TabBarHorizontal(IOSTabBarHorizontal):
def __init__(self, **kwargs):
super().__init__(**kwargs)
items_data = [
("home", "Home"),
("compass", "View"),
("bell", "Message"),
("account", "Account"),
]
self.widgets = [
IOSTabBarItem(
IOSTabBarItemIcon(
icon=icon
),
IOSTabBarItemText(
text=text
),
inactive_color=self.theme_cls.primaryColor,
active_color="#CD853F",
) for icon, text in items_data
]
class HomeScreen(MDScreen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
image = FitImage(
source="bg.png",
opacity=0.3,
)
self.tab_bar = TabBarHorizontal(
target_background=image,
blur_amount=20,
)
search_btn = IOSTabBarButton(
IOSIconButton(
icon="magnify"
),
size=(self.tab_bar.height, self.tab_bar.height),
border_radius=[self.tab_bar.height / 2] * 4,
on_release=lambda btn: print("Search pressed!"),
)
self.widgets = [
image,
IOSTabBarLayout(
self.tab_bar,
search_btn,
orientation="horizontal",
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
]
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Olive"
return HomeScreen()
if __name__ == "__main__":
MainApp().run()
Example tab bar event#
def on_ios_tab_switch(
self,
tab_bar: Union[IOSTabBarVertical, IOSTabBarHorizontal],
tab_item: IOSTabBarItem,
item_index: int,
):
...
IOSTabBarVertical(
on_tab_switch=lambda *args: self.on_ios_tab_switch(*args)
)
API break#
1.2.0 version#
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.icon_definitions import md_icons
KV = '''
MDBoxLayout:
MDTabs:
id: tabs
on_ref_press: app.on_ref_press(*args)
<Tab>
MDIconButton:
id: icon
icon: app.icons[0]
icon_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Tab(MDFloatLayout, 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.tabs.add_widget(
Tab(title=name_tab, icon=name_tab)
)
Example().run()
2.0.0 version#
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.icon_definitions import md_icons
from kivymd.uix.label import MDIcon
from kivymd.uix.tab import MDTabsItem, MDTabsItemIcon
from kivymd.uix.tab.tab import MDTabsItemText
KV = '''
MDScreen:
md_bg_color: self.theme_cls.backgroundColor
MDTabsPrimary:
id: tabs
allow_stretch: False
pos_hint: {"center_x": .5, "center_y": .5}
MDDivider:
MDTabsCarousel:
id: related_content
size_hint_y: None
height: root.height - tabs.ids.tab_scroll.height
'''
class Example(MDApp):
def on_start(self):
for name_tab in list(md_icons.keys())[15:30]:
self.root.ids.tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=name_tab,
),
MDTabsItemText(
text=name_tab,
),
)
)
self.root.ids.related_content.add_widget(
MDIcon(
icon=name_tab,
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
self.root.ids.tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return Builder.load_string(KV)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.divider import MDDivider
from kivymd.uix.label import MDIcon
from kivymd.uix.screen import MDScreen
from kivymd.uix.tab import (
MDTabsItemIcon,
MDTabsItemText,
MDTabsPrimary,
MDTabsCarousel,
MDTabsItem,
)
class Example(MDApp):
def on_start(self):
tabs = self.root.get_ids().tabs
related_content = self.root.get_ids().related_content
related_content.height = (
self.root.height - tabs.ids.tab_scroll.height
)
for name_tab in list(md_icons.keys())[15:30]:
tabs.add_widget(
MDTabsItem(
MDTabsItemIcon(
icon=name_tab,
),
MDTabsItemText(
text=name_tab,
),
)
)
related_content.add_widget(
MDIcon(
icon=name_tab,
pos_hint={"center_x": 0.5, "center_y": 0.5},
)
)
tabs.switch_tab(icon="airplane")
def build(self):
self.theme_cls.primary_palette = "Olive"
return MDScreen(
MDTabsPrimary(
MDDivider(),
MDTabsCarousel(
id="related_content",
size_hint_y=None,
),
id="tabs",
pos_hint={"center_x": 0.5, "center_y": 0.5},
allow_stretch=False,
),
md_bg_color=self.theme_cls.backgroundColor,
)
Example().run()
API - kivymd.uix.tab.tab#
- class kivymd.uix.tab.tab.MDTabsBadge(*args, **kwargs)#
Implements an badge for secondary tabs.
Added in version 2.0.0.
For more information, see in the
MDBadgeclass documentation.
- class kivymd.uix.tab.tab.MDTabsCarousel(*args, **kwargs)#
Implements a carousel for user-generated content.
For more information, see in the
Carouselclass documentation.- lock_swiping#
If True - disable switching tabs by swipe.
lock_swipingis anBooleanPropertyand defaults to False.
- on_touch_move(touch) str | bool | None#
Receive a touch move event. The touch is in parent coordinates.
See
on_touch_down()for more information.
- add_widget(widget, *args, **kwargs)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.tab.tab.MDTabsItemText(*args, **kwargs)#
Implements an label for the
MDTabsItemclass.For more information, see in the
MDLabelclass documentation.Added in version 2.0.0.
- class kivymd.uix.tab.tab.MDTabsItemIcon(*args, **kwargs)#
Implements an icon for the
MDTabsItemclass.For more information, see in the
MDIconclass documentation.Added in version 2.0.0.
- class kivymd.uix.tab.tab.MDTabsItem(*args, **kwargs)#
Implements a item with an icon and text for
MDTabsPrimaryclass.Added in version 2.0.0.
For more information, see in the
MDTabsItemBaseandBoxLayoutclasses documentation.- add_widget(widget, *args, **kwargs)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.tab.tab.MDTabsPrimary(*args, **kwargs)#
Tabs primary class.
Changed in version 2.0.0: Rename from MDTabs to MDTabsPrimary class.
For more information, see in the
DeclarativeBehaviorandThemableBehaviorandBoxLayoutclasses documentation.- Events:
- on_tab_switch
Fired when switching tabs.
- md_bg_color#
The background color of the widget.
md_bg_coloris anColorPropertyand defaults to None.
- label_only#
Tabs with a label only or with an icon and a label.
Added in version 2.0.0.
label_onlyis anBooleanPropertyand defaults to False.
- allow_stretch#
Whether to stretch tabs to the width of the panel.
allow_stretchis anBooleanPropertyand defaults to True.
- lock_swiping#
If True - disable switching tabs by swipe.
lock_swipingis anBooleanPropertyand defaults to False.
- anim_duration#
Duration of the slide animation.
anim_durationis anNumericPropertyand defaults to 0.2.
- indicator_anim#
Tab indicator animation. If you want use animation set it to
True.Changed in version 2.0.0: Rename from tab_indicator_anim to indicator_anim attribute.
indicator_animis anBooleanPropertyand defaults to True.
- indicator_radius#
Radius of the tab indicator.
Added in version 2.0.0.
indicator_radiusis anVariableListPropertyand defaults to [dp(2), dp(2), 0, 0].
- indicator_height#
Height of the tab indicator.
Changed in version 2.0.0: Rename from tab_indicator_height to indicator_height attribute.
indicator_heightis anNumericPropertyand defaults to ‘4dp’.
- indicator_duration#
The duration of the animation of the indicator movement when switching tabs.
Added in version 2.0.0.
indicator_durationis anNumericPropertyand defaults to 0.5.
- indicator_transition#
The transition name of animation of the indicator movement when switching tabs.
Added in version 2.0.0.
indicator_transitionis anStringPropertyand defaults to `’out_expo’.
- last_scroll_x#
Is the carousel reference of the next tab/slide. When you go from ‘Tab A’ to ‘Tab B’, ‘Tab B’ will be the target tab/slide of the carousel.
last_scroll_xis anAliasProperty.
- target#
It is the carousel reference of the next tab / slide. When you go from ‘Tab A’ to ‘Tab B’, ‘Tab B’ will be the target tab / slide of the carousel.
targetis anObjectPropertyand default to None.
- indicator#
It is the
SmoothRoundedRectangleinstruction reference of the tab indicator.indicatoris anAliasProperty.
- get_last_scroll_x()#
- get_rect_instruction()#
- add_widget(widget, *args, **kwargs)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- do_autoscroll_tabs(instance: MDTabsItem, value: float) None#
Automatically scrolls the list of tabs when swiping the carousel slide (related content).
Changed in version 2.0.0: Rename from tab_bar_autoscroll to do_autoscroll_tabs method.
- android_animation(instance: MDTabsCarousel, offset: float) None#
Fired when swiping a carousel slide (related content).
- update_indicator(x: float = 0.0, w: float = 0.0, instance: MDTabsItem = None) None#
Update position and size of the indicator.
- switch_tab(instance: MDTabsItem = None, text: str = '', icon: str = '') None#
Switches tabs by tab object/tab text/tab icon name.
- set_active_item(item: MDTabsItem) None#
Sets the active tab item.
- get_tabs_list() list#
Returns a list of
MDTabsItemobjects.Changed in version 2.0.0: Rename from get_tab_list to get_tabs_list method.
- get_slides_list() list#
Returns a list of user tab objects.
Changed in version 2.0.0: Rename from get_slides to get_slides_list method.
- get_current_tab() MDTabsItem#
Returns current tab object.
Added in version 1.0.0.
Returns the carousel slide object (related content).
Added in version 2.0.0.
- on_slide_progress(*args) None#
This event is deployed every available frame while the tab is scrolling.
- on_carousel_index(instance: MDTabsCarousel, value: int) None#
Fired when the Tab index have changed. This event is deployed by the builtin carousel of the class.
- recalculate_tab_widths() None#
Recalculates and updates the width of each tab in the tab bar.
This method ensures that all tabs are evenly distributed across the available horizontal space when allow_stretch is enabled. It is automatically called after a new tab is added.
If no tabs are present, the method exits without making changes.
- class kivymd.uix.tab.tab.MDTabsItemSecondary(*args, **kwargs)#
Implements a item with an icon and text for
MDTabsSecondaryclass.Added in version 2.0.0.
For more information, see in the
MDTabsItemBaseandAnchorLayoutclasses documentation.- add_widget(widget, *args, **kwargs)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.tab.tab.MDTabsSecondary(*args, **kwargs)#
Tabs secondary class.
Added in version 2.0.0.
For more information, see in the
MDTabsPrimaryclass documentation.- indicator_radius#
Radius of the tab indicator.
indicator_radiusis anVariableListPropertyand defaults to [0, 0, 0, 0].
- indicator_height#
Height of the tab indicator.
indicator_heightis anNumericPropertyand defaults to ‘2dp’.
- class kivymd.uix.tab.tab.IOSTabBarButton(*args, **kwargs)#
Standalone floating Liquid Glass button for use inside
IOSTabBarLayout.Typically used to create additional floating actions (e.g., search or action buttons) alongside the main tab bar.
Added in version 2.0.1.
For more information, see in the
IOSButtonclass documentation.- add_widget(widget, index=0, canvas=None)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.tab.tab.IOSTabBarLayout(*args, **kwargs)#
Layout container for grouping
IOSTabBarVerticalorIOSTabBarVerticalwith standaloneIOSTabBarButtonwidgets.Automatically adapts orientation and passes the
target_backgroundreference to child buttons.Added in version 2.0.1.
For more information, see in the
DeclarativeBehaviorandBoxLayoutclasses documentation.- add_widget(widget, index=0, canvas=None)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.tab.tab.IOSTabBarItemIcon(*args, **kwargs)#
Icon widget for a tab bar item
IOSTabBarItem.Added in version 2.0.1.
For more information, see in the
IOSIconButtonclass documentation.
- class kivymd.uix.tab.tab.IOSTabBarItemText(*args, **kwargs)#
Text label widget for a tab bar item
IOSTabBarItem.Added in version 2.0.1.
For more information, see in the
IOSButtonTextclass documentation.
- class kivymd.uix.tab.tab.IOSTabBarIndicator(*args, **kwargs)#
Animated Liquid Glass indicator highlighting the active tab.
Added in version 2.0.1.
For more information, see in the
DeclarativeBehaviorandIOSGlassBehaviorandWidgetclasses documentation.
- class kivymd.uix.tab.tab.IOSTabBarItem(*args, **kwargs)#
Tab bar item containing an icon and/or label text.
Added in version 2.0.1.
For more information, see in the
DeclarativeBehaviorandButtonBehaviorandBoxLayoutclasses documentation.- property has_text#
Returns True if the item has a non-empty text label.
- active#
Indicates whether this tab item is currently active.
activeis aBooleanPropertyand defaults to False.
- active_color#
Color of the item’s icon and text in the active state.
active_coloris aColorPropertyand defaults to [0.0, 0.48, 1.0, 1.0] (iOS System Blue).
- inactive_color#
Color of the item’s icon and text in the inactive state.
inactive_coloris aColorPropertyand defaults to [0.45, 0.45, 0.47, 1.0] (iOS Secondary Label).
- target_background#
Background widget used to compute the Liquid Glass blur effect.
target_backgroundis anObjectPropertyand defaults to None.
- add_widget(widget, index=0, canvas=None)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.tab.tab.IOSTabBarHorizontal(**kwargs)#
Horizontal floating Liquid Glass tab bar for bottom navigation.
Added in version 2.0.1.
For more information, see in the
DeclarativeBehaviorandIOSGlassBehaviorandIOSBaseTabBarclasses documentation.- add_widget(widget, index=0, canvas=None)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- do_layout(*largs)#
This function is called when a layout is called by a trigger. If you are writing a new Layout subclass, don’t call this function directly but use
_trigger_layout()instead.The function is by default called before the next frame, therefore the layout isn’t updated immediately. Anything depending on the positions of e.g. children should be scheduled for the next frame.
Added in version 1.0.8.
- select_tab(index_or_item)#
Programmatically switches active tab by index or
IOSTabBarIteminstance.
- class kivymd.uix.tab.tab.IOSTabBarVertical(**kwargs)#
Vertical floating Liquid Glass tab bar for bottom navigation.
Added in version 2.0.1.
For more information, see in the
DeclarativeBehaviorandIOSGlassBehaviorandIOSBaseTabBarclasses documentation.- do_layout(*largs)#
This function is called when a layout is called by a trigger. If you are writing a new Layout subclass, don’t call this function directly but use
_trigger_layout()instead.The function is by default called before the next frame, therefore the layout isn’t updated immediately. Anything depending on the positions of e.g. children should be scheduled for the next frame.
Added in version 1.0.8.
- add_widget(widget, index=0, canvas=None)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
Added in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
Added in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- select_tab(index_or_item)#
Programmatically switches active tab by index or
IOSTabBarIteminstance.