Tulip Logo IconTulip
Inline

Provider en state

Shared inline configuratie via InlineProvider en runtime state per field/cell.

Inline werkt met twee niveaus van context:

  • Config context via InlineProvider (permission, disabled)
  • State context via InlineField of InlineTableCell (status, error)

InlineProvider

Gebruik InlineProvider om meerdere inputs dezelfde defaults te geven.

<InlineProvider permission={{ project: ["update"] }}>
  {/* meerdere inline inputs */}
</InlineProvider>

Als je geen shared defaults nodig hebt, hoef je geen provider te gebruiken.

Field pattern (detail/form)

<InlineField>
  <InlineFieldLabel>Titel</InlineFieldLabel>
  <InlineStringInput ... />
  <InlineFieldError />
</InlineField>

Gebruik dit patroon waar een klassiek label + foutbericht onder input gewenst is.

Table cell pattern

<InlineTableCell>
  <InlineStringInput variant="table" ... />
  <InlineTableCellError />
</InlineTableCell>

Gebruik dit in inline tabellen om layout-shifts te vermijden.

On this page