アプリ / コア

アプリを初期化する際には、new Framework7 コンストラクタを使用し、アプリのメインパラメータを含むオブジェクトを渡します。

var app = new Framework7({
  // アプリID
  id: 'com.myapp.test',
  // スワイプパネルの有効化
  panel: {
    swipe: true,
  },
  // ... その他のパラメータ
});

このコンストラクタは、メインアプリのFramework7インスタンスを返します。

アプリのパラメータ

利用可能なパラメータの一覧を見てみましょう。

var app = new Framework7({
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
})

var app = new Framework7({
  clicks: {
    externalLinks: '.external',
  }
})

var app = new Framework7({
  touch: {
    tapHold: true,
  }
})

var app = new Framework7({
  serviceWorker: {
    path: './service-worker.js',
    scope: '/',
  }
})

これらは、アプリコアモジュールのデフォルトのアプリパラメータです。

JavaScript APIを持つ多くのコンポーネントは、コンポーネントという名前のプロパティを使って、このパラメータのリストを拡張することができます。例えば、Panelコンポーネントは、アプリのパラメータを panel プロパティで拡張し、Panel 固有のパラメータを受け入れます。

例

var app = new Framework7({
  id: 'com.myapp.test',
  // Panelコンポーネントによって拡張されます。
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  },
  // ダイアログコンポーネントによって拡張されます。
  dialog: {
    title: 'My App',
  },
  // Statusbarコンポーネントによって拡張されます。
  statusbar: {
    iosOverlaysWebview: true,
  },
});

アプリのメソッドとプロパティ

返されたFramework7のインスタンス app には、たくさんの便利なプロパティやメソッドが含まれています。

アプリのパラメータと同様に、JavaScriptのAPIを持つコンポーネントの多くは、コンポーネントという名前のプロパティでこのプロパティリストを拡張することができます。例えば、Panel コンポーネントは、アプリのインスタンスプロパティを panel プロパティで拡張し、Panel 固有のプロパティやメソッドを受け入れます。

例

// パネルを開く
app.panel.open('left');

// ステータスバーを隠す
app.statusbar.hide();

アプリのイベント

アプリのインスタンスは、以下のコアイベントを発行します。

また、JavaScript APIを持つほとんどのコンポーネントは、このイベントリストを拡張することができます。例えば、Panelコンポーネントは、アプリのインスタンスで追加のイベントをトリガーします。

例

app.on('panelOpen', function (panel) {
  console.log('Panel ' + panel.side + ' opened');
});

app.on('connection', function (isOnline) {
  if (isOnline) {
    console.log('app is online now')
  } else {
    console.log('app is offline now')
  }
});

app.on('darkThemeChange', function (isDark) {
  if (isDark) {
    console.log('color scheme changed to Dark')
  } else {
    console.log('color scheme changed to Light')
  }
});

CSS 変数

:root {
  --f7-theme-color: #007aff;
  --f7-theme-color-rgb: 0, 122, 255;
  --f7-theme-color-shade: #0066d6;
  --f7-theme-color-tint: #298fff;
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
  --f7-safe-area-top: 0px;
  --f7-safe-area-bottom: 0px;
  --f7-safe-area-outer-left: 0px;
  --f7-safe-area-outer-right: 0px;
  --f7-device-pixel-ratio: 1;
}
@supports (left: env(safe-area-inset-left)) {
  :root {
    --f7-safe-area-top: env(safe-area-inset-top);
    --f7-safe-area-bottom: env(safe-area-inset-bottom);
  }
  :root .ios-left-edge,
  :root .ios-edges,
  :root .safe-area-left,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-left {
    --f7-safe-area-left: env(safe-area-inset-left);
    --f7-safe-area-outer-left: env(safe-area-inset-left);
  }
  :root .ios-right-edge,
  :root .ios-edges,
  :root .safe-area-right,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-right {
    --f7-safe-area-right: env(safe-area-inset-right);
    --f7-safe-area-outer-right: env(safe-area-inset-right);
  }
  :root .no-safe-areas,
  :root .no-safe-area-left,
  :root .no-ios-edges,
  :root .no-ios-left-edge {
    --f7-safe-area-left: 0px;
    --f7-safe-area-outer-left: 0px;
  }
  :root .no-safe-areas,
  :root .no-safe-area-right,
  :root .no-ios-edges,
  :root .no-ios-right-edge {
    --f7-safe-area-right: 0px;
    --f7-safe-area-outer-right: 0px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root {
    --f7-device-pixel-ratio: 2;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  :root {
    --f7-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --f7-font-size: 14px;
  /*
  --f7-bars-link-color: var(--f7-theme-color);
  */
  --f7-bars-bg-image: none;
  --f7-bars-translucent-opacity: 0.8;
  --f7-bars-translucent-blur: 20px;
  --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --f7-bars-text-color: #000;
  --f7-bars-bg-color: #f7f7f8;
  --f7-bars-bg-color-rgb: 247, 247, 248;
}
:root .theme-dark,
:root.theme-dark {
  --f7-bars-text-color: #fff;
}
.ios {
  --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.4;
  --f7-text-color: #000;
  --f7-bars-border-color: rgba(0, 0, 0, 0.25);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-text-color: #fff;
  --f7-bars-bg-color: #121212;
  --f7-bars-bg-color-rgb: 19, 19, 19;
  --f7-bars-border-color: rgba(255, 255, 255, 0.1);
}
.md {
  --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-bars-border-color: transparent;
  --f7-text-color: #212121;
}
.md .theme-dark,
.md.theme-dark {
  --f7-text-color: rgba(255, 255, 255, 0.87);
  --f7-bars-bg-color: #202020;
}
.aurora {
  --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-text-color: #000;
  --f7-bars-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-text-color: #fff;
  --f7-bars-bg-color: #202020;
  --f7-bars-border-color: rgba(255, 255, 255, 0.1);
}