Select Web Component

Install

npm install cps-select

Usage

<cps-select></cps-select>

const items = [ { name: 'One', value: 1 }, { name: 'Two', value: 2 } ];

const select = document.querySelector('cps-select');

select.selected = items[1];

select.addEventListener('changed', evt => { console.log(evt.detail); });

Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | ----------- | -------------- | ----------- | | items | -- | | SelectItem[] | [] | | maxWidth | max-width | | number | undefined | | minWidth | min-width | | number | 70 | | placeholder | placeholder | | string | undefined | | selected | -- | | SelectItem | items[0] |

Events

| Event | Description | Type | | --------- | --------------------------------- | -------------------------- | | changed | Return value after selected item | CustomEvent<SelectItem> |

Interfaces

interface SelectItem {
  name: string | number;
  value: string | number;
}

CSS Variables

--cps-font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

--cps-border-color: #dbdbdb;
--cps-bg-color: #fff;
--cps-button-hover-border-color: #a6a6a6;
--cps-icon-color: #4a4a4a;
--cps-label-font-color: #4a4a4a;
--cps-item-font-color: #4a4a4a;
--cps-item-hover-bg-color: #e3e3e3;
--cps-selected-font-color: #fff;
--cps-selected-bg-color: #a8a8e8;

--cps-select-height: 2.375rem  /* 38/16 */;
--cps-label-font-size: 0.875rem  /* 14/16 */;
--cps-icon-width: 0.75rem  /* 12/16 */;
--cps-item-font-size: 0.875rem  /* 14/16 */;

Overwrite CSS Variables

<style>
  cps-select {
    --cps-bg-color: black;
  }
</style>
<cps-select></cps-select>

Browser compatibility

• Chrome
• Edge
• Firefox
• Safari
• Opera

Changelog

1.0.2

• Release 07.05.2020

• Doc

  • Updates

1.0.1

• Release 26.04.2020

• Tests

  • Added unit and e2e tests

• Bugfixes

  • display empty label in select button if do not set placeholder, selectedItem or items is empty

1.0.0

• Release 24.04.2020

Built with StencilJS