ListItemリストアイテム
関連する項目を縦に並べて、メニューや一覧を構成するためのコンポーネントです。
更新 2026/6/26
バリエーション
テキストやアイコン、通知バッジを組み合わせて使用できます。一覧から詳細にリンクする際は、Trailing Elementを使用してください。
- Title Only
- リストタイトル
- Heading Element
- リストタイトル
- Multiple Lines
- リストタイトル補足テキスト
- Sub Description
- リストタイトル補足テキスト10分前
- Large Heading Element
- リストタイトル補足テキスト
- Trailing Element
- リストタイトル
- 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>Heading Element</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
headingElement={<SerendieSymbol name={"placeholder"} />}
/>
</List>
</Dd>
<Dt>Multiple Lines</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
description="補足テキスト"
headingElement={<SerendieSymbol name={"placeholder"} />}
/>
</List>
</Dd>
<Dt>Sub Description</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
description="補足テキスト"
subDescription="10分前"
headingElement={<SerendieSymbol name={"placeholder"} />}
/>
</List>
</Dd>
<Dt>Large Heading Element</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
description="補足テキスト"
headingElement={<SerendieSymbol name={"placeholder"} />}
isLargeHeadingElement
/>
</List>
</Dd>
<Dt>Trailing Element</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
trailingElement={<SerendieSymbol name={"chevron-right"} />}
/>
</List>
</Dd>
<Dt>With Badge</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
description="補足テキスト"
headingElement={<SerendieSymbol name={"placeholder"} />}
isLargeHeadingElement
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="リストタイトル"
headingElement={<SerendieSymbol name={"placeholder"} />}
/>
</List>
</Dd>
<Dt>Focused</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
headingElement={<SerendieSymbol name={"placeholder"} />}
focusVisible
/>
</List>
</Dd>
<Dt>Disabled</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
headingElement={<SerendieSymbol name={"placeholder"} />}
disabled
/>
</List>
</Dd>
<Dt>Selected</Dt>
<Dd>
<List>
<ListItem
title="リストタイトル"
headingElement={<SerendieSymbol name={"placeholder"} />}
selected
/>
</List>
</Dd>
</Dl>
);
}