laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add style for orientation=vertical in tabs (#3332)

Browse Source
This commit is contained in:
Thomas Brandého 2024-05-22 01:21:46 +02:00 committed by GitHub
parent d40d992670
commit 4bda3eb233
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 251 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
reflex/components/datadisplay/code.py
View File

@ -493,7 +493,7 @@ class CodeBlock(Component):
else:
return code_block
def add_style(self) -> Style | None:
def add_style(self):
"""Add style to the component."""
self.custom_style.update(self.style)

2
reflex/components/datadisplay/code.pyi
View File

@ -1111,6 +1111,6 @@ class CodeBlock(Component):
The text component.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self): ...
@staticmethod
def convert_theme_name(theme) -> str: ...

154
reflex/components/radix/primitives/accordion.py
View File

@ -59,7 +59,7 @@ class AccordionComponent(RadixPrimitiveComponent):
# The variant of the component.
variant: Var[LiteralAccordionVariant]
def add_style(self) -> Style | None:
def add_style(self):
"""Add style to the component."""
if self.color_scheme is not None:
self.custom_attrs["data-accent-color"] = self.color_scheme
@ -250,43 +250,41 @@ class AccordionItem(AccordionComponent):
return super().create(*children, value=value, **props, class_name=cls_name)
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
return Style(
{
"overflow": "hidden",
"width": "100%",
"margin_top": "1px",
return {
"overflow": "hidden",
"width": "100%",
"margin_top": "1px",
"border_top": divider_style,
"&:first-child": {
"margin_top": 0,
"border_top": 0,
"border_top_left_radius": "var(--radius-4)",
"border_top_right_radius": "var(--radius-4)",
},
"&:last-child": {
"border_bottom_left_radius": "var(--radius-4)",
"border_bottom_right_radius": "var(--radius-4)",
},
"&:focus-within": {
"position": "relative",
"z_index": 1,
},
_inherited_variant_selector("ghost", "&:first-child"): {
"border_radius": 0,
"border_top": divider_style,
"&:first-child": {
"margin_top": 0,
"border_top": 0,
"border_top_left_radius": "var(--radius-4)",
"border_top_right_radius": "var(--radius-4)",
},
"&:last-child": {
"border_bottom_left_radius": "var(--radius-4)",
"border_bottom_right_radius": "var(--radius-4)",
},
"&:focus-within": {
"position": "relative",
"z_index": 1,
},
_inherited_variant_selector("ghost", "&:first-child"): {
"border_radius": 0,
"border_top": divider_style,
},
_inherited_variant_selector("ghost", "&:last-child"): {
"border_radius": 0,
"border_bottom": divider_style,
},
}
)
},
_inherited_variant_selector("ghost", "&:last-child"): {
"border_radius": 0,
"border_bottom": divider_style,
},
}
class AccordionHeader(AccordionComponent):
@ -314,13 +312,13 @@ class AccordionHeader(AccordionComponent):
return super().create(*children, class_name=cls_name, **props)
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style({"display": "flex"})
return {"display": "flex"}
class AccordionTrigger(AccordionComponent):
@ -348,44 +346,42 @@ class AccordionTrigger(AccordionComponent):
return super().create(*children, class_name=cls_name, **props)
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"color": color("accent", 11),
"font_size": "1.1em",
"line_height": 1,
"justify_content": "space-between",
"align_items": "center",
"flex": 1,
"display": "flex",
"padding": "var(--space-3) var(--space-4)",
"width": "100%",
"box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
"&[data-state='open'] > .AccordionChevron": {
"transform": "rotate(180deg)",
},
return {
"color": color("accent", 11),
"font_size": "1.1em",
"line_height": 1,
"justify_content": "space-between",
"align_items": "center",
"flex": 1,
"display": "flex",
"padding": "var(--space-3) var(--space-4)",
"width": "100%",
"box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
"&[data-state='open'] > .AccordionChevron": {
"transform": "rotate(180deg)",
},
"&:hover": {
"background_color": color("accent", 4),
},
"& > .AccordionChevron": {
"transition": f"transform var(--animation-duration) var(--animation-easing)",
},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
"&:hover": {
"background_color": color("accent", 4),
"background_color": color("accent", 10),
},
"& > .AccordionChevron": {
"transition": f"transform var(--animation-duration) var(--animation-easing)",
},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
"&:hover": {
"background_color": color("accent", 10),
},
"& > .AccordionChevron": {
"color": "var(--accent-contrast)",
},
},
}
)
},
}
class AccordionIcon(Icon):
@ -470,7 +466,7 @@ to {
"""
]
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
@ -486,24 +482,22 @@ to {
_var_is_string=True,
)
return Style(
{
"overflow": "hidden",
"color": color("accent", 11),
"padding_x": "var(--space-4)",
# Apply before and after content to avoid height animation jank.
"&:before, &:after": {
"content": "' '",
"display": "block",
"height": "var(--space-3)",
},
"&[data-state='open']": {"animation": slideDown},
"&[data-state='closed']": {"animation": slideUp},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
},
}
)
return {
"overflow": "hidden",
"color": color("accent", 11),
"padding_x": "var(--space-4)",
# Apply before and after content to avoid height animation jank.
"&:before, &:after": {
"content": "' '",
"display": "block",
"height": "var(--space-3)",
},
"&[data-state='open']": {"animation": slideDown},
"&[data-state='closed']": {"animation": slideUp},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
},
}
class Accordion(ComponentNamespace):

10
reflex/components/radix/primitives/accordion.pyi
View File

@ -26,7 +26,7 @@ DEFAULT_ANIMATION_DURATION = 250
DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
class AccordionComponent(RadixPrimitiveComponent):
def add_style(self) -> Style | None: ...
def add_style(self): ...
@overload
@classmethod
def create( # type: ignore
@ -520,7 +520,7 @@ class AccordionItem(AccordionComponent):
The accordion item.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
class AccordionHeader(AccordionComponent):
@overload
@ -669,7 +669,7 @@ class AccordionHeader(AccordionComponent):
The Accordion header Component.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
class AccordionTrigger(AccordionComponent):
@overload
@ -818,7 +818,7 @@ class AccordionTrigger(AccordionComponent):
The Accordion trigger Component.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
class AccordionIcon(Icon):
@overload
@ -1047,7 +1047,7 @@ class AccordionContent(AccordionComponent):
"""
...
def add_custom_code(self) -> list[str]: ...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
class Accordion(ComponentNamespace):
content = staticmethod(AccordionContent.create)

17
reflex/components/radix/primitives/form.py
View File

@ -8,7 +8,6 @@ from reflex.components.component import ComponentNamespace
from reflex.components.el.elements.forms import Form as HTMLForm
from reflex.components.radix.themes.components.text_field import TextFieldRoot
from reflex.constants.event import EventTriggers
from reflex.style import Style
from reflex.vars import Var
from .base import RadixPrimitiveComponentWithClassName
@ -38,13 +37,13 @@ class FormRoot(FormComponent, HTMLForm):
EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [],
}
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style({"width": "100%"})
return {"width": "100%"}
class FormField(FormComponent):
@ -60,13 +59,13 @@ class FormField(FormComponent):
# Flag to mark the form field as invalid, for server side validation.
server_invalid: Var[bool]
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style({"display": "grid", "margin_bottom": "10px"})
return {"display": "grid", "margin_bottom": "10px"}
class FormLabel(FormComponent):
@ -76,13 +75,13 @@ class FormLabel(FormComponent):
alias = "RadixFormLabel"
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style({"font_size": "15px", "font_weight": "500", "line_height": "35px"})
return {"font_size": "15px", "font_weight": "500", "line_height": "35px"}
class FormControl(FormComponent):
@ -149,13 +148,13 @@ class FormMessage(FormComponent):
# Forces the message to be shown. This is useful when using server-side validation.
force_match: Var[bool]
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style({"font_size": "13px", "opacity": "0.8", "color": "white"})
return {"font_size": "13px", "opacity": "0.8", "color": "white"}
class FormValidityState(FormComponent):

9
reflex/components/radix/primitives/form.pyi
View File

@ -12,7 +12,6 @@ from reflex.components.component import ComponentNamespace
from reflex.components.el.elements.forms import Form as HTMLForm
from reflex.components.radix.themes.components.text_field import TextFieldRoot
from reflex.constants.event import EventTriggers
from reflex.style import Style
from reflex.vars import Var
from .base import RadixPrimitiveComponentWithClassName
@ -96,7 +95,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
class FormRoot(FormComponent, HTMLForm):
def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -275,7 +274,7 @@ class FormRoot(FormComponent, HTMLForm):
...
class FormField(FormComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -358,7 +357,7 @@ class FormField(FormComponent):
...
class FormLabel(FormComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -532,7 +531,7 @@ LiteralMatcher = Literal[
]
class FormMessage(FormComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore

49
reflex/components/radix/primitives/progress.py
View File

@ -2,14 +2,13 @@
from __future__ import annotations
from typing import Optional
from typing import Any, Optional
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
from reflex.style import Style
from reflex.vars import Var
@ -28,7 +27,7 @@ class ProgressRoot(ProgressComponent):
# Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
radius: Var[LiteralRadius]
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
@ -37,17 +36,15 @@ class ProgressRoot(ProgressComponent):
if self.radius is not None:
self.custom_attrs["data-radius"] = self.radius
return Style(
{
"position": "relative",
"overflow": "hidden",
"background": color("gray", 3, alpha=True),
"border_radius": "max(var(--radius-2), var(--radius-full))",
"width": "100%",
"height": "20px",
"boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
}
)
return {
"position": "relative",
"overflow": "hidden",
"background": color("gray", 3, alpha=True),
"border_radius": "max(var(--radius-2), var(--radius-full))",
"width": "100%",
"height": "20px",
"boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
}
def _exclude_props(self) -> list[str]:
return ["radius"]
@ -69,7 +66,7 @@ class ProgressIndicator(ProgressComponent):
# The color scheme of the progress indicator.
color_scheme: Var[LiteralAccentColor]
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
@ -78,19 +75,17 @@ class ProgressIndicator(ProgressComponent):
if self.color_scheme is not None:
self.custom_attrs["data-accent-color"] = self.color_scheme
return Style(
{
"background_color": color("accent", 9),
"width": "100%",
"height": "100%",
return {
"background_color": color("accent", 9),
"width": "100%",
"height": "100%",
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
"&[data_state='loading']": {
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
"&[data_state='loading']": {
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
},
"transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))", # type: ignore
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
}
)
},
"transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))", # type: ignore
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
}
def _exclude_props(self) -> list[str]:
return ["color_scheme"]

7
reflex/components/radix/primitives/progress.pyi
View File

@ -7,13 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from typing import Optional
from typing import Any, Optional
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
from reflex.style import Style
from reflex.vars import Var
class ProgressComponent(RadixPrimitiveComponentWithClassName):
@ -95,7 +94,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
...
class ProgressRoot(ProgressComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -181,7 +180,7 @@ class ProgressRoot(ProgressComponent):
...
class ProgressIndicator(ProgressComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore

103
reflex/components/radix/primitives/slider.py
View File

@ -6,7 +6,6 @@ from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.style import Style
from reflex.vars import Var
LiteralSliderOrientation = Literal["horizontal", "vertical"]
@ -59,28 +58,26 @@ class SliderRoot(SliderComponent):
"on_value_commit": lambda e0: [e0], # trigger when thumb is released
}
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"position": "relative",
"display": "flex",
"align_items": "center",
"user_select": "none",
"touch_action": "none",
"width": "200px",
"height": "20px",
"&[data-orientation='vertical']": {
"flex_direction": "column",
"width": "20px",
"height": "100px",
},
}
)
return {
"position": "relative",
"display": "flex",
"align_items": "center",
"user_select": "none",
"touch_action": "none",
"width": "200px",
"height": "20px",
"&[data-orientation='vertical']": {
"flex_direction": "column",
"width": "20px",
"height": "100px",
},
}
class SliderTrack(SliderComponent):
@ -89,22 +86,20 @@ class SliderTrack(SliderComponent):
tag = "Track"
alias = "RadixSliderTrack"
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"position": "relative",
"flex_grow": "1",
"background_color": "black",
"border_radius": "9999px",
"height": "3px",
"&[data-orientation='vertical']": {"width": "3px"},
}
)
return {
"position": "relative",
"flex_grow": "1",
"background_color": "black",
"border_radius": "9999px",
"height": "3px",
"&[data-orientation='vertical']": {"width": "3px"},
}
class SliderRange(SliderComponent):
@ -113,20 +108,18 @@ class SliderRange(SliderComponent):
tag = "Range"
alias = "RadixSliderRange"
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"position": "absolute",
"background_color": "white",
"height": "100%",
"&[data-orientation='vertical']": {"width": "100%"},
}
)
return {
"position": "absolute",
"background_color": "white",
"height": "100%",
"&[data-orientation='vertical']": {"width": "100%"},
}
class SliderThumb(SliderComponent):
@ -135,29 +128,27 @@ class SliderThumb(SliderComponent):
tag = "Thumb"
alias = "RadixSliderThumb"
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"display": "block",
"width": "20px",
"height": "20px",
"background_color": "black",
"box_shadow": "0 2px 10px black",
"border_radius": "10px",
"&:hover": {
"background_color": "gray",
},
"&:focus": {
"outline": "none",
"box_shadow": "0 0 0 4px gray",
},
}
)
return {
"display": "block",
"width": "20px",
"height": "20px",
"background_color": "black",
"box_shadow": "0 2px 10px black",
"border_radius": "10px",
"&:hover": {
"background_color": "gray",
},
"&:focus": {
"outline": "none",
"box_shadow": "0 0 0 4px gray",
},
}
class Slider(ComponentNamespace):

9
reflex/components/radix/primitives/slider.pyi
View File

@ -10,7 +10,6 @@ from reflex.style import Style
from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.style import Style
from reflex.vars import Var
LiteralSliderOrientation = Literal["horizontal", "vertical"]
@ -96,7 +95,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
class SliderRoot(SliderComponent):
def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -197,7 +196,7 @@ class SliderRoot(SliderComponent):
...
class SliderTrack(SliderComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -276,7 +275,7 @@ class SliderTrack(SliderComponent):
...
class SliderRange(SliderComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -355,7 +354,7 @@ class SliderRange(SliderComponent):
...
class SliderThumb(SliderComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore

46
reflex/components/radix/themes/components/tabs.py
View File

@ -4,6 +4,7 @@ from __future__ import annotations
from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.constants import EventTriggers
from reflex.vars import Var
@ -12,6 +13,8 @@ from ..base import (
RadixThemesComponent,
)
vertical_orientation_css = "&[data-orientation='vertical']"
class TabsRoot(RadixThemesComponent):
"""Set of content sections to be displayed one at a time."""
@ -41,6 +44,18 @@ class TabsRoot(RadixThemesComponent):
EventTriggers.ON_CHANGE: lambda e0: [e0],
}
def add_style(self) -> Dict[str, Any] | None:
"""Add style for the component.
Returns:
The style to add.
"""
return {
vertical_orientation_css: {
"display": "flex",
}
}
class TabsList(RadixThemesComponent):
"""Contains the triggers that sit alongside the active content."""
@ -50,6 +65,19 @@ class TabsList(RadixThemesComponent):
# Tabs size "1" - "2"
size: Var[Literal["1", "2"]]
def add_style(self):
"""Add style for the component.
Returns:
The style to add.
"""
return {
vertical_orientation_css: {
"display": "block",
"box_shadow": f"inset -1px 0 0 0 {color('gray', 5, alpha=True)}",
},
}
class TabsTrigger(RadixThemesComponent):
"""The button that activates its associated content."""
@ -86,6 +114,14 @@ class TabsTrigger(RadixThemesComponent):
def _exclude_props(self) -> list[str]:
return ["color_scheme"]
def add_style(self) -> Dict[str, Any] | None:
"""Add style for the component.
Returns:
The style to add.
"""
return {vertical_orientation_css: {"width": "100%"}}
class TabsContent(RadixThemesComponent):
"""Contains the content associated with each trigger."""
@ -95,6 +131,16 @@ class TabsContent(RadixThemesComponent):
# The value of the tab. Must be unique for each tab.
value: Var[str]
def add_style(self) -> dict[str, Any] | None:
"""Add style for the component.
Returns:
The style to add.
"""
return {
vertical_orientation_css: {"width": "100%", "margin": None},
}
class Tabs(ComponentNamespace):
"""Set of content sections to be displayed one at a time."""

7
reflex/components/radix/themes/components/tabs.pyi
View File

@ -9,12 +9,16 @@ from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.constants import EventTriggers
from reflex.vars import Var
from ..base import LiteralAccentColor, RadixThemesComponent
vertical_orientation_css = "&[data-orientation='vertical']"
class TabsRoot(RadixThemesComponent):
def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
@ -108,6 +112,7 @@ class TabsRoot(RadixThemesComponent):
...
class TabsList(RadixThemesComponent):
def add_style(self): ...
@overload
@classmethod
def create( # type: ignore
@ -330,8 +335,10 @@ class TabsTrigger(RadixThemesComponent):
The TabsTrigger Component.
"""
...
def add_style(self) -> Dict[str, Any] | None: ...
class TabsContent(RadixThemesComponent):
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore

16
reflex/components/radix/themes/layout/center.py
View File

@ -2,7 +2,7 @@
from __future__ import annotations
from reflex.style import Style
from typing import Any
from .flex import Flex
@ -10,16 +10,14 @@ from .flex import Flex
class Center(Flex):
"""A center component."""
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style that center the content.
Returns:
The style of the component.
"""
return Style(
{
"display": "flex",
"align_items": "center",
"justify_content": "center",
}
)
return {
"display": "flex",
"align_items": "center",
"justify_content": "center",
}

4
reflex/components/radix/themes/layout/center.pyi
View File

@ -7,11 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from reflex.style import Style
from typing import Any
from .flex import Flex
class Center(Flex):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore

15
reflex/components/radix/themes/layout/list.py
View File

@ -1,14 +1,13 @@
"""List components."""
from __future__ import annotations
from typing import Iterable, Literal, Optional, Union
from typing import Any, Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach
from reflex.components.el.elements.typography import Li, Ol, Ul
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var
LiteralListStyleTypeUnordered = Literal[
@ -78,18 +77,16 @@ class BaseList(Component):
style["gap"] = props["gap"]
return super().create(*children, **props)
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"direction": "column",
"list_style_position": "inside",
}
)
return {
"direction": "column",
"list_style_position": "inside",
}
class UnorderedList(BaseList, Ul):

5
reflex/components/radix/themes/layout/list.pyi
View File

@ -7,13 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from typing import Iterable, Literal, Optional, Union
from typing import Any, Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach
from reflex.components.el.elements.typography import Li, Ol, Ul
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var
LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"]
@ -157,7 +156,7 @@ class BaseList(Component):
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
class UnorderedList(BaseList, Ul):
@overload

16
reflex/components/radix/themes/layout/spacer.py
View File

@ -2,7 +2,7 @@
from __future__ import annotations
from reflex.style import Style
from typing import Any
from .flex import Flex
@ -10,16 +10,14 @@ from .flex import Flex
class Spacer(Flex):
"""A spacer component."""
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style(
{
"flex": 1,
"justify_self": "stretch",
"align_self": "stretch",
}
)
return {
"flex": 1,
"justify_self": "stretch",
"align_self": "stretch",
}

4
reflex/components/radix/themes/layout/spacer.pyi
View File

@ -7,11 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from reflex.style import Style
from typing import Any
from .flex import Flex
class Spacer(Flex):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore

4
reflex/experimental/layout.py
View File

@ -2,6 +2,8 @@
from __future__ import annotations
from typing import Any
from reflex import color, cond
from reflex.components.base.fragment import Fragment
from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
@ -40,7 +42,7 @@ class Sidebar(Box, MemoizationLeaf):
Box.create(width=props.get("width")), # spacer for layout
)
def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns: