Description

This component should be used as a dropdown styled with IKEA guidelines.

Installation

This component requires Node.js. It is also recommended to use Webpack. Read more about how to setup the project here.

1. Go to the project directory in the terminal.
2. Install the component by running the following command:

   npm install @ikea-aoa/ikea-component-dropdown --save

Use in Webpack

You will find additional information about advanced usage under the documentation page.

1. Use the following code to import the component in your script:

   import Dropdown from '@ikea-aoa/ikea-component-dropdown';

2. Add the following code to your HTML template:

   <ikea-component name="Dropdown">
     <dropdown-option value="1">Option 1</dropdown-option> <!-- Instance selectedValue="1" -->
     <dropdown-option disabled>Option 2</dropdown-option> <!-- Option is disabled -->
     <dropdown-option>Option 3</dropdown-option> <!-- Instance selectedValue="Option 3" -->
   </ikea-component>

Use as Bundle

It is possible to use the component as a minified bundle, but our recommendation is to use Webpack, as the bundled version will create additional overhead when using multiple components.

Add the following code to your HTML template:

<script src="dropdown.min.js"></script>

<ikea-component name="Dropdown">
   <dropdown-option value="1">Option 1</dropdown-option> <!-- Instance selectedValue="1" -->
   <dropdown-option disabled>Option 2</dropdown-option> <!-- Option is disabled -->
   <dropdown-option>Option 3</dropdown-option> <!-- Instance selectedValue="Option 3" -->
</ikea-component>

Custom Events

This component can emit a Instance event. Read more about events under Fundementals in the documentation.

| Name | Description | | ------ | ---------------------------------------- | | change | Add event listener to event "change", as this component will trigger this event every time the value changes |

Static Event

An event listener can be added to the class. The first argument will in that case be the component that triggered the event.

Button.on('change', (selectedValues) => {
    console.log('Value changed: ' + selectedValues);
});

Instance Event

The below example shows how to listen to the running instance.

Button.on('load', (Button) => {
    Button.on('change', (selectedValues) => {
        console.log('Value changed: ' + selectedValues);
    });
});

The below example is the selectedValues object recieved in the change event

{ selectedValue: "1", selectedText: "Option 1", selectedIndex: 0 }

Attributes

| Name | Type | Required | Description | | ------------- | ------- | -------- | ---------------------------------------- | | data-disabled | Boolean | false | If set to true, dropdown is disabled |

Release Notes

| Version | What's new | | ------- | ---------------------------------------- | | 1.0.0 | Initial release | | | |