Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: flex pydocs #912

Merged
merged 1 commit into from
Sep 27, 2024
Merged

docs: flex pydocs #912

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 127 additions & 4 deletions plugins/ui/src/deephaven/ui/components/flex.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
from __future__ import annotations
from typing import Any
from .basic import component_element
from ..elements import Element
from .types import (
LayoutFlex,
Direction,
Wrap,
JustifyContent,
JustifySelf,
AlignContent,
AlignItems,
AlignSelf,
DimensionValue,
Position,
CSSProperties,
)


def flex(
*children: Any,
flex: LayoutFlex | None = "auto",
direction: Direction | None = None,
wrap: Wrap | None = None,
justify_content: JustifyContent | None = None,
Expand All @@ -23,14 +27,52 @@ def flex(
gap: DimensionValue | None = "size-100",
column_gap: DimensionValue | None = None,
row_gap: DimensionValue | None = None,
flex: LayoutFlex = "auto",
flex_grow: float | None = None,
flex_shrink: float | None = None,
flex_basis: DimensionValue | None = None,
align_self: AlignSelf | None = None,
justify_self: JustifySelf | None = None,
order: int | None = None,
grid_area: str | None = None,
grid_row: str | None = None,
grid_row_start: str | None = None,
grid_row_end: str | None = None,
grid_column: str | None = None,
grid_column_start: str | None = None,
grid_column_end: str | None = None,
margin: DimensionValue | None = None,
margin_top: DimensionValue | None = None,
margin_bottom: DimensionValue | None = None,
margin_start: DimensionValue | None = None,
margin_end: DimensionValue | None = None,
margin_x: DimensionValue | None = None,
margin_y: DimensionValue | None = None,
width: DimensionValue | None = None,
height: DimensionValue | None = None,
min_width: DimensionValue | None = None,
min_height: DimensionValue | None = None,
max_width: DimensionValue | None = None,
max_height: DimensionValue | None = None,
position: Position | None = None,
top: DimensionValue | None = None,
bottom: DimensionValue | None = None,
start: DimensionValue | None = None,
end: DimensionValue | None = None,
left: DimensionValue | None = None,
right: DimensionValue | None = None,
z_index: int | None = None,
is_hidden: bool | None = None,
id: str | None = None,
UNSAFE_class_name: str | None = None,
UNSAFE_style: CSSProperties | None = None,
key: str | None = None,
):
) -> Element:
"""
Base Flex component for laying out children in a flexbox.

Args:
*children: Elements to render in the flexbox.
flex: The flex property of the flexbox.
direction: The direction in which to layout children.
wrap: Whether children should wrap when they exceed the panel's width.
justify_content: The distribution of space around items along the main axis.
Expand All @@ -39,12 +81,54 @@ def flex(
gap: The space to display between both rows and columns of children.
column_gap: The space to display between columns of children.
row_gap: The space to display between rows of children.
flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available.
flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available.
flex_basis: When used in a flex layout, specifies the initial main size of the element.
align_self: Overrides the alignItems property of a flex or grid container.
justify_self: Species how the element is justified inside a flex or grid container.
order: The layout order for the element within a flex or grid container.
grid_area: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.
grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid.
grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid.
grid_row_start: When used in a grid layout, specifies the starting row to span within the grid.
grid_row_end: When used in a grid layout, specifies the ending row to span within the grid.
grid_column_start: When used in a grid layout, specifies the starting column to span within the grid.
grid_column_end: When used in a grid layout, specifies the ending column to span within the grid.
margin: The margin for all four sides of the element.
margin_top: The margin for the top side of the element.
margin_bottom: The margin for the bottom side of the element.
margin_start: The margin for the logical start side of the element, depending on layout direction.
margin_end: The margin for the logical end side of the element, depending on layout direction.
margin_x: The margin for the left and right sides of the element.
margin_y: The margin for the top and bottom sides of the element.
width: The width of the element.
min_width: The minimum width of the element.
max_width: The maximum width of the element.
height: The height of the element.
min_height: The minimum height of the element.
max_height: The maximum height of the element.
position: The position of the element.
top: The distance from the top of the containing element.
bottom: The distance from the bottom of the containing element.
left: The distance from the left of the containing element.
right: The distance from the right of the containing element.
start: The distance from the start of the containing element, depending on layout direction.
end: The distance from the end of the containing element, depending on layout direction.
z_index: The stack order of the element.
is_hidden: Whether the element is hidden.
id: The unique identifier of the element.
UNSAFE_class_name: A CSS class to apply to the element.
UNSAFE_style: A CSS style to apply to the element.
key: A unique identifier used by React to render elements in a list


Returns:
The rendered flex box.
"""
return component_element(
"Flex",
*children,
flex=flex,
direction=direction,
wrap=wrap,
justify_content=justify_content,
Expand All @@ -53,5 +137,44 @@ def flex(
gap=gap,
column_gap=column_gap,
row_gap=row_gap,
flex=flex,
flex_grow=flex_grow,
flex_shrink=flex_shrink,
flex_basis=flex_basis,
align_self=align_self,
justify_self=justify_self,
order=order,
grid_area=grid_area,
grid_row=grid_row,
grid_row_start=grid_row_start,
grid_row_end=grid_row_end,
grid_column=grid_column,
grid_column_start=grid_column_start,
grid_column_end=grid_column_end,
margin=margin,
margin_top=margin_top,
margin_bottom=margin_bottom,
margin_start=margin_start,
margin_end=margin_end,
margin_x=margin_x,
margin_y=margin_y,
width=width,
height=height,
min_width=min_width,
min_height=min_height,
max_width=max_width,
max_height=max_height,
position=position,
top=top,
bottom=bottom,
start=start,
end=end,
left=left,
right=right,
z_index=z_index,
is_hidden=is_hidden,
id=id,
UNSAFE_class_name=UNSAFE_class_name,
UNSAFE_style=UNSAFE_style,
key=key,
)
Loading