coherent-gameface-dropdown
v3.5.0
Published
A component for Coherent Labs Gameface.
Downloads
19
Readme
The gameface-dropdown is part of the Gameface custom components suite.
Installation
npm i coherent-gameface-dropdown
Usage with UMD:
<script src="./node_modules/coherent-gameface-dropdown/dist/dropdown.production.min.js"></script>
- add the gameface-dropdown component to your html:
<gameface-dropdown></gameface-dropdown>
To add options to the dropdown use the dropdown-option custom element:
<gameface-dropdown>
<dropdown-option>Cat</dropdown-option>
<dropdown-option>Dog</dropdown-option>
<dropdown-option>Giraffe</dropdown-option>
<dropdown-option>Lion</dropdown-option>
</gameface-dropdown>
To manually select an option use the dropdown value
setter.
For example - to select the Giraffe option from the dropdown above call:
const dropdown = document.getElementById('my-dropdown');
dropdown.value = 'Giraffe';
This is all! Load the file in Gameface to see the gameface-dropdown.
Usage with JavaScript:
If you wish to import the GamefaceDropdown using JavaScript you can remove the script tag and import it like this:
import { GamefaceDropdown } from 'coherent-gameface-dropdown';
or simply
import 'coherent-gameface-dropdown';
Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.
Multiple Select
To enable multiple selection add a multiple
attribute to the gameface-dropdown:
<gameface-dropdown class="gameface-dropdown-component" multiple>
<dropdown-option>Cat1</dropdown-option>
<dropdown-option>Parrot</dropdown-option>
</gameface-dropdown>
By default the multiple select will have its options list expanded and it won't have
a header. If you would like to have a dropdown that looks like a single select, but
supports multiple selected elements - add the collapsable
attribute along with the multiple
attribute:
<gameface-dropdown class="gameface-dropdown-component" multiple collapsable>
<dropdown-option>Cat1</dropdown-option>
<dropdown-option>Parrot</dropdown-option>
</gameface-dropdown>
Features and Limitations
This is not a standard HTML select multiple. It is a custom HTML element that enables you to define a list of options.
- The
multiple
attribute makes it possible to select more than one option using the Ctrl key and the mouse.- All options can be selected with Ctrl + A combination.
- Set the
disabled
attribute to gameface-dropdown or a dropdown-option to disable it. - Set the
selected
attribute to any dropdown-option to pre-select it.
These are some of the differences to the standard select that are partially or not yet supported:
- Selecting multiple options via keyboard - this is possible with Shift + Arrow Up/Left/Down/Right and Shift + Home/End.
- Selecting a range of elements.
Supported Attributes
You can modify the dropdown and its options using HTML attributes. The gameface-dropdown
supports:
- multiple - makes the dropdown multiple, enabling selecting more than one option
- collapsable - specifies if the options' list should be always visible
- disabled - makes the dropdown disabled
Also these options are added as setters to the dropdown so you can runtime change the dropdown using JavaScript. For example:
dropdown.multiple = true;
dropdown.collapsable = true;
dropdown.disabled = false;
The dropdown-option
supports:
- value - sets a custom value to the option different from its text content
- selected - makes an option selected
- disabled - disables an option
Note that attempting to remove an attribute from an option that does not have this attribute will have no effect! For example an option could be selected and not have the selected attribute, as selecting an option using the mouse will update only its internal selected property.
To add or remove an attribute use the setAttribute or the removeAttribute method.
Add the Styles
<link rel="stylesheet" href="coherent-gameface-components-theme.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="node_modules/coherent-gameface-scrollable-container/style.css">
<link rel="stylesheet" href="node_modules/coherent-gameface-slider/styles/horizontal.css">
<link rel="stylesheet" href="node_modules/coherent-gameface-slider/styles/vertical.css">
To overwrite the default styles, simply create new rules for the class names that you wish to change and include them after the default styles.