tabs.py 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. """Tab components."""
  2. from pynecone.components.component import Component
  3. from pynecone.components.libs.chakra import ChakraComponent
  4. from pynecone.var import Var
  5. class Tabs(ChakraComponent):
  6. """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."""
  7. tag = "Tabs"
  8. # The alignment of the tabs ("center" | "end" | "start").
  9. align: Var[str]
  10. # The initial index of the selected tab (in uncontrolled mode).
  11. default_index: Var[int]
  12. # The id of the tab.
  13. id_: Var[str]
  14. # If true, tabs will stretch to width of the tablist.
  15. is_fitted: Var[bool]
  16. # Performance booster. If true, rendering of the tab panel's will be deferred until it is selected.
  17. is_lazy: Var[bool]
  18. # 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.
  19. is_manual: Var[bool]
  20. # The orientation of the tab list.
  21. orientation: Var[str]
  22. # "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"
  23. variant: Var[str]
  24. @classmethod
  25. def create(cls, *children, items=None, **props) -> Component:
  26. """Create a tab component.
  27. Args:
  28. children: The children of the component.
  29. items: The items for the tabs component, a list of tuple (label, panel)
  30. props: The properties of the component.
  31. Returns:
  32. The tab component
  33. """
  34. if len(children) == 0:
  35. tabs = []
  36. panels = []
  37. if not items:
  38. items = []
  39. for label, panel in items:
  40. tabs.append(Tab.create(label))
  41. panels.append(TabPanel.create(panel))
  42. children = [TabList.create(*tabs), TabPanels.create(*panels)] # type: ignore
  43. return super().create(*children, **props)
  44. class Tab(ChakraComponent):
  45. """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
  46. tag = "Tab"
  47. # If true, the Tab won't be toggleable.
  48. is_disabled: Var[bool]
  49. # If true, the Tab will be selected.
  50. is_selected: Var[bool]
  51. # The id of the tab.
  52. id_: Var[str]
  53. # The id of the panel.
  54. panel_id: Var[str]
  55. class TabList(ChakraComponent):
  56. """Wrapper for the Tab components."""
  57. tag = "TabList"
  58. class TabPanels(ChakraComponent):
  59. """Wrapper for the Tab components."""
  60. tag = "TabPanels"
  61. class TabPanel(ChakraComponent):
  62. """An element that contains the content associated with a tab."""
  63. tag = "TabPanel"