#251 introduce tabs and tab panels

nicegui/elements/tabs.py

@@ -0,0 +1,79 @@
+from typing import Any, Callable, Optional
+
+from .. import globals
+from ..element import Element
+from .mixins.value_element import ValueElement
+
+
+class Tabs(ValueElement):
+
+    def __init__(self, *,
+                 value: Any = None,
+                 on_change: Optional[Callable] = None) -> None:
+        """Tabs
+
+        This element represents `Quasar's QTabs <https://quasar.dev/vue-components/tabs#qtabs-api>`_ component.
+        It contains individual tabs.
+
+        :param value: name of the tab to be initially selected
+        :param on_change: callback to be executed when the selected tab changes
+        """
+        super().__init__(tag='q-tabs', value=value, on_value_change=on_change)
+        self.panels: Optional[TabPanels] = None
+
+
+class Tab(Element):
+
+    def __init__(self, name: str, label: Optional[str] = None, icon: Optional[str] = None) -> None:
+        """Tab
+
+        This element represents `Quasar's QTab <https://quasar.dev/vue-components/tabs#qtab-api>`_ component.
+        It is a child of a `Tabs` element.
+
+        :param name: name of the tab (the value of the `Tabs` element)
+        :param label: label of the tab (default: `None`, meaning the same as `name`)
+        :param icon: icon of the tab (default: `None`)
+        """
+        super().__init__('q-tab')
+        self._props['name'] = name
+        self._props['label'] = label if label is not None else name
+        if icon:
+            self._props['icon'] = icon
+        self.tabs = globals.get_slot().parent
+
+
+class TabPanels(ValueElement):
+
+    def __init__(self,
+                 tabs: Tabs, *,
+                 value: Any = None,
+                 on_change: Optional[Callable] = None,
+                 animated: bool = True,
+                 ) -> None:
+        """Tab Panels
+
+        This element represents `Quasar's QTabPanels <https://quasar.dev/vue-components/tab-panels#qtabpanels-api>`_ component.
+        It contains individual tab panels.
+
+        :param tabs: the `Tabs` element that controls this element
+        :param value: name of the tab panel to be initially visible
+        :param on_change: callback to be executed when the visible tab panel changes
+        :param animated: whether the tab panels should be animated (default: `True`)
+        """
+        super().__init__(tag='q-tab-panels', value=value, on_value_change=on_change)
+        tabs.bind_value(self, 'value')
+        self._props['animated'] = animated
+
+
+class TabPanel(Element):
+
+    def __init__(self, name: str) -> None:
+        """Tab Panel
+
+        This element represents `Quasar's QTabPanel <https://quasar.dev/vue-components/tab-panels#qtabpanel-api>`_ component.
+        It is a child of a `TabPanels` element.
+
+        :param name: name of the tab panel (the value of the `TabPanels` element)
+        """
+        super().__init__('q-tab-panel')
+        self._props['name'] = name

nicegui/ui.py

@@ -44,6 +44,10 @@ from .elements.slider import Slider as slider
 from .elements.spinner import Spinner as spinner
 from .elements.switch import Switch as switch
 from .elements.table import Table as table
+from .elements.tabs import Tab as tab
+from .elements.tabs import TabPanel as tab_panel
+from .elements.tabs import TabPanels as tab_panels
+from .elements.tabs import Tabs as tabs
 from .elements.time import Time as time
 from .elements.toggle import Toggle as toggle
 from .elements.tooltip import Tooltip as tooltip