https://github.com/geocine/avn-select

Styleable select custom element
https://github.com/geocine/avn-select

custom-elements dropdown select stenciljs webcomponents

Last synced: 4 months ago
JSON representation

Styleable select custom element

• Host: GitHub
• URL: https://github.com/geocine/avn-select
• Owner: geocine
• License: mit
• Created: 2018-07-27T14:08:53.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:16:46.000Z (almost 3 years ago)
• Last Synced: 2025-04-03T03:51:10.318Z (6 months ago)
• Topics: custom-elements, dropdown, select, stenciljs, webcomponents
• Language: TypeScript
• Size: 772 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Select Component

This a styleable select Web Component built using Stencil.







## Usage

Populating the options

```html

  

  

    const avnSelect = document.querySelector('#sample');

    avnSelect.options = [

      {

        "label": "Orange",

        "value": "OR"

      },

      {

        "label": "Apple",

        "value": "APP"

      }

    ];

  

```

OR you can initialize it declaratively

```html

  

    Orange

    Apple

  

```

> NOTE: this is only for initialization, for updating you need to modify the `.options` attribute in an immutable way eg:

```js

  const avnSelect = document.querySelector('#sample');

  avnSelect.options = [...avnSelect.options, {label: 'Strawberry', value: 'STR'}];

```

Listening for `change` event

```js

  const avnSelect = document.querySelector('#sample');

  avnSelect.addEventListener('change', (option) => {

    // returns { label , value }

    // do something with returned value

  })

```

Getting the selected value

```js

  const avnSelect = document.querySelector('#sample');

  const selectedValue = avnSelect.value;

  // returns { label, value }

```

## Styling

These are the available CSS variables and their default values:

```css

:host {

  --arrow-color: #000;

  --arrow-bg-color: #fff;

  --border-color: #ccc;

  --selected-color: #0A3874;

  --hover-color: #1668d3;

  --hover-text-color: #fff;

  --height: 34px;

  --border-radius: 5px;

  --content-width: 100%;

  --content-border-radius: 0;

  --focused-border-color: rgba(8,57,114,0.5);

  --focused-border-shadow: inset 0 1px 1px; 

}

```