LayoutProps — Kuito Documentação

Utilização

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

Declaração do tipo

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

Membros 36

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

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.