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

use direction props from radix.Flex (#2696)

Browse Source 
* use direction props from radix.Flex

* override direction props

* test no var

* confirm no var

* add comment for reflex-web
This commit is contained in:
Thomas Brandého 2024-02-22 22:33:10 +01:00 committed by GitHub
parent b849c8d9d8
commit 05044ed912
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
reflex/components/radix/themes/layout/stack.py
View File

@ -3,9 +3,10 @@
from __future__ import annotations from __future__ import annotations
from reflex.components.component import Component from reflex.components.component import Component
from reflex.vars import Var
from ..base import LiteralAlign, LiteralSpacing from ..base import LiteralAlign, LiteralSpacing
from .flex import Flex from .flex import Flex, LiteralFlexDirection
class Stack(Flex): class Stack(Flex):
@ -41,12 +42,12 @@ class Stack(Flex):
class VStack(Stack): class VStack(Stack):
"""A vertical stack component.""" """A vertical stack component."""
def _apply_theme(self, theme: Component): # The direction of the stack.
self.style.update({"flex_direction": "column"}) direction: Var[LiteralFlexDirection] = "column" # type: ignore
class HStack(Stack): class HStack(Stack):
"""A horizontal stack component.""" """A horizontal stack component."""
def _apply_theme(self, theme: Component): # The direction of the stack.
self.style.update({"flex_direction": "row"}) direction: Var[LiteralFlexDirection] = "row" # type: ignore

11
reflex/components/radix/themes/layout/stack.pyi
View File

@ -8,8 +8,9 @@ from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from reflex.components.component import Component from reflex.components.component import Component
from reflex.vars import Var
from ..base import LiteralAlign, LiteralSpacing from ..base import LiteralAlign, LiteralSpacing
from .flex import Flex from .flex import Flex, LiteralFlexDirection
class Stack(Flex): class Stack(Flex):
@overload @overload
@ -178,13 +179,13 @@ class VStack(Stack):
*children, *children,
spacing: Optional[LiteralSpacing] = "2", spacing: Optional[LiteralSpacing] = "2",
align: Optional[LiteralAlign] = "start", align: Optional[LiteralAlign] = "start",
as_child: Optional[Union[Var[bool], bool]] = None,
direction: Optional[ direction: Optional[
Union[ Union[
Var[Literal["row", "column", "row-reverse", "column-reverse"]], Var[Literal["row", "column", "row-reverse", "column-reverse"]],
Literal["row", "column", "row-reverse", "column-reverse"], Literal["row", "column", "row-reverse", "column-reverse"],
] ]
] = None, ] = None,
as_child: Optional[Union[Var[bool], bool]] = None,
justify: Optional[ justify: Optional[
Union[ Union[
Var[Literal["start", "center", "end", "between"]], Var[Literal["start", "center", "end", "between"]],
@ -296,8 +297,8 @@ class VStack(Stack):
*children: The children of the stack. *children: The children of the stack.
spacing: The spacing between each stack item. spacing: The spacing between each stack item.
align: The alignment of the stack items. align: The alignment of the stack items.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse" wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
access_key: Provides a hint for generating a keyboard shortcut for the current element. access_key: Provides a hint for generating a keyboard shortcut for the current element.
@ -337,13 +338,13 @@ class HStack(Stack):
*children, *children,
spacing: Optional[LiteralSpacing] = "2", spacing: Optional[LiteralSpacing] = "2",
align: Optional[LiteralAlign] = "start", align: Optional[LiteralAlign] = "start",
as_child: Optional[Union[Var[bool], bool]] = None,
direction: Optional[ direction: Optional[
Union[ Union[
Var[Literal["row", "column", "row-reverse", "column-reverse"]], Var[Literal["row", "column", "row-reverse", "column-reverse"]],
Literal["row", "column", "row-reverse", "column-reverse"], Literal["row", "column", "row-reverse", "column-reverse"],
] ]
] = None, ] = None,
as_child: Optional[Union[Var[bool], bool]] = None,
justify: Optional[ justify: Optional[
Union[ Union[
Var[Literal["start", "center", "end", "between"]], Var[Literal["start", "center", "end", "between"]],
@ -455,8 +456,8 @@ class HStack(Stack):
*children: The children of the stack. *children: The children of the stack.
spacing: The spacing between each stack item. spacing: The spacing between each stack item.
align: The alignment of the stack items. align: The alignment of the stack items.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse" wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
access_key: Provides a hint for generating a keyboard shortcut for the current element. access_key: Provides a hint for generating a keyboard shortcut for the current element.