LayoutProps — Kuito Documentation

Usage

Build a view wrapper that accepts layout props.

tsx

// Build a view wrapper that accepts layout props.
import { Box, type KuitoNode, type LayoutProps } from 'kuito';

// Only layout passes through: the frame keeps its own look.
function Frame(props: LayoutProps & { children?: KuitoNode }) {
  return <Box borderWidth={1} borderColor="#d1d1d6" borderRadius={8} {...props} />;
}

<Frame width="50%" aspectRatio={1} margin={8} />;

Type declaration

export interface LayoutProps {
  /** Takes the view out of layout and off screen, as CSS `display: none`. */
  hidden?: Prop<boolean>;
  padding?: Prop<LengthPercentage>;
  paddingTop?: Prop<LengthPercentage>;
  paddingRight?: Prop<LengthPercentage>;
  paddingBottom?: Prop<LengthPercentage>;
  paddingLeft?: Prop<LengthPercentage>;
  width?: Animatable<SizeValue>;
  height?: Animatable<SizeValue>;
  minWidth?: Prop<SizeValue>;
  maxWidth?: Prop<SizeValue>;
  minHeight?: Prop<SizeValue>;
  maxHeight?: Prop<SizeValue>;
  /** Width divided by height; sizes the missing side from the other. */
  aspectRatio?: Prop<number>;
  position?: Prop<'relative' | 'absolute'>;
  top?: Prop<LengthPercentageAuto>;
  right?: Prop<LengthPercentageAuto>;
  bottom?: Prop<LengthPercentageAuto>;
  left?: Prop<LengthPercentageAuto>;
  margin?: Prop<LengthPercentageAuto>;
  marginTop?: Prop<LengthPercentageAuto>;
  marginRight?: Prop<LengthPercentageAuto>;
  marginBottom?: Prop<LengthPercentageAuto>;
  marginLeft?: Prop<LengthPercentageAuto>;
  flexGrow?: Prop<number>;
  flexShrink?: Prop<number>;
  flexBasis?: Prop<SizeValue | 'content'>;
  /** A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible. */
  flex?: Prop<number>;
  alignSelf?: Prop<SelfAlignment | 'auto'>;
  /** The way lines run; unset, the parent's, and the app's first language's at the root. */
  direction?: Prop<'ltr' | 'rtl'>;
  boxSizing?: Prop<'border-box' | 'content-box'>;
  /** Padding on the side lines start from: the left in `ltr`, the right in `rtl`. */
  paddingInlineStart?: Prop<LengthPercentage>;
  /** Padding on the side lines end at: the right in `ltr`, the left in `rtl`. */
  paddingInlineEnd?: Prop<LengthPercentage>;
  /** Margin on the side lines start from: the left in `ltr`, the right in `rtl`. */
  marginInlineStart?: Prop<LengthPercentageAuto>;
  /** Margin on the side lines end at: the right in `ltr`, the left in `rtl`. */
  marginInlineEnd?: Prop<LengthPercentageAuto>;
  /** `left` in `ltr`, `right` in `rtl`. */
  insetInlineStart?: Prop<LengthPercentageAuto>;
  /** `right` in `ltr`, `left` in `rtl`. */
  insetInlineEnd?: Prop<LengthPercentageAuto>;
}

Members 36

Name	Type	Required	Description
`hidden`	`Prop<boolean>`	No	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	No	—
`paddingTop`	`Prop<LengthPercentage>`	No	—
`paddingRight`	`Prop<LengthPercentage>`	No	—
`paddingBottom`	`Prop<LengthPercentage>`	No	—
`paddingLeft`	`Prop<LengthPercentage>`	No	—
`width`	`Animatable<SizeValue>`	No	—
`height`	`Animatable<SizeValue>`	No	—
`minWidth`	`Prop<SizeValue>`	No	—
`maxWidth`	`Prop<SizeValue>`	No	—
`minHeight`	`Prop<SizeValue>`	No	—
`maxHeight`	`Prop<SizeValue>`	No	—
`aspectRatio`	`Prop<number>`	No	Width divided by height; sizes the missing side from the other.
`position`	`Prop<"relative" \| "absolute">`	No	—
`top`	`Prop<LengthPercentageAuto>`	No	—
`right`	`Prop<LengthPercentageAuto>`	No	—
`bottom`	`Prop<LengthPercentageAuto>`	No	—
`left`	`Prop<LengthPercentageAuto>`	No	—
`margin`	`Prop<LengthPercentageAuto>`	No	—
`marginTop`	`Prop<LengthPercentageAuto>`	No	—
`marginRight`	`Prop<LengthPercentageAuto>`	No	—
`marginBottom`	`Prop<LengthPercentageAuto>`	No	—
`marginLeft`	`Prop<LengthPercentageAuto>`	No	—
`flexGrow`	`Prop<number>`	No	—
`flexShrink`	`Prop<number>`	No	—
`flexBasis`	`Prop<SizeValue \| "content">`	No	—
`flex`	`Prop<number>`	No	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	No	—
`direction`	`Prop<"ltr" \| "rtl">`	No	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	No	—
`paddingInlineStart`	`Prop<LengthPercentage>`	No	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	No	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	No	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	No	`right` in `ltr`, `left` in `rtl`.

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.