HeaderItem — Kuito Documentation

Usage

Add a navigation header action.

tsx

// Add a navigation header action.
import { signal, type HeaderItem, type RouteOptions } from 'kuito';

const editing = signal(false);

const edit: HeaderItem = {
  label: 'Edit',
  onPress: () => (editing.value = !editing.value),
};
const add: HeaderItem = {
  label: 'Add',
  icon: { ios: 'plus', android: 'add' },
  onPress: () => console.log('add'),
};

export const options: RouteOptions = {
  title: 'Playlists',
  header: { leading: [edit], trailing: [add] },
};

Type declaration

export interface HeaderItem {
  /** What it says; with an icon, what a screen reader reads. */
  label: string;
  /** A symbol shown instead of the label: an SF Symbol on iOS, a Material Symbol on Android. */
  icon?: string | { ios?: string; android?: string };
  onPress: () => void;
  disabled?: boolean;
}

Members 4

Name	Type	Required	Description
`label`	`string`	Yes	What it says; with an icon, what a screen reader reads.
`icon`	`string \| { ios?: string; android?: string;}`	No	A symbol shown instead of the label: an SF Symbol on iOS, a Material Symbol on Android.
`onPress`	`() => void`	Yes	—
`disabled`	`boolean`	No	—

onPress — method signatures

Signatures

(): void

Parameters

No parameters.

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.