kuito.
Commencer

LayoutProps

CSS flexbox and positioning, laid out by a port of Taffy's algorithm on both platforms (see docs/styles.md#layout).

type

Utilisation

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} />;

Déclaration du type

ts
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>;
}

Membres 36

NomTypeRequisDescription
hiddenProp<boolean>NonTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>Non—
paddingTopProp<LengthPercentage>Non—
paddingRightProp<LengthPercentage>Non—
paddingBottomProp<LengthPercentage>Non—
paddingLeftProp<LengthPercentage>Non—
widthAnimatable<SizeValue>Non—
heightAnimatable<SizeValue>Non—
minWidthProp<SizeValue>Non—
maxWidthProp<SizeValue>Non—
minHeightProp<SizeValue>Non—
maxHeightProp<SizeValue>Non—
aspectRatioProp<number>NonWidth divided by height; sizes the missing side from the other.
positionProp<"relative" | "absolute">Non—
topProp<LengthPercentageAuto>Non—
rightProp<LengthPercentageAuto>Non—
bottomProp<LengthPercentageAuto>Non—
leftProp<LengthPercentageAuto>Non—
marginProp<LengthPercentageAuto>Non—
marginTopProp<LengthPercentageAuto>Non—
marginRightProp<LengthPercentageAuto>Non—
marginBottomProp<LengthPercentageAuto>Non—
marginLeftProp<LengthPercentageAuto>Non—
flexGrowProp<number>Non—
flexShrinkProp<number>Non—
flexBasisProp<SizeValue | "content">Non—
flexProp<number>NonA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>Non—
directionProp<"ltr" | "rtl">NonThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">Non—
paddingInlineStartProp<LengthPercentage>NonPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NonPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NonMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NonMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Nonleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Nonright in ltr, left in rtl.
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.