@aybolit/core

0.1.0 • Public • Published

Aybolit Core

Aybolit Core is a set of base classes built with LitElement. Each class can be extended and registered as custom element.

Overview

Aybolit Core is meant to be used as a base for creating themable web components. It does not provide any CSS except for certain "normalize" styles (especially, hidden attribute is forced to use display: none !important for all components).

Installation

Aybolit Core is available as npm package:

# with npm
npm i @aybolit/core --save

# with yarn
yarn add @aybolit/core

Components

  • [x] Button
  • [x] Checkbox
  • [x] Progress
  • [x] Range
  • [x] Switch

Creating Components

You can extend a component base class like this:

import { ButtonElement } from '@aybolit/core';
import { css } from 'lit-element';

class CustomButton extends ButtonElement {
  static get styles() {
    return [
      /* core styles */
      super.styles,
      /* your own CSS */
      css`
        .button {
          color: var(--my-button-color, #111);
        }
      `
    ];
  }
}

customElements.define('custom-button', CustomButton);

Readme

Keywords

none

Package Sidebar

Install

npm i @aybolit/core

Weekly Downloads

20

Version

0.1.0

License

MIT

Unpacked Size

138 kB

Total Files

16

Last publish

Collaborators

  • web-padawan