Contact us Create app

Directory

← Back

aybolit

Lightweight web components library built with LitElement.

Author

Rating

Links

Popularity

<100

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

  • Button
  • Checkbox
  • Progress
  • Range
  • 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);

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • lit-element#^2.0.1
  • lit-html#^1.0.0
Released
2019-03-12
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

aybolit - Vaadin Add-on Directory

Lightweight web components library built with LitElement. aybolit - Vaadin Add-on Directory
# Aybolit Core Aybolit Core is a set of base classes built with [LitElement](https://github.com/Polymer/lit-element). 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) attribute is forced to use `display: none !important` for all components). ## Installation Aybolit Core is available as [npm package](https://www.npmjs.com/package/@aybolit/core): ```sh # 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: ```js 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); ```
Online