Several types of dialogs, including alert, confirm, prompt, action, select, and menu.
Installation
$ npm install fxos-dialog
Platform dependencies
- CSS Custom Properties
- Custom Elements
- Shadow DOM
Alert Dialog
Include folowing files in HTML
<script src="node_modules/fxos-component/fxos-component.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog-alert.js"></script>
Usage
<fxos-dialog-alert>No SIM card is present</fxos-dialog-alert>
Confirm Dialog
Include folowing files in HTML
<script src="node_modules/fxos-component/fxos-component.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog-confirm.js"></script>
Usage
<fxos-dialog-confirm>Are you sure you want to delete this contact?</fxos-dialog-confirm>
Prompt Dialog
Include folowing files in HTML
<script src="node_modules/fxos-component/fxos-component.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog-prompt.js"></script>
Usage
<fxos-dialog-prompt>Device name</fxos-dialog-prompt>
Action Dialog
Include folowing files in HTML
<script src="node_modules/fxos-component/fxos-component.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog-action.js"></script>
Usage
<fxos-dialog-action>
<h1>Descriptions...</h1>
<button>Action 1</button>
<button>Action 2</button>
</fxos-dialog-action>
Select Dialog
Include folowing files in HTML
<script src="node_modules/fxos-component/fxos-component.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog-select.js"></script>
Usage
<fxos-dialog-select>
<h1>Ring tone</h1>
<li>Classic prism</li>
<li>Wallphone</li>
</fxos-dialog-select>
Multiple Select
Add multiple
attribute in fxos-dialog-select
element to enable multiple selection.
<fxos-dialog-select multiple>
<h1>Ring tone</h1>
<li>Classic prism</li>
<li>Wallphone</li>
</fxos-dialog-select>
Menu Dialog
Include folowing files in HTML
<script src="node_modules/fxos-component/fxos-component.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog.js"></script>
<script src="node_modules/fxos-dialog/fxos-dialog-menu.js"></script>
Usage
<fxos-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>
</fxos-dialog-menu>
Examples
Readiness
- Accessibility
- Test Coverage
- Performance
- Visual/UX
- RTL
Developing locally
git clone https://github.com/fxos-components/fxos-switch.git
cd fxos-switch
npm install
(NPM3)npm start
Tests
- Ensure Firefox Nightly is installed on your machine. (Visit: Firefox Nightly Page)
- To run unit tests you need npm >= 3 installed.
$ npm install
$ npm run test-unit
If you would like tests to run on file change use:
$ npm run test-unit-dev
If your would like run integration tests, use:
$ export FIREFOX_NIGHTLY_BIN=/absolute/path/to/nightly/firefox-bin
$ npm run test-integration
Lint check
Run lint check with command:
$ npm run test-lint