card.py 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. """Chakra Card component."""
  2. from typing import Optional
  3. from reflex.components.component import Component
  4. from reflex.components.libs.chakra import (
  5. ChakraComponent,
  6. LiteralCardVariant,
  7. LiteralColorScheme,
  8. LiteralTagSize,
  9. )
  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: Var[str]
  25. # [required] The flex direction of the card
  26. direction: Var[str]
  27. # [required] The flex distribution of the card
  28. justify: Var[str]
  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: Var[LiteralColorScheme]
  35. # The size of the Card
  36. # options: "sm" | "md" | "lg"
  37. # default: "md"
  38. size: Var[LiteralTagSize]
  39. # The variant of the Card
  40. # options: "elevated" | "outline" | "filled" | "unstyled"
  41. # default: "elevated"
  42. variant: Var[LiteralCardVariant]
  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)