vcl-token

0.1.0 • Public • Published

VCL token

A selectable item from a list of possible items.

Features

  • Optional button to remove the token.
  • Support for selected and highlighted states.
  • A container to get a gaps relative to container's border right.

Usage

basic example

A button may be embedded to offer a control to remove the token.

button example

A selected and highlighted state is supported.

states example

Classes

  • vclToken
  • vclTokenContainer: Container for tokens to get proper paddings.
  • vclTokenLabel

Modifiers

  • vclSelected
  • vclHighlighted

Variables

  • --token-bg-color
  • --token-border-color
  • --token-border-hover-color
  • --token-border-selected-color
  • --token-bg-selected-color
  • --token-selected-color
  • --token-border-highlighted-color
  • --token-bg-highlighted-color
  • --token-highlighted-color
  • --token-color

Demo

example.html on GH-pages.

Readme

Keywords

Package Sidebar

Install

npm i vcl-token

Weekly Downloads

2

Version

0.1.0

License

MIT

Last publish

Collaborators

  • dani723
  • vanthome