heading.py 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. """Components for rendering heading.
  2. https://www.radix-ui.com/themes/docs/theme/typography
  3. """
  4. from __future__ import annotations
  5. from reflex.components.core.breakpoints import Responsive
  6. from reflex.components.el import elements
  7. from reflex.components.markdown.markdown import MarkdownComponentMap
  8. from reflex.vars.base import Var
  9. from ..base import LiteralAccentColor, RadixThemesComponent
  10. from .base import LiteralTextAlign, LiteralTextSize, LiteralTextTrim, LiteralTextWeight
  11. class Heading(elements.H1, RadixThemesComponent, MarkdownComponentMap):
  12. """A foundational text primitive based on the <span> element."""
  13. tag = "Heading"
  14. # Change the default rendered element for the one passed as a child, merging their props and behavior.
  15. as_child: Var[bool]
  16. # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
  17. as_: Var[str]
  18. # Text size: "1" - "9"
  19. size: Var[Responsive[LiteralTextSize]]
  20. # Thickness of text: "light" | "regular" | "medium" | "bold"
  21. weight: Var[Responsive[LiteralTextWeight]]
  22. # Alignment of text in element: "left" | "center" | "right"
  23. align: Var[Responsive[LiteralTextAlign]]
  24. # Removes the leading trim space: "normal" | "start" | "end" | "both"
  25. trim: Var[Responsive[LiteralTextTrim]]
  26. # Overrides the accent color inherited from the Theme.
  27. color_scheme: Var[LiteralAccentColor]
  28. # Whether to render the text with higher contrast color
  29. high_contrast: Var[bool]
  30. heading = Heading.create