cps-select

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