Custom HTML elements for the Firefox Marketplace
JavaScript CSS HTML Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
gh-pages
tests
.gitignore
.travis.yml
Makefile
README.md
bower.json
index.html
karma.conf.js
marketplace-elements.js
marketplace-elements.styl
package.json
release.sh

README.md

marketplace-elements

Custom HTML elements for Firefox Marketplace.

make install
make
make serve

View Demo

Banner

The banner is used to show messages to users.

<mkt-banner>
  Hey! You should read this.
  <a href="#do-something">Perform some action</a>
  <small>This small text will be hidden on narrow screens.</small>
</mkt-banner>

Configuration

attribute description
theme Change the color scheme. May be any of the actions defined in marketplace-frontend or a light variant. Examples: "success" (default) or "success-light". Additionally "firefox" may be specified for a gray banner with the Firefox logo.
dismiss Configure dismissal. Values: "on" (default), "off", "remember", "session".

Segmented

The segmented control acts like a select but provides a horizontal layout.

<mkt-segmented>
    <select>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3" selected>Three</option>
    </select>
</mkt-segmented>
document.querySelector('mkt-segmented').value;  // "3"

Login

A login link. This is pretty basic. It will add the "persona" class to a link.

<mkt-login link>Login!</mkt-login>

Configuration

attribute description
link Required. Link is the only supported type right now.

Prompt

A form that can take the form of a page or as a modal. As a page, it has just a submit button. As a modal, it has a cancel and submit button.

As a page:

<mkt-prompt>
  <form>
    <p>What is your name?</p>
    <textarea name="name"></textarea>
    <div>
      <button>Cancel</button>
      <button>Submit</button>
    </div>
  </form>
</mkt-prompt>

As a modal:

<mkt-prompt data-modal>
...

Events

event description
mkt-prompt-cancel cancel button is clicked
mkt-prompt-submit submit button is clicked. Serialized form data is passed in event details.

Configuration

attribute description
validate function to determine form validity. Defaults to only call form.checkvalidity.