etiennesegonzac/gaia-dialog

<gaia-dialog>

gaia-dialog contains several type of dialogs, including alert, confirm, prompt, action, select, and menu.

Installation

$ bower install gaia-components/gaia-dialog

Alert Dialog

Include folowing files in HTML

<script src="bower_components/gaia-list/gaia-dialog.js"></script>
<script src="bower_components/gaia-list/gaia-dialog-alert.js"></script>

Usage

<gaia-dialog-alert>No SIM card is present</gaia-dialog-alert>

Confirm Dialog

Include folowing files in HTML

<script src="bower_components/gaia-list/gaia-dialog.js"></script>
<script src="bower_components/gaia-list/gaia-dialog-confirm.js"></script>

Usage

<gaia-dialog-confirm>Are you sure you want to delete this contact?</gaia-dialog-confirm>

Prompt Dialog

Include folowing files in HTML

<script src="bower_components/gaia-list/gaia-dialog.js"></script>
<script src="bower_components/gaia-list/gaia-dialog-prompt.js"></script>

Usage

<gaia-dialog-prompt>Device name</gaia-dialog-prompt>

Action Dialog

Include folowing files in HTML

<script src="bower_components/gaia-list/gaia-dialog.js"></script>
<script src="bower_components/gaia-list/gaia-dialog-action.js"></script>

Usage

<gaia-dialog-action>
  <h1>Descriptions...</h1>
  <button>Action 1</button>
  <button>Action 2</button>
</gaia-dialog-action>

Select Dialog

Include folowing files in HTML

<script src="bower_components/gaia-list/gaia-dialog.js"></script>
<script src="bower_components/gaia-list/gaia-dialog-select.js"></script>

Usage

<gaia-dialog-select>
  <h1>Ring tone</h1>
  <li>Classic prism</li>
  <li>Wallphone</li>
</gaia-dialog-select>

Multiple Select

Add multiple attribute in gaia-dialog-select element to enable multiple selection.

<gaia-dialog-select multiple>
  <h1>Ring tone</h1>
  <li>Classic prism</li>
  <li>Wallphone</li>
</gaia-dialog-select>

Menu Dialog

Include folowing files in HTML

<script src="bower_components/gaia-list/gaia-dialog.js"></script>
<script src="bower_components/gaia-list/gaia-dialog-menu.js"></script>

Usage

<gaia-dialog-menu>
  <button data-icon="firefox">Open in new window</button>
  <button data-icon="firefox">Add to Home Screen</button>
  <button data-icon="firefox">Share link</button>
  <button data-icon="firefox">Settings</button>
</gaia-dialog-menu>

Examples

• Example