Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

astore-elements

0.0.0 • Public • Published

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.

Keywords

none

Install

npm i astore-elements

DownloadsWeekly Downloads

2

Version

0.0.0

License

none

Last publish

Collaborators

  • avatar