まくろぐ

Electron アプリのレイアウトにはフレックスボックスなど新しいスタイルを使用する

更新:
作成:

Electron アプリのレンダリングには、最新の Chromium を使用できるため、比較的新しい CSS 機能を安心して使用することができます。 Web ブラウザで動作するわけではないので、ベンダープレフィックスなどのケアをする必要もありません。

例えば、次の例では、サイドバーと領域の広がる本文部分に別れるレイアウトを、CSS のフレックスボックス (Flexbox) で実現しています(ここでは React を使用しています)。

/p/awamxak/img-001.png
app.tsx
import * as React from 'react';

const styles: {[key: string]: React.CSSProperties} = {
  container: {
    display: 'flex',
    minHeight: '100vh',
  },
  sidebar: {
    background: 'lightgray',
    width: '150px',
  },
  body: {
    background: '#ddd',
    flex: 1,
  }
};

export class App extends React.Component {
  public render(): React.ReactNode {
    return (
      <div style={styles.container}>
        <div style={styles.sidebar}>Sidebar</div>
        <div style={styles.body}>Body</div>
      </div>
    );
  }
}

フレックスボックスはとても柔軟で、画面上端で左右に広がるメニュー など、いろいろな用途に使用することができます。

関連記事

まくろぐ
サイトマップまくへのメッセージ