tabs.py 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. """Tab components."""
  2. from typing import List, Optional, Tuple
  3. from reflex.components.component import Component
  4. from reflex.components.libs.chakra import (
  5. ChakraComponent,
  6. LiteralColorScheme,
  7. LiteralTabsVariant,
  8. LiteralTagAlign,
  9. )
  10. from reflex.vars import Var
  11. class Tabs(ChakraComponent):
  12. """An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components."""
  13. tag = "Tabs"
  14. # The alignment of the tabs ("center" | "end" | "start").
  15. align: Var[LiteralTagAlign]
  16. # The initial index of the selected tab (in uncontrolled mode).
  17. default_index: Var[int]
  18. # The id of the tab.
  19. id_: Var[str]
  20. # If true, tabs will stretch to width of the tablist.
  21. is_fitted: Var[bool]
  22. # Performance booster. If true, rendering of the tab panel's will be deferred until it is selected.
  23. is_lazy: Var[bool]
  24. # If true, the tabs will be manually activated and display its panel by pressing Space or Enter. If false, the tabs will be automatically activated and their panel is displayed when they receive focus.
  25. is_manual: Var[bool]
  26. # The orientation of the tab list.
  27. orientation: Var[str]
  28. # "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"
  29. variant: Var[LiteralTabsVariant]
  30. # The color scheme of the tabs.
  31. color_scheme: Var[LiteralColorScheme]
  32. # Index of the selected tab (in controlled mode).
  33. index: Var[int]
  34. @classmethod
  35. def create(
  36. cls, *children, items: Optional[List[Tuple[str, str]]] = None, **props
  37. ) -> Component:
  38. """Create a tab component.
  39. Args:
  40. *children: The children of the component.
  41. items: The items for the tabs component, a list of tuple (label, panel)
  42. **props: The properties of the component.
  43. Returns:
  44. The tab component
  45. """
  46. if len(children) == 0:
  47. tabs = []
  48. panels = []
  49. if not items:
  50. items = []
  51. for label, panel in items:
  52. tabs.append(Tab.create(label))
  53. panels.append(TabPanel.create(panel))
  54. children = [TabList.create(*tabs), TabPanels.create(*panels)] # type: ignore
  55. return super().create(*children, **props)
  56. class Tab(ChakraComponent):
  57. """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
  58. tag = "Tab"
  59. # If true, the Tab won't be toggleable.
  60. is_disabled: Var[bool]
  61. # If true, the Tab will be selected.
  62. is_selected: Var[bool]
  63. # The id of the tab.
  64. id_: Var[str]
  65. # The id of the panel.
  66. panel_id: Var[str]
  67. class TabList(ChakraComponent):
  68. """Wrapper for the Tab components."""
  69. tag = "TabList"
  70. class TabPanels(ChakraComponent):
  71. """Wrapper for the Tab components."""
  72. tag = "TabPanels"
  73. class TabPanel(ChakraComponent):
  74. """An element that contains the content associated with a tab."""
  75. tag = "TabPanel"