#008 ガジェットから詳細画面を開けるようにした

少し間が空いてしまいました。。

意欲が無くなったわけではなく、単純に忙殺されていただけですが、とりあえずダッシュボードの開発を再開しました。

前回までに、ダッシュボード上へ複数のガジェットカードを並べるところまで進めていました。

ただ、カードが並んでいるだけでは、まだ見た目だけの画面という感じが強かったため、今回はカードから詳細画面へ遷移できるようにしました。

サンプルガジェットを追加

ダッシュボードの下段に、記事用の「サンプルガジェット」を追加しました。

表示内容はすべてダミーです。

  • タイトル
  • 簡単な説明
  • 「詳細を見る」リンク

「詳細を見る」をクリックすると、サンプルガジェットの詳細画面へ遷移します。

今回は画面遷移の仕組みを確認するため、表示内容にはダミー情報を使用しています。

今後どんなガジェットを作っていくかは、まだぼんやり考えている段階です。

詳細画面を追加

Blazorのルーティング機能を使い、次のURLで詳細画面を表示できるようにしました。

/gadgets/sample

詳細画面には、以下のようなダミー情報を表示しています。

これで、次のような基本的な画面遷移ができるようになりました。

ダッシュボード
  ↓
ガジェットの詳細画面
  ↓
ダッシュボードへ戻る

今回の成果

今回の変更は小さいですが、ダッシュボードが単にカードを並べただけの画面から、少しアプリらしい形になりました。

今後は、このサンプルガジェットを土台にして、各ガジェットの情報を表示できるようにしていく予定です。

久しぶりの更新になりましたが、引き続き小さく動くものを作りながら進めていきます。

コメント

タイトルとURLをコピーしました