astore-elements

Custom HTML elements for Astian Astore.

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 astore-frontend or a light variant. Examples: "success" (default) or "success-light". Additionally "firefox" may be specified for a gray banner with the Astian 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. |