Dialog

Dialog is a small content pane that pops up over App's main content. Dialogs are usualy used to ask something from a user, or to notify or warn a user. Dialog, as all other modals, is part of so called "Temporary Views".

Dialog can only be opened by using JavaScript. So lets look at related App methods to work with dialogs.

Dialog App Methods

Lets look at related App methods to work with Dialog:

Dialog Parameters

Now lets look at list of available parameters we need to create Dialog:

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

Button Parameters

Each Button in buttons array must be presented as object with button parameters:

Dialog Methods & Properties

So to create a Dialog we have to call:

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

After that we have its initialized instance (like dialog variable in example above) with useful methods and properties:

Dialog Events

Dialog will fire the following DOM events on dialog element and events on app and dialog instance:

DOM Events

App and Dialog Instance Events

Dialog instance emits events on both self instance and app instance. App instance events has same names prefixed with dialog.

Dialog Shortcuts

There are a few shortcut methods which that make creating dialogs much easier.

First lets check the global app parameters which help to configure such shortcuts and also used for localization purposes.

Dialog Shortcuts Parameters

The following global dialog shortcut parameters can be passed on app initialization under dialog property:

var app = new Framework7({
  dialog: {
    // set default title for all dialog shortcuts
    title: 'My App',
    // change default "OK" button text
    buttonOk: 'Done',
    ...
  }
});

Now lets look at available dialog shortcuts

Alert

To create Alert dialog we need to use the following app methods:

Confirm

Confirm dialog is usualy used when it is required to confirm some action. To open the Confirm modal we should also call one of the following App methods:

Prompt

Prompt dialog is used when it is required to get some data/answer from user. To open Prompt dialog we should also call one of the following App methods:

Login

Password

Password dialog is useful in case you need to request only the password

Preloader

Preloader dialog is used to indicate some background activity (like Ajax request) and to block any user actions during this activity. To open Preloader dialog we should also call appropriate App method:

Progress

Same as Preloader dialog but with progressbar instead of preloader.

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;
}
.ios {
  --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-button-strong-bg-color: transparent;
  --f7-dialog-button-strong-text-color: var(--f7-theme-color);
  --f7-dialog-button-strong-font-weight: 500;
  --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-input-bg-color: #fff;
  --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-button-strong-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 .dark,
.ios.dark {
  --f7-dialog-text-color: #fff;
  --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-button-strong-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-width: 280px;
  --f7-dialog-inner-padding: 24px;
  --f7-dialog-border-radius: 28px;
  --f7-dialog-text-align: left;
  --f7-dialog-font-size: 14px;
  --f7-dialog-title-font-size: 24px;
  --f7-dialog-title-font-weight: 400;
  --f7-dialog-title-line-height: 1.3;
  --f7-dialog-button-font-size: 14px;
  --f7-dialog-button-height: 40px;
  --f7-dialog-button-letter-spacing: normal;
  --f7-dialog-button-font-weight: 500;
  --f7-dialog-button-text-transform: none;
  --f7-dialog-button-strong-font-weight: 500;
  --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-input-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-dialog-button-pressed-bg-color: transparent;
  --f7-dialog-button-strong-bg-color: var(--f7-theme-color);
  --f7-dialog-button-strong-text-color: var(--f7-md-on-primary);
  --f7-dialog-button-strong-pressed-bg-color: transparent;
  --f7-dialog-bg-color: var(--f7-md-surface-3);
  --f7-dialog-input-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-dialog-text-color: var(--f7-md-on-surface-variant);
  --f7-dialog-title-text-color: var(--f7-md-on-surface);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Dialog</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy
          api and can be combined with each other. Check these examples:</p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill" @click=${openAlert}>Alert</button>
          <button class="button button-fill" @click=${openConfirm}>Confirm</button>
          <button class="button button-fill" @click=${openPrompt}>Prompt</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-fill" @click=${openLogin}>Login</button>
          <button class="button button-fill" @click=${openPassword}>Password</button>
        </p>
      </div>
      <div class="block-title">Vertical Buttons</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>
          <button class="button button-fill" @click=${openVerticalButtons}>Vertical Buttons</button>
        </p>
      </div>
      <div class="block-title">Preloader Dialog</div>
      <div class="block block-strong-ios block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-fill" @click=${openPreloader}>Preloader</button>
          <button class="button button-fill" @click=${openCustomPreloader}>Custom Text</button>
        </p>
      </div>
      <div class="block-title">Progress Dialog</div>
      <div class="block block-strong-ios block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-fill" @click=${openInfiniteProgress}>Infinite</button>
          <button class="button button-fill" @click=${openDeterminedProgress}>Determined</button>
        </p>
      </div>
      <div class="block-title">Dialogs Stack</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>This feature doesn't allow to open multiple dialogs at the same time, and will automatically open next dialog
          when you close the current one. Such behavior is similar to browser native dialogs: </p>
        <p>
          <button class="button button-fill" @click=${openAlerts}>Open Multiple Alerts</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7 }) => {
    const openAlert = () => {
      $f7.dialog.alert('Hello!');
    }
    const openConfirm = () => {
      $f7.dialog.confirm('Are you feel good today?', function () {
        $f7.dialog.alert('Great!');
      });
    }
    const openPrompt = () => {
      $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);
        });
      });
    }
    const openLogin = () => {
      $f7.dialog.login('Enter your username and password', function (username, password) {
        $f7.dialog.alert('Thank you!<br />Username:' + username + '<br />Password:' + password);
      });
    }
    const openPassword = () => {
      $f7.dialog.password('Enter your password', function (password) {
        $f7.dialog.alert('Thank you!<br />Password:' + password);
      });
    }
    const openAlerts = () => {
      $f7.dialog.alert('Alert 1');
      $f7.dialog.alert('Alert 2');
      $f7.dialog.alert('Alert 3');
      $f7.dialog.alert('Alert 4');
      $f7.dialog.alert('Alert 5');
    }
    const openVerticalButtons = () => {
      $f7.dialog.create({
        title: 'Vertical Buttons',
        buttons: [
          {
            text: 'Button 1',
          },
          {
            text: 'Button 2',
          },
          {
            text: 'Button 3',
          },
        ],
        verticalButtons: true,
      }).open();
    }
    const openPreloader = () => {
      $f7.dialog.preloader();
      setTimeout(function () {
        $f7.dialog.close();
      }, 3000);
    }
    const openCustomPreloader = () => {
      $f7.dialog.preloader('My text...');
      setTimeout(function () {
        $f7.dialog.close();
      }, 3000);
    }
    const openInfiniteProgress = () => {
      $f7.dialog.progress();
      setTimeout(function () {
        $f7.dialog.close();
      }, 3000);
    }
    const openDeterminedProgress = () => {
      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)
    }

    return $render;
  };
</script>