aybolit
Lightweight web components library built with LitElement.
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);
Links
Compatibility
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 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);
```