Listリストアイテム

関連する項目を縦に並べて、メニューや一覧を構成するためのコンポーネントです。

更新 2024/11/1

バリエーション

テキストや画像、通知バッジを組み合わせて使用できます。一覧から詳細にリンクする際は、Right Iconを使用してください。

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 { 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="texture" />
        </List>
      </Dd>

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

      <Dt>Large Left Icon</Dt>
      <Dd>
        <List>
          <ListItem title="リストタイトル" leftIcon="texture" isLargeLeftIcon />
        </List>
      </Dd>

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

      <Dt>Right Icon</Dt>
      <Dd>
        <List>
          <ListItem title="リストタイトル" rightIcon="chevron_right" />
        </List>
      </Dd>

      <Dt>Multiple Lines</Dt>
      <Dd>
        <List>
          <ListItem
            title="リストタイトル"
            description="補足テキスト"
            rightIcon="chevron_right"
          />
        </List>
      </Dd>

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

状態

4つの状態があります。メニューにおいて非活性状態を示すときにDisabledを、選択状態を示すときにSelectedを使用してください。

Enabled

リストタイトル

Focused

リストタイトル

Disabled

リストタイトル

Selected

リストタイトル

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

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