126 lines
4.2 KiB
Python
126 lines
4.2 KiB
Python
"""Container to stack elements with spacing."""
|
|
|
|
from typing import List
|
|
|
|
from pynecone.components.libs.chakra import ChakraComponent
|
|
from pynecone.vars import Var
|
|
|
|
|
|
class Grid(ChakraComponent):
|
|
"""A grid component."""
|
|
|
|
tag = "Grid"
|
|
|
|
# Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
|
|
auto_columns: Var[str]
|
|
|
|
# Shorthand prop for gridAutoFlow to specify exactly how
|
|
# auto-placed items get flowed into the grid.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)_
|
|
auto_flow: Var[str]
|
|
|
|
# Shorthand prop for gridAutoRows.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)_
|
|
auto_rows: Var[str]
|
|
|
|
# Shorthand prop for gridColumn.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)_
|
|
column: Var[str]
|
|
|
|
# Shorthand prop for gridRow.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)_
|
|
row: Var[str]
|
|
|
|
# Shorthand prop for gridTemplateColumns.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)_
|
|
template_columns: Var[str]
|
|
|
|
# Shorthand prop for gridTemplateRows.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)_
|
|
template_rows: Var[str]
|
|
|
|
|
|
class GridItem(ChakraComponent):
|
|
"""Used as a child of Grid to control the span, and start positions within the grid."""
|
|
|
|
tag = "GridItem"
|
|
|
|
# Shorthand prop for gridArea
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)_
|
|
area: Var[str]
|
|
|
|
# Shorthand prop for gridColumnEnd
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)_
|
|
col_end: Var[str]
|
|
|
|
# The column number the grid item should start.
|
|
col_start: Var[int]
|
|
|
|
# The number of columns the grid item should span.
|
|
col_span: Var[int]
|
|
|
|
# Shorthand prop for gridRowEnd
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)_
|
|
row_end: Var[str]
|
|
|
|
# The row number the grid item should start.
|
|
row_start: Var[int]
|
|
|
|
# The number of rows the grid item should span.
|
|
row_span: Var[int]
|
|
|
|
|
|
class ResponsiveGrid(ChakraComponent):
|
|
"""A responsive grid component."""
|
|
|
|
tag = "SimpleGrid"
|
|
|
|
# Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
|
|
auto_columns: Var[str]
|
|
|
|
# Shorthand prop for gridAutoFlow to specify exactly how
|
|
# auto-placed items get flowed into the grid.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)_
|
|
auto_flow: Var[str]
|
|
|
|
# Shorthand prop for gridAutoRows.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)_
|
|
auto_rows: Var[str]
|
|
|
|
# Shorthand prop for gridColumn.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)_
|
|
column: Var[str]
|
|
|
|
# Shorthand prop for gridRow.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)_
|
|
row: Var[str]
|
|
|
|
# A list that defines the number of columns for each breakpoint.
|
|
columns: Var[List[int]]
|
|
|
|
# The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
|
|
min_child_width: Var[str]
|
|
|
|
# The gap between the grid items
|
|
spacing: Var[str]
|
|
|
|
# The column gap between the grid items
|
|
spacing_x: Var[str]
|
|
|
|
# The row gap between the grid items
|
|
spacing_y: Var[str]
|
|
|
|
# Shorthand prop for gridTemplateAreas
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)_
|
|
template_areas: Var[str]
|
|
|
|
# Shorthand prop for gridTemplateColumns.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)_
|
|
template_columns: Var[str]
|
|
|
|
# Shorthand prop for gridTemplateRows.
|
|
# Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)_
|
|
template_rows: Var[str]
|