Group siblings without creating another native view. Use it when a component returns several adjacent elements.

Return a title and artist together

tsx
import { Fragment, Text, VStack } from 'kuito';

const albums = [
  { id: 'a1', title: 'Night Drive', artist: 'Ada Ray' },
  { id: 'a2', title: 'Low Tide', artist: 'The Shoals' },
];

export default function Albums() {
  return (
    <VStack gap={4}>
      {albums.map((album) => (
        <Fragment key={album.id}>
          <Text fontWeight="bold">{album.title}</Text>
          <Text>{album.artist}</Text>
        </Fragment>
      ))}
    </VStack>
  );
}

Behavior

The shorthand <>...</> works when a key is unnecessary. Use the explicit component to provide a key. A fragment cannot supply layout, padding or a background; use a stack or Box for those.

Continue

Read Primitives for a complete workflow. See the complete prop reference for types and documented defaults.

Referenz

Signaturen

ts
(props: FragmentProps): KuitoElement

Parameter

NameTypErforderlichBeschreibung
propsFragmentPropsJa—

Rückgabe

KuitoElement

Props: FragmentProps

Props (einschließlich geerbter Props) 2

NameTypErforderlichBeschreibung
childrenKuitoNodeNein—
keystring | numberNein—
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.