@aofl/select

The <aofl-select-list> takes any number of <aofl-list-option>. Selecting any option will give it a selected attribute with. Selecting an option emits an event with the selected value. The <aofl-multiselect-list> takes any number of <aofl-list-option>. Sel

Usage no npm install needed!

<script type="module">
  import aoflSelect from 'https://cdn.skypack.dev/@aofl/select';
</script>

README

@aofl/select

Api Documentation

Installation

npm i -S @aofl/select

The <aofl-select-list> takes any number of <aofl-list-option>. Selecting any option will give it a selected attribute with. Selecting an option emits an event with the selected value.

Examples

Usage

import '@aofl/select';

<aofl-select-list @change="${(e) => context.updateSelected(e)}">
  <aofl-list-option>1</aofl-list-option>
  <aofl-list-option>2</aofl-list-option>
  <aofl-list-option>3</aofl-list-option>
  <aofl-list-option>4</aofl-list-option>
</aofl-select-list>

Keyboard Interactions

The list options may be focused using both tab/shift-tab, up/down arrows, and mouse hover. Selections may be made with enter or space.

attributes

Attributes Type Default Description
disabled String 'false' Is the list disabled

Events

Name Triggered By Description
change updateSelected Custom event emitted when a new selection is made

Slots

Name Fallback Content Description
Elements to be selected

The <aofl-multiselect-list> takes any number of <aofl-list-option>. Selecting any option will give it a selected attribute and add it to the selected array. Selecting an option emits an event with the selected array.

Examples

Usage

import '@aofl/select';

<aofl-multiselect-list @change="${(e) => context.updateSelected(e)}">
  <aofl-list-option>1</aofl-list-option>
  <aofl-list-option>2</aofl-list-option>
  <aofl-list-option>3</aofl-list-option>
  <aofl-list-option>4</aofl-list-option>
</aofl-multiselect-list>

Keyboard Interactions

The list options may be focused using both tab/shift-tab, up/down arrows, and mouse hover. Selections may be made with enter or space.

attributes

Attributes Type Default Description

Events

Name Triggered By Description
change updateSelected Custom event emitted when a new selection is made

Slots

Name Fallback Content Description
Elements to be selected

The <aofl-list-option> is a simple selectable component that takes a value. It typically lives in an <aofl-select-list> but it can be used in any component where selections are made. It must have a parent with of a component with an addToParent method.

Examples

Usage

import '@aofl/select';

<aofl-select-list @change="${(e) => context.updateSelected(e)}">
  <aofl-list-option>1</aofl-list-option>
  <aofl-list-option>2</aofl-list-option>
  <aofl-list-option>3</aofl-list-option>
  <aofl-list-option>4</aofl-list-option>
</aofl-select-list>

Keyboard Interactions

List options will be focused when hovering over them. Selections may be made with enter or space.

attributes

Attributes Type Default Description
selected String 'false' Is the option selected?
disabled String 'false' Is the option available to be selected?
value String Value of the aofl-list-option

Slots

Name Fallback Content Description
Content to be displayed. Defaults as the
value if no value attribute provided