1.0.2 • Published 4 years ago
cps-select v1.0.2
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