ここでは、ReactでWEBアプリの画面を作っていて、タグのような部品を配置したい時の方法を紹介していきたいと思います。
上の画像のような部品を見たことある方も多いかと思います。関連性のあるキーワードをこの部品とともに表示したり、何かの状態をこの部品を使って、表現することもあるかと思います。
コードを見ていきましょう。以下のコードは１つ目の画像のコードです。
<Typography marginBottom={1}>カテゴリー：</Typography>
<Box sx={{ display:'flex', gap:1 }}>
<Chip label="エンタメ" />
<Chip label="科学" />
<Chip label="恋愛" />
</Box>
このようなタグのような部品を生成するには、<Chip>タグを使います。ここで注意しなければいけないことは、下記のような記述ではNGだということです。
<Chip>文字</Chip>
先述にあるような<Typography>タグやボタンを生成するときに使用する<Button>タグなんかだと、タグと閉じタグでサンドイッチするだけでも機能するのですが、<Chip>タグの場合だと、それでは機能しません。
<Chip label="エンタメ"></Chip>
// もしくは
<Chip label="エンタメ" />
このように、表示したい文字をlabelというプロパティで設定することで、機能させることができます。
次に色々なカスタマイズを見ていきましょう。まずは色をつけてみます。
<Chip label="エンタメ" color="primary" />
<Chip label="科学" color="secondary" />
<Chip label="恋愛" color="error" />
このようにすることで
色をつけることができました。ただ、<Chip>タグに直接colorプロパティを適応する場合、default, primary, secondary, error, info, success, warning といった限られた色しか指定することができません。少し色味をこだわりたいときは、以下のようにしてみましょう。
<Chip label="エンタメ" sx={{ bgcolor: 'orange', color: 'white' }} />
<Chip label="科学" sx={{ bgcolor: 'lightblue', color: 'black' }} />
<Chip label="恋愛" sx={{ bgcolor: 'pink', color: 'white' }} />
するとこのようになります。
このようにすることで、さらに多くの色を適用させることができます。bgcolorは背景色、colorは文字色を指定しています。名称も直感的なので、わかりやすいですね。
<Chip label="エンタメ" sx={{ bgcolor: '#3f51b5', color: '#fff' }} />
<Chip label="科学" sx={{ bgcolor: '#f50057', color: '#fff' }} />
<Chip label="恋愛" sx={{ bgcolor: '#d32f2f', color: '#fff' }} />
このようにカラーコードを直接指定することもできます。
次にデザインを変更してみましょう。コードを以下のように変更してみます。
<Chip label="エンタメ" variant="outlined" color="primary" />
<Chip label="科学" variant="outlined" sx={{ borderColor: 'green', color: 'green' }} />
<Chip label="恋愛" variant="outlined" sx={{ borderColor: '#ff5722', color: '#ff5722' }} />
すると、このようになります。
外枠線で囲われただけのデザインになりました。variant="outlined" というプロパティを追加することで、外枠だけのデザインに変更することができます。この場合の色の指定は、<Chip>タグに直接指定する場合は先ほどと同じですが、sxプロパティでカスタムカラーを使用する時はbordercolorで枠線の色を指定できます。この場合の文字の色の指定は先ほどと同じです。
<Chip>には他にもいろいろなカスタマイズができ、文字の横にアイコンを表示したり、バツボタンを配置したり、サイズを小さくしたりできます。以下がそれぞれのカスタマイズを施したコードです。
import Cancel from "@mui/icons-material"; // バツアイコンをインポート
import Face from "@mui/icons-material"; // 顔のアイコンをインポート
<Chip label="エンタメ" icon={<Face/>} />
<Chip label="科学" onDelete={() => console.log('削除されました')} deleteIcon={<Cancel />} />
<Chip label="恋愛" size="small" />
するとこのようになります。
「エンタメ」に顔のアイコンを追加（ちょっと変ですが…）、「科学」にバツボタンを追加、「恋愛」はサイズを小さくしました。このように<Chip>ではタグとして文字を目立たせるだけではなくいろいろな機能を追加することができます。
※バツボタンについては、ここではバツボタンをクリックしても消えません。別途、バツボタンをクリックした時のハンドリングを実装する必要があります。
まとめ
タグのような部品を実装したいときは<Chip>タグを使用することで実現できる。
Discussion