You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.9 KiB
94 lines
3.9 KiB
from __future__ import annotations |
|
|
|
from typing import Any, Callable, Optional, Union |
|
|
|
from .. import globals # pylint: disable=redefined-builtin |
|
from .mixins.disableable_element import DisableableElement |
|
from .mixins.value_element import ValueElement |
|
|
|
|
|
class Tabs(ValueElement): |
|
|
|
def __init__(self, *, |
|
value: Union[Tab, TabPanel, None] = None, |
|
on_change: Optional[Callable[..., Any]] = None, |
|
) -> None: |
|
"""Tabs |
|
|
|
This element represents `Quasar's QTabs <https://quasar.dev/vue-components/tabs#qtabs-api>`_ component. |
|
It contains individual tabs. |
|
|
|
:param value: `ui.tab`, `ui.tab_panel`, or 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) |
|
|
|
def _value_to_model_value(self, value: Any) -> Any: |
|
return value._props['name'] if isinstance(value, (Tab, TabPanel)) else value # pylint: disable=protected-access |
|
|
|
|
|
class Tab(DisableableElement): |
|
|
|
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 `ui.tabs` element. |
|
|
|
:param name: name of the tab (will be the value of the `ui.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__(tag='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: Union[Tab, TabPanel, None] = None, |
|
on_change: Optional[Callable[..., Any]] = None, |
|
animated: bool = True, |
|
keep_alive: 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. |
|
|
|
To avoid issues with dynamic elements when switching tabs, |
|
this element uses Vue's `keep-alive <https://vuejs.org/guide/built-ins/keep-alive.html>`_ component. |
|
If client-side performance is an issue, you can disable this feature. |
|
|
|
:param tabs: the `ui.tabs` element that controls this element |
|
:param value: `ui.tab`, `ui.tab_panel`, or 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`) |
|
:param keep_alive: whether to use Vue's keep-alive component on the content (default: `True`) |
|
""" |
|
super().__init__(tag='q-tab-panels', value=value, on_value_change=on_change) |
|
tabs.bind_value(self, 'value') |
|
self._props['animated'] = animated |
|
self._props['keep-alive'] = keep_alive |
|
|
|
def _value_to_model_value(self, value: Any) -> Any: |
|
return value._props['name'] if isinstance(value, (Tab, TabPanel)) else value # pylint: disable=protected-access |
|
|
|
|
|
class TabPanel(DisableableElement): |
|
|
|
def __init__(self, name: Union[Tab, 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: `ui.tab` or the name of a tab element |
|
""" |
|
super().__init__(tag='q-tab-panel') |
|
self._props['name'] = name._props['name'] if isinstance(name, Tab) else name
|
|
|