card.py 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. """Chakra Card component."""
  2. from typing import Optional
  3. from reflex.components.chakra import (
  4. ChakraComponent,
  5. LiteralCardVariant,
  6. LiteralColorScheme,
  7. LiteralTagSize,
  8. )
  9. from reflex.components.component import Component
  10. from reflex.vars import Var
  11. class CardHeader(ChakraComponent):
  12. """The wrapper that contains a card's header."""
  13. tag = "CardHeader"
  14. class CardBody(ChakraComponent):
  15. """The wrapper that houses the card's main content."""
  16. tag = "CardBody"
  17. class CardFooter(ChakraComponent):
  18. """The footer that houses the card actions."""
  19. tag = "CardFooter"
  20. class Card(ChakraComponent):
  21. """The parent wrapper that provides context for its children."""
  22. tag = "Card"
  23. # [required] The flex alignment of the card
  24. align: Optional[Var[str]] = None
  25. # [required] The flex direction of the card
  26. direction: Optional[Var[str]] = None
  27. # [required] The flex distribution of the card
  28. justify: Optional[Var[str]] = None
  29. # The visual color appearance of the component.
  30. # options: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" |
  31. # "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" |
  32. # "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
  33. # default: "gray"
  34. color_scheme: Optional[Var[LiteralColorScheme]] = None
  35. # The size of the Card
  36. # options: "sm" | "md" | "lg"
  37. # default: "md"
  38. size: Optional[Var[LiteralTagSize]] = None
  39. # The variant of the Card
  40. # options: "elevated" | "outline" | "filled" | "unstyled"
  41. # default: "elevated"
  42. variant: Optional[Var[LiteralCardVariant]] = None
  43. @classmethod
  44. def create(
  45. cls,
  46. body: Component,
  47. *,
  48. header: Optional[Component] = None,
  49. footer: Optional[Component] = None,
  50. **props,
  51. ) -> Component:
  52. """Creates a Chakra Card with a body and optionally header and/or footer, and returns it.
  53. If header, body or footer are not already instances of Chead, Cbody or Cfoot respectively,
  54. they will be wrapped as such for layout purposes. If you want to modify their props,
  55. e.g. padding_left, you should wrap them yourself.
  56. Args:
  57. body (Component): The main content of the Card that will be created.
  58. header (Optional[Component]): The header of the Card.
  59. footer (Optional[Component]): The footer of the Card.
  60. props: The properties to be passed to the component.
  61. Returns:
  62. The `create()` method returns a Card object.
  63. """
  64. children = []
  65. param_to_component_class = (
  66. (header, CardHeader),
  67. (body, CardBody),
  68. (footer, CardFooter),
  69. )
  70. for param, component_class in param_to_component_class:
  71. if isinstance(param, component_class):
  72. children.append(param)
  73. elif param is not None:
  74. children.append(component_class.create(param))
  75. return super().create(*children, **props)