Skip to content
This repository has been archived by the owner. It is now read-only.
Custom HTML elements for the Firefox Marketplace
JavaScript CSS HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
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.
You can’t perform that action at this time.