Screen

The title and toolbar configuration for the current screen.

import { LabeledContent } from '@satinhq/kit'

Example

import { LabeledContent, List, Screen, Section } from '@satinhq/kit'

function Example() {
  return (
    <Screen title="Trip" subtitle="April">
      <List id="example">
        <Section>
          <LabeledContent label="Destination" value="Kyoto" />
        </Section>
      </List>
    </Screen>
  )
}

9:41

Read the example, then change its values in the code.

Set the title

Use title to override the route title. subtitle appears under it.

Choose title display

Use titleDisplay for large, inline, inlineLarge or none. The route can set the initial value before the screen renders.

API

Scroll horizontally to read every column.

Prop	Type	Description
title	string	Overrides the route title.
subtitle	string	Optional subtitle.
titleDisplay	TitleDisplayMode	Title presentation.
searchable	Searchable	Optional screen search.

Related: Quick start, List, Screen.

:::