Material-UIを使用した垂直リストの作成方法

1. 必要なパッケージのインストール: まず、ReactプロジェクトでMaterial-UIを使用するために、以下のパッケージをインストールします。

npm install @material-ui/core

2. リストコンポーネントの作成: 次に、垂直リストを表示するためのコンポーネントを作成します。以下は、シンプルな垂直リストの例です。

import React from 'react';
import { List, ListItem, ListItemText } from '@material-ui/core';
function VerticalList() {
  return (
    <List>
      <ListItem>
        <ListItemText primary="アイテム1" />
      </ListItem>
      <ListItem>
        <ListItemText primary="アイテム2" />
      </ListItem>
      <ListItem>
        <ListItemText primary="アイテム3" />
      </ListItem>
    </List>
  );
}
export default VerticalList;

3. リストのカスタマイズ: Material-UIのリストコンポーネントは、多くのカスタマイズオプションを提供しています。例えば、リストアイテムのスタイルやアイコンの追加などが可能です。以下は、カスタマイズされた垂直リストの例です。

import React from 'react';
import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
import { Email, Phone } from '@material-ui/icons';
function CustomVerticalList() {
  return (
    <List>
      <ListItem>
        <ListItemIcon>
          <Email />
        </ListItemIcon>
        <ListItemText primary="[email protected]" />
      </ListItem>
      <ListItem>
        <ListItemIcon>
          <Phone />
        </ListItemIcon>
        <ListItemText primary="123-456-7890" />
      </ListItem>
    </List>
  );
}
export default CustomVerticalList;

これで、Material-UIを使用して垂直リストを作成する方法がわかりました。必要に応じて、さまざまなカスタマイズオプションを試してみてください。以上のコード例は、Reactプロジェクト内で利用できるものです。