reflexion
Ƭ Alignment: "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right"
Ƭ Dimension: "hug" | "fill" | string | number
Ƭ Direction: "vertical" | "horizontal"
Ƭ FlexProps<E>: Object
| Name | Type |
|---|---|
E |
extends HTMLElement = HTMLDivElement |
| Name | Type | Description |
|---|---|---|
Component? |
JSX.ElementType |
Container component to use to render. Default ts "div" |
align? |
Alignment |
Element container setting that sets the alignment of its children. If set, the element is considered to be a container. |
class? |
string |
Element classes. |
className? |
string |
- |
direction? |
Direction |
Element container setting that sets the flow direction of the children. If set, the element is considered to be a container. |
gap? |
Gap |
Element container setting that set the gap betwen its children. If set to "auto", the gap is evenly distributed between the children. |
height? |
Dimension |
Element height. If set to "fill", the element vertically fills the parent container. If set to "hug", it hugs the content of its children. |
maxHeight? |
Dimension |
Element maximum height. If set to "fill", the element vertically fills the parent container. If set to "hug", it hugs the content of its children. |
maxWidth? |
Dimension |
Element maximum width. If set to "fill", the element horizontally fills the parent container. If set to "hug", it hugs the content of its children. |
minHeight? |
Dimension |
Element minimum height. If set to "fill", the element vertically fills the parent container. If set to "hug", it hugs the content of its children. |
minWidth? |
Dimension |
Element minimum width. If set to "fill", the element horizontally fills the parent container. If set to "hug", it hugs the content of its children. |
noShrink? |
true |
Explicitly prevent the element from shrinking if set to true. |
overflow? |
"hidden" | "auto" |
Element overflow setting. Controlled by the scroll property. |
ref? |
Ref<E> |
- |
scroll? |
boolean |
Element container setting that enables scrolling if its content goes out of bounds. |
style? |
JSX.AllCSSProperties |
Element styles. These override any style abstracted by the other properties. |
width? |
Dimension |
Element width. If set to "fill", the element horizontally fills the parent container. If set to "hug", it hugs the content of its children. |
wrap? |
boolean |
Element container setting that sets whether containing items should wrap or not. |
Ƭ FlexableComponent: keyof JSX.IntrinsicElements & string
Ƭ Gap: "auto" | number | string
▸ Flex<E>(«destructured», ref?): Element
Creates a div element with abstracted CSS Flexbox properties.
| Name | Type |
|---|---|
E |
extends HTMLElement = HTMLDivElement |
| Name | Type |
|---|---|
«destructured» |
FlexProps<E> & Omit<HTMLAttributes<E>, keyof FlexProps> |
ref? |
Ref<E> |
Element
▸ adjustGap(style, gap): null | object
| Name | Type |
|---|---|
style |
null | object |
gap |
undefined | Gap |
null | object
▸ alignFlex(align, direction): Object
| Name | Type |
|---|---|
align |
Alignment |
direction |
Direction |
Object
| Name | Type |
|---|---|
alignItems |
string |
justifyContent |
string |
▸ flex(direction, wrap, align, overflow, gap, width?, minWidth?, maxWidth?, height?, minHeight?, maxHeight?, noShrink?): JSX.CSSProperties
| Name | Type |
|---|---|
direction |
undefined | Direction |
wrap |
boolean |
align |
undefined | Alignment |
overflow |
undefined | "auto" | "hidden" |
gap |
undefined | Gap |
width? |
Dimension |
minWidth? |
Dimension |
maxWidth? |
Dimension |
height? |
Dimension |
minHeight? |
Dimension |
maxHeight? |
Dimension |
noShrink? |
true |
JSX.CSSProperties
▸ flexDirection(direction): "row" | "column"
| Name | Type |
|---|---|
direction |
Direction |
"row" | "column"
▸ merge<A, B>(a, b?): A | A & B
| Name | Type |
|---|---|
A |
extends object |
B |
extends object |
| Name | Type |
|---|---|
a |
A |
b? |
B |
A | A & B