List

List holds the rows of one list of things and names it: ListRows, one thing per row.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

List for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

List for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Not for: Each kind of setting with its valuePropertyList , which draws its own rows
Measured facts, a name and its valueFactList
Cuts on an ekonte sheetCutSheet

Guidelines

label names the list for a screen reader.
surface sets the rows in a surface, as a phone groups them (a settings list).
Rows go inside as children; a list never mixes a row with a block of another kind.

ListExample.jsxReact

import { List, ListRow, Switch } from '@anicanon/sakuga/ui';

export default function ListExample() {
  return (
    <List label="Sound" surface>
      <ListRow
        icon="video"
        title="Takes’ own sound"
        sub="Voices and sound from each take"
      >
        <Switch on label="Takes’ own sound" />
      </ListRow>
      <ListRow icon="volume" title="Cue 2 · wind" sub="Music">
        <Switch on={false} label="Cue 2" />
      </ListRow>
    </List>
  );
}

Props`ListProps`

childrenrequired

ReactNode

label

string

surface

boolean

The rows sit in a surface (a phone's grouped list).

className

string

ListExample.swiftiOS · coming soon

ListExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

list-surface-radius

radius-lg

16px

list-surface-inset-ring-width

line-hairline

1px

list-surface-row-padding-left

inset-md

12px

list-surface-row-padding-right