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 { 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={"texture"} />}
/>
</List>
</Dd>
<Dt>Multiple Lines</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
description="補足テキスト"
leftIcon={<SerendieSymbol name={"texture"} />}
>
<p>タイムスタンプなど</p>
</ListItem>
</List>
</Dd>
<Dt>Large Left Icon</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
leftIcon={<SerendieSymbol name={"texture"} />}
isLargeLeftIcon
/>
</List>
</Dd>
<Dt>Multiple Lines</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
description="補足テキスト"
leftIcon={<SerendieSymbol name={"texture"} />}
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={"texture"} />}
isLargeLeftIcon
badge={3}
/>
</List>
</Dd>
</Dl>
);
}
状態
4つの状態があります。メニューにおいて非活性状態を示すときにDisabledを、選択状態を示すときにSelectedを使用してください。
- 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={"texture"} />}
/>
</List>
</Dd>
<Dt>Focused</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
leftIcon={<SerendieSymbol name={"texture"} />}
focusVisible
/>
</List>
</Dd>
<Dt>Disabled</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
leftIcon={<SerendieSymbol name={"texture"} />}
disabled
/>
</List>
</Dd>
<Dt>Selected</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
leftIcon={<SerendieSymbol name={"texture"} />}
selected
/>
</List>
</Dd>
</Dl>
);
}