ikea-component-dropdown v0.0.2
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:
```javascript
import Dropdown from '@ikea-aoa/ikea-component-dropdown';
```
- 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 |
6 years ago