Ant Designは夢のUIテーマパークだった
おいどん。です
最近、「Ant Design」というUIフレームワークを知り、用意されているコンポーネントが夢のようだったので記録しました
Ant Designとは（以下antd）
- MUIやChakraUIのようなUIフレームワークの一つ
- Reactで使えるUIフレームワーク（vueでも使えないことはない）
- TypeScriptおっけー
- 複数言語サポート
- 強力なテーマのカスタマイズ
- Next.js(v13も), Vite, Umi 対応
感動ポイント
トップページの背景も触れる！？
antdトップページのHero画像の部分にあるコンポーネント郡がさわれるようになっていました
始め画像かと思っていましたが、vimiumでボタンが押せるようになっていたので気づきました
豊富なコンポーネントの種類
antdにはmuiなどほかのUIフレームワークにないコンポーネントがいくつもあります
Color Picker
muiやchakraUIにはないカラーピッカーがあります
htmlタグの<input type="color">で表示される一般的なカラーピッカーに加えて、よりリッチなUIが用意されていたり、presetを自由に設定できます
トリガーもボタンなどに変更できるので、自由にUIを組めます
reactライブラリのreact-colorやgithubPickerあたりの機能を含有しています
QRCode
QRCodeを生成してくれるコンポーネントも用意されています
文字列をリアルタイムにQRコードにしてくれます
errorLevelを設定できたり、アイコンを埋め込んだりできます
ダウンロードのロジックは自作する必要があるみたいです
Tour
いわゆるチュートリアル的な機能を実装できます
一度ページ開いて試してみるとわかりやすいと思います
refを指定した要素に順番にフォーカスし、吹き出しを表示することができます。
webアプリなど作る際に導入すると、UXバク上がりですね
以下のようなライブラリが必要なくなります
- Intro.js
- React Joyride
- React Shepherd.js
- Reactour
Anchor
要素にidを指定するだけで、要素の表示位置に応じてZennやQiitaの目次のようなものを表示できます
読み物系のページであれば便利ですね
Image
AvatorでもなくImageコンポーネントです
antdのpreview機能がすごいです
上下反転、左右反転、回転、拡大縮小がデフォでついてます
ツールバーもカスタマイズできる仕様です
使えるコンポーネントが多いと、ライブラリ幾つも入れたりせずに、テーマも統一間持たせられるのでいいですね
上記以外にも、DatePicker, TImePicker, Uploader, Cascader, Carousel, Calendarなどたくさんあるので、ドキュメント見てみて下さい
楽しいです
使い方
公式ドキュメントがわかりやすいので↑を見てみて下さい
Next.jsの場合は↓です
注意！Next.jsでTailwindと共存させたい場合
next.jsでtailwindを使いつつantdを使いたい場合、公式ドキュメントの設定方法ではボタンの背景が透けてしまいます
以下をtailwind.config.tsに追記してください
corePlugins: {
preflight: false,
},
参考
おわりに
antdをまだしっかり使っていないのですが、使いたくてワクワクしています
まるで夢のテーマパークですね
Discussion