ReferenceComponentsLayout and panes
BoxProps
BoxProps component contract.
Type
export type BoxProps = TuilBoxProps;Members
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
padding | number | SpacingToken | undefined | No | The padding member uses the number | SpacingToken | undefined contract. | SpacingToken |
margin | number | SpacingToken | undefined | No | The margin member uses the number | SpacingToken | undefined contract. | SpacingToken |
children | ReactNode | No | The children member uses the ReactNode contract. | — |
position | "absolute" | "relative" | "static" | undefined | No | Controls how the element is positioned. When position is static, top, right, bottom, and left are ignored. | — |
top | string | number | undefined | No | Top offset for positioned elements. | — |
right | string | number | undefined | No | Right offset for positioned elements. | — |
bottom | string | number | undefined | No | Bottom offset for positioned elements. | — |
left | string | number | undefined | No | Left offset for positioned elements. | — |
columnGap | number | undefined | No | Size of the gap between an element's columns. | — |
rowGap | number | undefined | No | Size of the gap between an element's rows. | — |
gap | number | undefined | No | Size of the gap between an element's columns and rows. A shorthand for columnGap and rowGap. | — |
marginX | number | undefined | No | Horizontal margin. Equivalent to setting marginLeft and marginRight. | — |
marginY | number | undefined | No | Vertical margin. Equivalent to setting marginTop and marginBottom. | — |
marginTop | number | undefined | No | Top margin. | — |
marginBottom | number | undefined | No | Bottom margin. | — |
marginLeft | number | undefined | No | Left margin. | — |
marginRight | number | undefined | No | Right margin. | — |
paddingX | number | undefined | No | Horizontal padding. Equivalent to setting paddingLeft and paddingRight. | — |
paddingY | number | undefined | No | Vertical padding. Equivalent to setting paddingTop and paddingBottom. | — |
paddingTop | number | undefined | No | Top padding. | — |
paddingBottom | number | undefined | No | Bottom padding. | — |
paddingLeft | number | undefined | No | Left padding. | — |
paddingRight | number | undefined | No | Right padding. | — |
flexGrow | number | undefined | No | This property defines the ability for a flex item to grow if necessary. See flex-grow. | — |
flexShrink | number | undefined | No | It specifies the “flex shrink factor”, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row. See flex-shrink. | — |
flexDirection | "row" | "column" | "row-reverse" | "column-reverse" | undefined | No | It establishes the main-axis, thus defining the direction flex items are placed in the flex container. See flex-direction. | — |
flexBasis | string | number | undefined | No | It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. See flex-basis. | — |
flexWrap | "nowrap" | "wrap" | "wrap-reverse" | undefined | No | It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. See flex-wrap. | — |
alignItems | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | undefined | No | The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis). See align-items. | — |
alignSelf | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | "auto" | undefined | No | It makes possible to override the align-items value for specific flex items. See align-self. | — |
alignContent | "flex-start" | "center" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined | No | It defines the alignment along the cross axis when there are multiple lines of flex items (when using flex-wrap). See align-content. | — |
justifyContent | "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined | No | It defines the alignment along the main axis. See justify-content. | — |
width | string | number | undefined | No | Width of the element in spaces. You can also set it as a percentage, which will calculate the width based on the width of the parent element. | — |
height | string | number | undefined | No | Height of the element in lines (rows). You can also set it as a percentage, which will calculate the height based on the height of the parent element. | — |
minWidth | string | number | undefined | No | Sets a minimum width of the element. Percentages aren't supported yet; see https://github.com/facebook/yoga/issues/872. | — |
minHeight | string | number | undefined | No | Sets a minimum height of the element in lines (rows). You can also set it as a percentage, which will calculate the minimum height based on the height of the parent element. | — |
maxWidth | string | number | undefined | No | Sets a maximum width of the element. Percentages aren't supported yet; see https://github.com/facebook/yoga/issues/872. | — |
maxHeight | string | number | undefined | No | Sets a maximum height of the element in lines (rows). You can also set it as a percentage, which will calculate the maximum height based on the height of the parent element. | — |
aspectRatio | number | undefined | No | Defines the aspect ratio (width/height) for the element. Use it with at least one size constraint (width, height, minHeight, or maxHeight) so Ink can derive the missing dimension. | — |
display | "none" | "flex" | undefined | No | Set this property to none to hide the element. | — |
borderStyle | keyof Boxes | BoxStyle | undefined | No | Add a border with a specified style. If borderStyle is undefined (the default), no border will be added. | — |
borderTop | boolean | undefined | No | Determines whether the top border is visible. | — |
borderBottom | boolean | undefined | No | Determines whether the bottom border is visible. | — |
borderLeft | boolean | undefined | No | Determines whether the left border is visible. | — |
borderRight | boolean | undefined | No | Determines whether the right border is visible. | — |
borderColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change border color. A shorthand for setting borderTopColor, borderRightColor, borderBottomColor, and borderLeftColor. | — |
borderTopColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change the top border color. Accepts the same values as color in Text component. | — |
borderBottomColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change the bottom border color. Accepts the same values as color in Text component. | — |
borderLeftColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change the left border color. Accepts the same values as color in Text component. | — |
borderRightColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change the right border color. Accepts the same values as color in Text component. | — |
borderDimColor | boolean | undefined | No | Dim the border color. A shorthand for setting borderTopDimColor, borderBottomDimColor, borderLeftDimColor, and borderRightDimColor. | — |
borderTopDimColor | boolean | undefined | No | Dim the top border color. | — |
borderBottomDimColor | boolean | undefined | No | Dim the bottom border color. | — |
borderLeftDimColor | boolean | undefined | No | Dim the left border color. | — |
borderRightDimColor | boolean | undefined | No | Dim the right border color. | — |
borderBackgroundColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change border background color. A shorthand for setting borderTopBackgroundColor, borderRightBackgroundColor, borderBottomBackgroundColor, and borderLeftBackgroundColor. | — |
borderTopBackgroundColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change top border background color. Accepts the same values as backgroundColor in Text component. | — |
borderBottomBackgroundColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change bottom border background color. Accepts the same values as backgroundColor in Text component. | — |
borderLeftBackgroundColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change left border background color. Accepts the same values as backgroundColor in Text component. | — |
borderRightBackgroundColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Change right border background color. Accepts the same values as backgroundColor in Text component. | — |
overflow | "visible" | "hidden" | undefined | No | Behavior for an element's overflow in both directions. | — |
overflowX | "visible" | "hidden" | undefined | No | Behavior for an element's overflow in the horizontal direction. | — |
overflowY | "visible" | "hidden" | undefined | No | Behavior for an element's overflow in the vertical direction. | — |
backgroundColor | LiteralUnion<keyof import("ansi-styles").ForegroundColor, string> | undefined | No | Background color for the element. Accepts the same values as color in the <Text> component. | — |
aria-label | string | undefined | No | A label for the element for screen readers. | — |
aria-hidden | boolean | undefined | No | Hide the element from screen readers. | — |
aria-role | "button" | "checkbox" | "combobox" | "list" | "listbox" | "listitem" | "menu" | "menuitem" | "option" | "progressbar" | "radio" | "radiogroup" | "tab" | "tablist" | "table" | "textbox" | "timer" | "toolbar" | undefined | No | The role of the element. | — |
aria-state | { readonly busy?: boolean; readonly checked?: boolean; readonly disabled?: boolean; readonly expanded?: boolean; readonly multiline?: boolean; readonly multiselectable?: boolean; readonly readonly?: boolean; readonly required?: boolean; readonly selected?: boolean; } | undefined | No | The state of the element. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
className | string | undefined | No | The className member uses the string | undefined contract. | — |
layout | Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined | No | The layout member uses the Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined contract. | — |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
testId | string | undefined | No | The testId member uses the string | undefined contract. | — |
role | SemanticRole | undefined | No | The role member uses the SemanticRole | undefined contract. | SemanticRole |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
description | string | undefined | No | The description member uses the string | undefined contract. | — |
disabled | boolean | undefined | No | The disabled member uses the boolean | undefined contract. | — |
readOnly | boolean | undefined | No | The readOnly member uses the boolean | undefined contract. | — |
selected | boolean | undefined | No | The selected member uses the boolean | undefined contract. | — |
checked | boolean | undefined | No | The checked member uses the boolean | undefined contract. | — |
expanded | boolean | undefined | No | The expanded member uses the boolean | undefined contract. | — |
valueText | string | undefined | No | The valueText member uses the string | undefined contract. | — |
slots | Partial<SlotComponents<{ root: import("ink").BoxProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("ink").BoxProps; }>> | undefined contract. | BoxProps, SlotComponents |
slotProps | Partial<SlotProps<{ root: import("ink").BoxProps; }, object>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("ink").BoxProps; }, object>> | undefined contract. | BoxProps, SlotProps |