Ionic6でデスクトップレイアウトを簡単に作ってみる

概要

Ionicは、モバイル向けのUIフレームワークですが、デスクトップレイアウトも作成できます。

今回は、TeamsとかSlackであるようなサイドバー付きのレイアウトを作成していきます。

使用する環境は以下の通りです。

プロジェクトを作成したらapp.component.htmlを開きます。

最初は以下のようなコードになっているかと思います。

app.component.html

こんな感じにapp.component.htmlを編集

↓


          onSplitPaneVisible

            MenuA

            MenuB

            MenuC

Ionicのコンポーネントであるion-split-paneを使用すれば、簡単にサイドバー付きのデスクトップレイアウトを作成できます。

追記かしたコードの見た目はこんな感じです。簡単にサイドバー付きのデスクトップレイアウトを作成することができました。

デスクトップレイアウト ion-split-pane

ほかにもIonicに関する記事を書いています。