Creates a custom select with UIkit.
Add the css and the js file to your page and call the createSelectElements
function at the point you want to create the custom select. I recommend after the JS of Uikit.
There are three parameters that you can give the function.
{
"adjust-width": true,
"ms": 20,
"two": true
}
- The parameter
adjust-width
lets you customize if the selects should have the same width. Use either true of false. - The
ms
parameter is a parameter that lets the script wait a certain amount of ms before it adjusts the size of the input boxes. The default value is 20ms. You can turn the delay of by using a value of 0. In this case the width of all the selects may not be the same, because UIkit loads loads the icons after the execution of this script. - The
two
parameter lets you choos if there will be a special case for selects with only two values. If you let the value be the default (true) the currently selected value will not be displayed. Only the other value will be visible in the select dropdown.
You can focus the elements with tab
just like you would normally do. If you focus a element you can press enter
. This will result in the same action as if you would have clicked the element.
To create a custom select add the class custom-select
to a div
. Inside of this div
create the select element with the different options.
It is crucial that you add a selected
tag to the default value of the select and that every option has a value.
The label element is optional as well as the uk-padding-middle class.
<div class="custom-select uk-padding-middle">
<select id="custom-select">
<option value="audio" selected>Audio</option>
<option value="video">Video</option>
</select>
<label>Format</label>
</div>
Call the follwoing functions with your arguments to create the selects.
createSelectElements({
"adjust-width": true,
"ms": 20,
"two": true
})
If the value of the select changes a change
event gets fired. This is the only event you get from the orginal select. If you want to have the value of the select just use the value of the select you created. It is not visible, but the value is always up to date.
document.getElementById("custom-select").addEventListener("change", evt => {
console.log("My value has changed and is now "
+ evt.currentTarget.value);
});
If you want to change the width of the custom selects after their initialisation you can call the adjustSize
function with two parameters. The default parameters are the parameters in the example below.
The ms
parameter tells the function how long it is supposed to wait until it tries to resize the element.
The className
parameter lets you if the select button (select-button
), or the label button (select-label-button
) should be resized.
adjustSize({
"classname": "select-button",
"ms": 20
});
Select with tow options (one allready selected and therefore not visible anymore).
A select with more than two options. The selected option is highlighted.
Select without a label.
The UIkit files you should have linked:
- uikit.js
- uikit-icons.js
- uikit.css