List

順序付きリストと順序なしリストを表示。

インストール

import { List } from "@ginga-ui/core";

順序なしリスト

順序なしリスト(ul)の使用例です。

  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
export function UnorderedExample() {
  return (
    <List type="unordered">
      <ListItem>リストアイテム1</ListItem>
      <ListItem>リストアイテム2</ListItem>
      <ListItem>リストアイテム3</ListItem>
    </List>
  );
}

順序付きリスト

順序付きリスト(ol)の使用例です。

  1. 最初のステップ
  2. 2番目のステップ
  3. 最後のステップ
export function OrderedExample() {
  return (
    <List type="ordered">
      <ListItem>最初のステップ</ListItem>
      <ListItem>2番目のステップ</ListItem>
      <ListItem>最後のステップ</ListItem>
    </List>
  );
}

ネストされたリスト

リストをネストして階層構造を作成します。

  • 親アイテム1
  • 親アイテム2
    • ネストされたアイテム1
    • ネストされたアイテム2
  • 親アイテム3
export function NestedExample() {
  return (
    <List type="unordered">
      <ListItem>親アイテム1</ListItem>
      <ListItem>
        親アイテム2
        <List type="unordered">
          <ListItem>ネストされたアイテム1</ListItem>
          <ListItem>ネストされたアイテム2</ListItem>
        </List>
      </ListItem>
      <ListItem>親アイテム3</ListItem>
    </List>
  );
}

混合リスト

順序付きと順序なしを組み合わせたリストです。

  1. タスク管理システムの要件定義
  2. UI/UXデザイン
    • ワイヤーフレーム作成
    • デザインモックアップ
    • ユーザビリティテスト
  3. 開発とテスト
  4. デプロイメント
export function MixedExample() {
  return (
    <List type="ordered">
      <ListItem>タスク管理システムの要件定義</ListItem>
      <ListItem>
        UI/UXデザイン
        <List type="unordered">
          <ListItem>ワイヤーフレーム作成</ListItem>
          <ListItem>デザインモックアップ</ListItem>
          <ListItem>ユーザビリティテスト</ListItem>
        </List>
      </ListItem>
      <ListItem>開発とテスト</ListItem>
      <ListItem>デプロイメント</ListItem>
    </List>
  );
}