ダイアログ

ダイアログは、アプリのメインコンテンツの上にポップアップする小さなコンテンツペインです。ダイアログは通常、ユーザーに何かを尋ねたり、ユーザーに通知したり警告したりするために使用されます。ダイアログは、他のすべてのモーダルと同様に、いわゆる「一時的な表示」の一部です。

ダイアログは、JavaScriptを使用してのみ開くことができます。そこで、ダイアログを扱う関連アプリのメソッドを見てみましょう。

ダイアログアプリのメソッド

ダイアログを扱うアプリの関連メソッドを見てみましょう。

ダイアログのパラメータ

それでは、ダイアログを作成するために必要な、利用可能なパラメータのリストを見てみましょう。

var dialog = app.dialog.create({
  text: 'Hello World',
  on: {
    opened: function () {
      console.log('Dialog opened')
    }
  }
})

ボタンのパラメータ

配列 buttons に含まれる各ボタンは、ボタンのパラメータを持つオブジェクトとして表示されなければなりません。

ダイアログのメソッドとプロパティ

ダイアログを作成するためには、コールを行わなければなりません。

var dialog = app.dialog.create({ /* parameters */ })

その後、有用なメソッドとプロパティを持つ、初期化されたインスタンス（上記の例では dialog 変数）を取得します。

ダイアログのイベント

ダイアログは、以下のDOMイベントをダイアログ要素に、イベントをアプリとダイアログインスタンスに発行します。

DOMイベント

アプリとダイアログインスタンスのイベント

ダイアログインスタンスはセルフインスタンスとアプリインスタンスの両方にイベントを発行します。アプリインスタンスのイベントは、同じ名前でプレフィックスとして dialog が付きます。

ダイアログのショートカット

ダイアログの作成をはるかに容易にするいくつかのショートカットメソッドがあります。

最初に、そのようなショートカットの設定を助け、ローカリゼーションの目的にも使用される、アプリのグローバルパラメータを確認しましょう。

ダイアログのショートカットのパラメータ

以下のグローバルダイアログショートカットパラメータは、アプリの初期化において、dialogプロパティで渡すことができます。

var app = new Framework7({
  dialog: {
    // すべてのダイアログショートカットのデフォルトタイトルを設定する
    title: 'My App',
    // デフォルトの "OK "ボタンのテキストを変更
    buttonOk: 'Done',
    ...
  }
});

ここで、利用可能なダイアログのショートカットを見てみましょう。

アラート

アラートダイアログを作成するには、以下のアプリのメソッドを使用する必要があります。

確認

確認ダイアログは、通常、何らかのアクションを確認する必要があるときに使用されます。確認モーダルを開くには、以下のAppメソッドの1つを呼び出す必要があります。

プロンプト

プロンプトダイアログは、ユーザーから何らかのデータや回答を得る必要がある場合に使用されます。プロンプトダイアログを開くには、以下のAppメソッドのいずれかを呼び出す必要があります。

ログイン

パスワード

パスワードダイアログは、パスワードのみを要求する必要がある場合に便利です。

プリローダー

プリローダーダイアログは、(Ajaxリクエストのような)バックグラウンドアクティビティを示し、このアクティビティ中のユーザーのアクションをブロックするために使用されます。プレローダダイアログを開くには、適切なAppメソッドを呼び出す必要があります。

進捗状況

Preloaderダイアログと同じですが、preloaderの代わりにprogressbarがあります。

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-dialog-button-text-color: var(--f7-theme-color);
  --f7-dialog-button-text-align: center;
  --f7-dialog-input-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-dialog-text-color: #fff;
}
.ios {
  --f7-dialog-box-shadow: none;
  --f7-dialog-width: 270px;
  --f7-dialog-inner-padding: 16px;
  --f7-dialog-border-radius: 13px;
  --f7-dialog-text-align: center;
  --f7-dialog-font-size: 14px;
  --f7-dialog-title-text-color: inherit;
  --f7-dialog-title-font-size: 18px;
  --f7-dialog-title-font-weight: 600;
  --f7-dialog-title-line-height: inherit;
  --f7-dialog-button-font-size: 17px;
  --f7-dialog-button-height: 44px;
  --f7-dialog-button-letter-spacing: 0;
  --f7-dialog-button-font-weight: 400;
  --f7-dialog-button-text-transform: none;
  --f7-dialog-input-border-radius: 4px;
  --f7-dialog-input-font-size: 14px;
  --f7-dialog-input-height: 32px;
  --f7-dialog-input-border-width: 1px;
  --f7-dialog-input-placeholder-color: #a9a9a9;
  --f7-dialog-preloader-size: 34px;
  --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
  --f7-dialog-bg-color-rgb: 255, 255, 255;
  --f7-dialog-text-color: #000;
  --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
  --f7-dialog-bg-color-rgb: 45, 45, 45;
  --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
  --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
  --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
}
.md {
  --f7-dialog-box-shadow: var(--f7-elevation-24);
  --f7-dialog-width: 280px;
  --f7-dialog-inner-padding: 24px;
  --f7-dialog-border-radius: 4px;
  --f7-dialog-text-align: left;
  --f7-dialog-font-size: 16px;
  --f7-dialog-title-font-size: 20px;
  --f7-dialog-title-font-weight: 500;
  --f7-dialog-title-line-height: 1.3;
  --f7-dialog-button-font-size: 14px;
  --f7-dialog-button-height: 36px;
  --f7-dialog-button-letter-spacing: 0.05em;
  --f7-dialog-button-font-weight: 500;
  --f7-dialog-button-text-transform: uppercase;
  --f7-dialog-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
  --f7-dialog-input-border-radius: 0px;
  --f7-dialog-input-font-size: 16px;
  --f7-dialog-input-height: 36px;
  --f7-dialog-input-border-color: transparent;
  --f7-dialog-input-border-width: 0px;
  --f7-dialog-preloader-size: 32px;
  --f7-dialog-bg-color: #fff;
  --f7-dialog-text-color: rgba(0, 0, 0, 0.54);
  --f7-dialog-title-text-color: #212121;
  --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
}
.md .theme-dark,
.md.theme-dark {
  --f7-dialog-bg-color: #1c1c1d;
  --f7-dialog-title-text-color: #fff;
  --f7-dialog-input-bg-color: transparent;
  --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
  --f7-dialog-width: 300px;
  --f7-dialog-inner-padding: 20px;
  --f7-dialog-border-radius: 8px;
  --f7-dialog-text-align: left;
  --f7-dialog-font-size: 14px;
  --f7-dialog-title-font-size: 18px;
  --f7-dialog-title-font-weight: 700;
  --f7-dialog-title-line-height: inherit;
  --f7-dialog-button-font-size: 14px;
  --f7-dialog-button-height: 36px;
  --f7-dialog-button-letter-spacing: 0;
  --f7-dialog-button-font-weight: 600;
  --f7-dialog-button-text-transform: uppercase;
  /*
  --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
  --f7-dialog-button-hover-bg-color: var(--f7-theme-color-tint);
  */
  --f7-dialog-input-border-radius: 8px;
  --f7-dialog-input-font-size: 16px;
  --f7-dialog-input-height: 32px;
  --f7-dialog-input-border-width: 1px;
  --f7-dialog-preloader-size: 24px;
  --f7-dialog-bg-color: #fff;
  --f7-dialog-title-text-color: inherit;
  --f7-dialog-text-color: #000;
  --f7-dialog-button-text-color: #fff;
  --f7-dialog-input-border-color: rgba(0, 0, 0, 0.2);
  --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-dialog-bg-color: #1c1c1d;
  --f7-dialog-title-text-color: #fff;
  --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.25);
  --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
}

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Dialog</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill open-alert">Alert</button>
          <button class="col button button-fill open-confirm">Confirm</button>
          <button class="col button button-fill open-prompt">Prompt</button>
        </p>
        <p class="row">
          <button class="col button button-fill open-login">Login</button>
          <button class="col button button-fill open-password">Password</button>
        </p>
      </div>
      <div class="block-title">Vertical Buttons</div>
      <div class="block block-strong">
        <p>
          <button class="button button-fill open-vertical">Vertical Buttons</button>
        </p>
      </div>
      <div class="block-title">Preloader Dialog</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill open-preloader">Preloader</button>
          <button class="col button button-fill open-preloader-custom">Custom Title</button>
        </p>
      </div>
      <div class="block-title">Progress Dialog</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill open-progress">Determined</button>
          <button class="col button button-fill open-progress-infinite">Infinite</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $f7, $on }) => {
    $on('pageInit', () => {
      // Alert
      $('.open-alert').on('click', function () {
        $f7.dialog.alert('Hello');
      });

      // Confirm
      $('.open-confirm').on('click', function () {
        $f7.dialog.confirm('Are you feel good today?', function () {
          $f7.dialog.alert('Great!');
        });
      });

      // Prompt
      $('.open-prompt').on('click', function () {
        $f7.dialog.prompt('What is your name?', function (name) {
          $f7.dialog.confirm('Are you sure that your name is ' + name + '?', function () {
            $f7.dialog.alert('Ok, your name is ' + name);
          });
        });
      });

      // Login
      $('.open-login').on('click', function () {
        $f7.dialog.login('Enter your username and password', function (username, password) {
          $f7.dialog.alert('Thank you!<br>Username:' + username + '<br>Password:' + password);
        });
      });

      // Password
      $('.open-password').on('click', function () {
        $f7.dialog.password('Enter your password', function (password) {
          $f7.dialog.alert('Thank you!<br>Password:' + password);
        });
      });

      // Vertical Buttons
      $('.open-vertical').on('click', function () {
        $f7.dialog.create({
          title: 'Vertical Buttons',
          text: 'Dialog with vertical buttons',
          buttons: [
            {
              text: 'Button 1',
            },
            {
              text: 'Button 2',
            },
            {
              text: 'Button 3',
            },
          ],
          verticalButtons: true,
        }).open();
      });

      // Preloader
      $('.open-preloader').on('click', function () {
        $f7.dialog.preloader();
        setTimeout(function () {
          $f7.dialog.close();
        }, 3000);
      });

      // Preloader with custom text
      $('.open-preloader-custom').on('click', function () {
        $f7.dialog.preloader('My text...');
        setTimeout(function () {
          $f7.dialog.close();
        }, 3000);
      });

      // Progress
      $('.open-progress').on('click', function () {
        var progress = 0;
        var dialog = $f7.dialog.progress('Loading assets', progress);
        dialog.setText('Image 1 of 10');
        var interval = setInterval(function () {
          progress += 10;
          dialog.setProgress(progress);
          dialog.setText('Image ' + ((progress) / 10) + ' of 10');
          if (progress === 100) {
            clearInterval(interval);
            dialog.close();
          }
        }, 300)
      });

      // Progress Infinite
      $('.open-progress-infinite').on('click', function () {
        $f7.dialog.progress();
        setTimeout(function () {
          $f7.dialog.close();
        }, 3000);
      });
    })

    return $render;
  }
</script>