List

Vertical list items for menus or collections of related entries.

Last updated 11/1/2024

Variants

Combine text, images, and notification badges. Use a right icon when linking to details.

Title Only

リストタイトル

Left Icon

リストタイトル

Multiple Lines

リストタイトル
補足テキスト
タイムスタンプなど

Large Left Icon

リストタイトル

Multiple Lines

リストタイトル
補足テキスト
タイムスタンプなど

Right Icon

リストタイトル

Multiple Lines

リストタイトル
補足テキスト

With Badge

リストタイトル
補足テキスト
3

import { List, ListItem } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <Dl variant="dim">
      <Dt>Title Only</Dt>
      <Dd>
        <List>
          <ListItem title="リストタイトル" />
        </List>
      </Dd>

      <Dt>Left Icon</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
          />
        </List>
      </Dd>

      <Dt>Multiple Lines</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
          >
            <p>タイムスタンプなど</p>
          </ListItem>
        </List>
      </Dd>

      <Dt>Large Left Icon</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
            isLargeLeftIcon
          />
        </List>
      </Dd>

      <Dt>Multiple Lines</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
            isLargeLeftIcon
          >
            <p>タイムスタンプなど</p>
          </ListItem>
        </List>
      </Dd>

      <Dt>Right Icon</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            rightIcon={<SerendieSymbol name={"chevron-right"} />}
          />
        </List>
      </Dd>

      <Dt>Multiple Lines</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            rightIcon={<SerendieSymbol name={"chevron-right"} />}
          />
        </List>
      </Dd>

      <Dt>With Badge</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
            isLargeLeftIcon
            badge={3}
          />
        </List>
      </Dd>
    </Dl>
  );
}

States

There are four states. Use Disabled for inactive menu items and Selected when an item is chosen.

Enabled

リストタイトル

Focused

リストタイトル

Disabled

リストタイトル

Selected

リストタイトル

import { List, ListItem } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
          />
        </List>
      </Dd>
      <Dt>Focused</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
            focusVisible
          />
        </List>
      </Dd>
      <Dt>Disabled</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
            disabled
          />
        </List>
      </Dd>
      <Dt>Selected</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            leftIcon={<SerendieSymbol name={"placeholder"} />}
            selected
          />
        </List>
      </Dd>
    </Dl>
  );
}