ベーシックなダッシュボードのテンプレートを作ってみました

2022年8月6日 02:55

こんにちわ。nap5です。

ベーシックなダッシュボードのテンプレートを作ってみましたので、紹介したいと思います。あまり作り込まない段階のスケルトン的なイメージでワークアラウンドしてみました。

実装している機能は以下です。

ダークモード入れるか迷ったのですが、今回は見送っておきました。

デモサイトです。

デモコードです。

ページごとにあとはフレックスレイアウトないしはグリッドレイアウトでグラフやテーブルを差し込んだりすれば、それっぽくはなります。

ページごとのストア管理ないしは状態管理はzustandライブラリを使っていくのが、ハンディじゃないかと考えています。フックにして切り出していくことが可能です。

このデモのダッシュボードをもとにコンポーネントの細かい動き等のブラッシュアップを以降の記事では扱っていこうかなと考えています。

今回はそのための第一弾ということでした。

zustandライブラリについては何度か記事に取り上げています。

オーバーフローを起こすセクションに関してはrc-scrollbarsライブラリを使ってハンドリングして、ビューポート縦幅に収まるようにしています。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？