ElectronでネイティブアプリっぽいUIを実現するために必要なHTMLとCSS

ElectronではUI設計はHTML/CSSを駆使して作ります。ネイティブアプリのようなレイアウトを実現することは意外と難しいです。少し苦労しましたが、汎用性のあるレイアウトのテンプレートができたので紹介したいと思います。

デモ

よくあるアプリケーションの雛形ですね。ヘッダーとフッターがあって、その中央にはメインコンテンツがあります。メインコンテンツがあふれる場合はスクロールで表示させます。flexbox を使うのですが、ElectronはChromeベースなので心配ありません。

ちなみに、ヘッダー、フッター、メインコンテンツ部すべて可変です。高さが変わってもCSSで修正する必要のない設計になっています。

ソースコード

  
Header
  

    
  
  

.main-window 
{
  display: flex;
  flex-direction: column;  /* 縦に並べる */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.main-window-content 
{
  display: flex;
  flex-grow: 1;
  position: relative;
}
.panels 
{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel 
{
  overflow-y: auto;  /* あふれた部分はスクロールで表示 */
}
.side 
{
  width: 100px;  /* サイドバーの横幅 */
}
.main 
{
  flex-grow: 1;  /* 余白をうめる */
}