@author.io/element-select
v1.0.12
Published
author-select custom element (web component).
Downloads
32
Readme
AuthorSelectElement 
author-select is a fully-stylable select menu component. It is designed to match the functionality of browser default select menus while providing flexibility for customization if desired.
author-select is broken down into several components:
author-selected-optionsauthor-optionsauthor-optionauthor-optgroup-labelauthor-optgroup
This allows each part of the component to be styled directly. Each of these components can also be used standalone in other applications as well.
We're using BrowserStack to make sure these components work on the browsers developers care about.
Usage
There are 4 versions of this element:
- author-select.min.js (ES6 Minified for Production)
- author-select.js (ES6 Unminified for Debugging)
- author-select.es5.min.js (ES5 Minified for Production)
- author-select.es5.js (ES5 Unminified for Debugging)
You only need to choose one of these files. If you need to support Internet Explorer, older versions of Chrome/Firefox/Safari, then you likely need the ES5 version. Each version has it's own source map, so it's always possible to trace activity back to a specific code block in the source.
The simplest way to use author-select is in combination with author-control. This combination makes it simple to create totally stylable single or multiple-select menus. Placing a select tag inside an author-control will automatically generate a fully-functional author-select menu and pair it with a label if provided.
Via Global CDN
<html>
<head>
<script src="https://cdn.author.io/author-elements/base/1.0.0/author-base.min.js"></script>
<script src="https://cdn.author.io/author-elements/select/x.x.x/author-select.min.js"></script>
</head>
</html>Via npm
- If the base class is not yet installed, install it:
npm install @author.io/element-base -S
- Next, install the select module locally:
npm install @author.io/element-select -S
- If using with
author-control
npm install @author.io/element-control -S
- Then include the components in your HTML:
<html>
<head>
<script src="./node_modules/@author.io/element-base/dist/author-base.min.js"></script>
<script src="./node_modules/@author.io/element-base/dist/author-control.min.js"></script>
<script src="./node_modules/@author.io/element-select/dist/author-select.min.js"></script>
</head>
<body>
<author-control>
<label>Select Menu</label>
<select [placeholder="Select an Option"] [multiple]>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<optgroup label="Grouped Options">
<option value="Grouped Option 1">Grouped Option 1</option>
<option value="Grouped Option 2">Grouped Option 2</option>
<option value="Grouped Option 3">Grouped Option 3</option>
</optgroup>
</select>
</author-control>
</body>
</html>If using without author-control, lay out author-select manually using the following markup:
<author-select>
<!-- <slot name="afterbegin"></slot> -->
<!-- <slot name="beforeselectedoptions"></slot> -->
<author-selected-options slot="selectedoptions"></author-selected-options>
<!-- <slot name="afterselectedoptions"></slot> -->
<!-- <slot name="beforeoptions"></slot> -->
<author-options slot="options">
<author-option value="Option 1">Option 1</author-option>
<author-option value="Option 2">Option 2</author-option>
<author-option value="Option 3">Option 3</author-option>
<author-optgroup-label>OPTGROUP LABEL</author-optgroup-label>
<author-optgroup>
<author-option value="Grouped Option 1">Grouped Option 1</author-option>
<author-option value="Grouped Option 2">Grouped Option 2</author-option>
<author-option value="Grouped Option 3">Grouped Option 3</author-option>
</author-optgroup>
</author-options>
<!-- <slot name="afteroptions"></slot> -->
<!-- <slot name="beforeend"></slot> -->
</author-select>Additional elements can be added to the various slots within the markup if desired.
Customization and Styling
author-select is optimized for use with NGN Chassis, a PostCSS-powered CSS Framework and Preprocessor. If using author-select separately, it and all its child elements can be styled directly with CSS. For a quick start, download the default theme.
The child elements of author-select can also be used independently to create customized UI components. See also author-datalist.