4206afeb7b
* style: shorthand replacements need camelCase Avoid warning on terminal and in browser console from using kebab-case CSS props with emotion. * _rename_props only replace prop name once In case the value also contains the prop name, we don't want to replace it multiple times. * pyi_generator: ignore _rename_props in create signature * Avoid shadowing CSS prop `display` and `gap` Replace usages of `gap` with `spacing` to retain Radix sizing number system, while allowing users to specify a responsive `gap` using CSS units. Remove `display` props from radix components, allowing `display` to accept responsive lists. * checkbox: apply `gap` to `flex` if provided * Remove _rename_props from .create signatures * Fix spacing prop in blank template * Fixup tests after changing style shorthand to return camelCase
45 lines
1.3 KiB
Python
45 lines
1.3 KiB
Python
"""Declarative layout and common spacing props."""
|
|
from __future__ import annotations
|
|
|
|
from typing import Dict, Literal
|
|
|
|
from reflex import el
|
|
from reflex.vars import Var
|
|
|
|
from ..base import (
|
|
LiteralAlign,
|
|
LiteralJustify,
|
|
LiteralSize,
|
|
RadixThemesComponent,
|
|
)
|
|
|
|
LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
|
|
LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
|
|
|
|
|
|
class Flex(el.Div, RadixThemesComponent):
|
|
"""Component for creating flex layouts."""
|
|
|
|
tag = "Flex"
|
|
|
|
# Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
as_child: Var[bool]
|
|
|
|
# How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
|
|
direction: Var[LiteralFlexDirection]
|
|
|
|
# Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
|
|
align: Var[LiteralAlign]
|
|
|
|
# Alignment of children along the cross axis: "start" | "center" | "end" | "between"
|
|
justify: Var[LiteralJustify]
|
|
|
|
# Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
|
|
wrap: Var[LiteralFlexWrap]
|
|
|
|
# Gap between children: "0" - "9"
|
|
spacing: Var[LiteralSize]
|
|
|
|
# Reflex maps the "spacing" prop to "gap" prop.
|
|
_rename_props: Dict[str, str] = {"spacing": "gap"}
|