スポンサースポンサーになる

アプリ / コア

アプリを初期化する際に、`new Framework7` コンストラクタを使用して、アプリの主要パラメータを含むオブジェクトを渡すことができます。

var app = new Framework7({
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});

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

アプリパラメータ

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

パラメータタイプデフォルト説明
el文字列bodyアプリのルート要素。メインアプリのレイアウトが `<body>` の直接の子要素でない場合は、ここでルート要素を指定する必要があります。
componentルーターコンポーネント渡されたメインアプリコンポーネントからアプリレイアウトを読み込みます。Framework7 Coreバージョンのみ。
componentUrl文字列コンポーネントXHR 経由でロードされる単一ファイルのメインアプリコンポーネントへのパス。Framework7 Coreバージョンのみ。
name文字列Framework7アプリ名。ダイアログコンポーネントのデフォルトタイトルなど、他のコンポーネントで使用できます。
theme文字列autoアプリーテーマ。`ios`、`md`、または `auto` を指定できます。`auto` の場合、iOSデバイスではiOSテーマ、その他のデバイスではMDテーマが使用されます。
colorsオブジェクトアプリの色。必須の `primary` キーと、必要に応じて他の色を含むオブジェクトである必要があります。ここで指定されたすべての色について、アプリは Material You カラーパレットを使用して動的な CSS スタイルを生成します。デフォルトは次のとおりです。
{
  primary: '#007aff',
  red: '#ff3b30',
  green: '#4cd964',
  blue: '#2196f3',
  pink: '#ff2d55',
  yellow: '#ffcc00',
  orange: '#ff9500',
  purple: '#9c27b0',
  deeppurple: '#673ab7',
  lightblue: '#5ac8fa',
  teal: '#009688',
  lime: '#cddc39',
  deeporange: '#ff6b22',
  white: '#ffffff',
  black: '#000000',
}
userAgent文字列ユーザーエージェント文字列。サーバーサイド環境で正しいデバイス検出を行うために必要です。
routes配列[]すべてのビューへのデフォルトルートを含む配列。
lazyModulesPath文字列Framework7 の遅延読み込みコンポーネントへのパス。ブラウザモジュールで遅延読み込みモジュールを使用するために必要です。
darkModeブール値
文字列		未定義`true` に設定すると、ダークモードが有効になります。`false` に設定すると、ダークモードが無効になります。 `auto` に設定すると、ユーザーのシステムカラースキーム設定に基づいてダークテーマが自動的に有効になります。この機能のサポートは、`(prefers-color-scheme)` メディアクエリのサポートに基づいています。
initブール値trueデフォルトでは、`new Framework7()` を呼び出すと Framework7 は自動的に初期化されます。この動作を防ぎたい場合は、このオプションで無効にして、必要なときに `app.init()` で手動で初期化できます。
initOnDeviceReadyブール値true`init: true` パラメータで自動初期化が有効になっており、アプリが Cordova 環境で実行されている場合、`deviceready` イベントで初期化されます。
iosTranslucentBarsブール値trueiOSテーマ（iOSデバイス上）のナビゲーションバーで半透明効果（背景ぼかし）を有効にします。
iosTranslucentModalsブール値trueiOSテーマ（iOSデバイス上）のモーダル（ダイアログ、ポップオーバー、アクション）で半透明効果（背景ぼかし）を有効にします。
onオブジェクト{}

イベントハンドラを含むオブジェクト。例えば

var app = new Framework7({
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
})
クリックモジュールパラメータ
clicksオブジェクトクリックモジュール関連のパラメータを含むオブジェクト
var app = new Framework7({
  clicks: {
    externalLinks: '.external',
  }
})
{
externalLinks文字列'.external'外部として扱われ、Framework7 によって処理されるべきでないリンクの CSS セレクタ。たとえば、`.external` という値は、`<a href="somepage.html" class="external">`（クラス "external" を持つ）のようなリンクに一致します。
}
タッチモジュールパラメータ
touchオブジェクトタッチモジュール関連のパラメータを含むオブジェクト
var app = new Framework7({
  touch: {
    tapHold: true,
  }
})
{
touchClicksDistanceThreshold数値5短いスワイプを防ぐための距離のしきい値（ピクセル単位）。タップ/移動距離がこの値より大きい場合、「クリック」はトリガーされません。
disableContextMenuブール値falseコンテキストメニュー（右クリックまたはタップホールド）を無効にするには、true に設定します。
tapHoldブール値falseタップホールドを有効にします。
tapHoldDelay数値750ターゲット要素で taphold イベントが発生するまで、ユーザーがタップを保持する必要がある時間（ミリ秒単位）を決定します。
tapHoldPreventClicksブール値true有効にした場合（デフォルト）、タップホールドイベント後にクリックイベントは発生しません。
activeStateブール値true有効にすると、アプリは現在タッチされている（:active）要素に "active-state" クラスを追加します。
activeStateElements文字列a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .menu-item, .link, .item-link, .accordion-item-toggle有効な `activeState` が適切なアクティブクラスを追加する要素の CSS セレクタ。
activeStateOnMouseMoveブール値false有効にすると、マウスの移動中に「アクティブ状態」が維持されます。
iosTouchRippleブール値falseiOSテーマのタッチリップル効果を有効にします。
mdTouchRippleブール値trueMDテーマのタッチリップル効果を有効にします。
touchRippleElements文字列.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content, .list.accordion-list .accordion-item-toggleクリック時にタッチリップル効果を適用する要素の CSS セレクタ。
touchRippleInsetElements文字列.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.backクリック時にインセットタッチリップル効果を適用する要素の CSS セレクタ。
}
serviceWorkerオブジェクトサービスワーカーモジュールのパラメータを含むオブジェクト。
var app = new Framework7({
  serviceWorker: {
    path: './service-worker.js',
    scope: '/',
  }
})
{
path文字列サービスワーカーファイルへのパス。
scope文字列サービスワーカースコープへのパス。
}

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

JavaScript API を持つコンポーネントのほとんどは、コンポーネントと同じ名前のプロパティでこのパラメータリストを拡張できます。たとえば、パネルコンポーネントは、パネル固有のパラメータを受け入れる `panel` プロパティでアプリパラメータを拡張します。

例

var app = new Framework7({
  // Extended by Panel component:
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  },
  // Extended by Dialog component:
  dialog: {
    title: 'My App',
  },
  // Extended by Statusbar component:
  statusbar: {
    iosOverlaysWebview: true,
  },
});

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

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

プロパティ
app.nameパラメータで渡されたアプリ名。
app.routesアプリのルート。
app.elアプリのルート HTML 要素。
app.$elアプリのルート HTML 要素を持つ Dom7 インスタンス。
app.rtlアプリが RTL レイアウトであるかどうかを示すブール値プロパティ。
app.theme現在のアプリテーマを含む文字列。`md` または `ios` を指定できます。
app.darkModeダークテーマがアクティブかどうかを示すブール値プロパティ。
app.widthアプリの幅（ピクセル単位）。
app.heightアプリの高さ（ピクセル単位）。
app.leftアプリの左オフセット（ピクセル単位）。
app.topアプリの上オフセット（ピクセル単位）。
app.initializedアプリが初期化されているかどうかを示すブール値プロパティ。
app.$Dom7 のエイリアス。
app.paramsアプリパラメータ。
app.supportサポートされている機能に関するプロパティを含むオブジェクト。サポートユーティリティセクションを確認してください。
app.deviceデバイスに関するプロパティを含むオブジェクト。デバイスユーティリティセクションを確認してください。
app.utilsいくつかの便利なユーティリティを含むオブジェクト。ユーティリティセクションを確認してください。
app.serviceWorker.containerサービスワーカーコンテナ（`navigator.serviceWorker`）。
app.serviceWorker.registrations登録済みサービスワーカーの配列。
app.onlineアプリの接続状態を示すブール値プロパティ。（オンラインの場合は `true`）。
メソッド
app.setColorTheme(color)プライマリカラースキームを設定します。`color` は16進数の色でなければなりません（例：`#ff0000`）。
app.setDarkMode(mode)`mode` が `true` の場合、ダークモードが有効になります。`mode` が `false` の場合、ダークモードが無効になります。 `mode` が `auto` の場合、ユーザーのシステムカラースキーム設定に基づいてダークテーマが自動的に有効になります。
app.on(event, handler)イベントハンドラを追加します。
app.once(event, handler)発生後に削除されるイベントハンドラを追加します。
app.off(event, handler)イベントハンドラを削除します。
app.off(event)指定されたイベントのすべてのハンドラを削除します。
app.emit(event, ...args)インスタンスでイベントを発生させます。
app.init()`init: false` パラメータで自動初期化を無効にした場合に、アプリを初期化します。
app.serviceWorker.register(path, scope)サービスワーカーを登録します。ServiceWorkerRegistration で解決される Promise を返します。
app.serviceWorker.unregister(registration)サービスワーカーの登録を解除します。サービスワーカーの登録が解除されると解決される Promise を返します。

アプリパラメータと同様に、JavaScript API を持つコンポーネントのほとんどは、コンポーネントと同じ名前のプロパティでこのプロパティリストを拡張できます。たとえば、パネルコンポーネントは、パネル固有のプロパティとメソッドを受け入れる `panel` プロパティでアプリインスタンスプロパティを拡張します。

例

// Open panel
app.panel.open('left');

// Hide statusbar
app.statusbar.hide();

アプリイベント

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

イベント引数説明
initイベントはアプリの初期化時に発生します。`new Framework7()`の後、または自動初期化を無効にした場合は `app.init()` の後に自動的に発生します。
resizeイベントは、アプリのサイズ変更（ウィンドウのサイズ変更）時に発生します。
orientationchangeイベントは、アプリの向き変更（ウィンドウの向き変更）時に発生します。
click(event)アプリがクリックされたときにイベントが発生します。
touchstart:active(event)タッチ開始 (mousedown) イベントがアクティブリスナーとして追加されたときにイベントが発生します (デフォルトの動作を防ぐことができます)。
touchmove:active(event)タッチ移動 (mousemove) イベントがアクティブリスナーとして追加されたときにイベントが発生します (デフォルトの動作を防ぐことができます)。
touchend:active(event)タッチ終了 (mouseup) イベントがアクティブリスナーとして追加されたときにイベントが発生します (デフォルトの動作を防ぐことができます)。
touchstart:passive(event)タッチ開始 (mousedown) イベントがパッシブリスナーとして追加されたときにイベントが発生します (デフォルトの動作を防ぐことはできません)。
touchmove:passive(event)タッチ移動 (mousemove) イベントがパッシブリスナーとして追加されたときにイベントが発生します (デフォルトの動作を防ぐことはできません)。
touchend:passive(event)タッチ終了 (mouseup) イベントがパッシブリスナーとして追加されたときにイベントが発生します (デフォルトの動作を防ぐことはできません)。
serviceWorkerRegisterSuccess(registration)Service Worker が正常に登録されたときにイベントがトリガーされます。
serviceWorkerRegisterError(error)Service Worker の登録に失敗したときにイベントがトリガーされます。
serviceWorkerUnregisterSuccess(registration)Service Worker の登録解除が正常に完了したときにイベントがトリガーされます。
serviceWorkerUnregisterError(registration, error)Service Worker の登録解除に失敗したときにイベントがトリガーされます。
onlineアプリがオンラインになったときにイベントが発生します。
offlineアプリがオフラインになったときにイベントが発生します。
connection(isOnline)ネットワーク状態が変化したときにイベントが発生します。
darkModeChange(isDarkTheme)デバイスの推奨カラー設定が変更されたときにイベントが発生します。 darkMode パラメータが 'auto' に設定されている場合にのみ有効です。

さらに、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('darkModeChange', function (isDark) {
  if (isDark) {
    console.log('color scheme changed to Dark')
  } else {
    console.log('color scheme changed to Light')
  }
});

CSS変数

/*====================
  Core
  ==================== */
:root {
  --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;

  @supports (left: env(safe-area-inset-left)) {
    --f7-safe-area-top: env(safe-area-inset-top);
    --f7-safe-area-bottom: env(safe-area-inset-bottom);
    .ios-left-edge,
    .ios-edges,
    .safe-area-left,
    .safe-areas,
    .popup,
    .sheet-modal,
    .panel-left {
      --f7-safe-area-left: env(safe-area-inset-left);
      --f7-safe-area-outer-left: env(safe-area-inset-left);
    }
    .ios-right-edge,
    .ios-edges,
    .safe-area-right,
    .safe-areas,
    .popup,
    .sheet-modal,
    .panel-right {
      --f7-safe-area-right: env(safe-area-inset-right);
      --f7-safe-area-outer-right: env(safe-area-inset-right);
    }
    .no-safe-areas,
    .no-safe-area-left,
    .no-ios-edges,
    .no-ios-left-edge {
      --f7-safe-area-left: 0px;
      --f7-safe-area-outer-left: 0px;
    }
    .no-safe-areas,
    .no-safe-area-right,
    .no-ios-edges,
    .no-ios-right-edge {
      --f7-safe-area-right: 0px;
      --f7-safe-area-outer-right: 0px;
    }
  }

  --f7-device-pixel-ratio: 1;
  @media (min-resolution: 2dppx) {
    --f7-device-pixel-ratio: 2;
  }
  @media (min-resolution: 3dppx) {
    --f7-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --f7-font-size: 14px;

  --f7-bars-translucent-opacity: 0.8;
  --f7-bars-translucent-blur: 20px;
}
.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-bars-link-color: var(--f7-theme-color);
  */
  --f7-bars-text-color: #000;
  --f7-text-color: #000;
  --f7-bars-bg-color: #f7f7f8;
  --f7-bars-bg-color-rgb: 247, 247, 248;
  --f7-bars-border-color: rgba(0,0,0,0.25);
}
.ios .dark,
.ios.dark {
  --f7-bars-text-color: #fff;
  --f7-text-color: #fff;
  --f7-bars-bg-color: #121212;
  --f7-bars-bg-color-rgb: 22, 22, 22;
  --f7-bars-border-color: rgba(255,255,255,0.16);
}

.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 .dark,
.md.dark {
  --f7-text-color: rgba(255,255,255,0.87);
}

.md,
.md .dark,
.md [class*='color-'] {
  --f7-bars-link-color: var(--f7-md-on-surface);
  --f7-bars-bg-color: var(--f7-md-surface-2);
  --f7-bars-bg-color-rgb: var(--f7-md-surface-2-rgb);
}

/*====================
  Color Themes
  ==================== */
.text-color-primary {
  --f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-primary {
  --f7-theme-color-bg-color: var(--f7-theme-color);
}
.border-color-primary {
  --f7-theme-color-border-color: var(--f7-theme-color);
}
.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
}
このドキュメントを改善する
このページの内容