ct-select-box

custom tag select-box

Usage no npm install needed!

<script type="module">
  import ctSelectBox from 'https://cdn.skypack.dev/ct-select-box';
</script>

README

select-box

In order for this plugin to work in older browsers, includ webcomponents.js plugin   https://github.com/webcomponents/webcomponentsjs



How to use it


1. Include css file in header of the page

<link rel="stylesheet" href="build/ct-select-box.min.css">

2. Include js file in footer of the page

<script src="build/ct-select-box.min.js"></script>

3. Using in html

<select-box placeholder="Please select">
    <select-box-header></select-box-header>
    <select-box-content>
        <select-box-option value="1"> 1 - option </select-box-option>
        <select-box-option value="2"> 2 - option </select-box-option>
        <select-box-option value="3"> 3 - option </select-box-option>
        <select-box-option value="4"> 4 - option </select-box-option>
        <select-box-option value="5"> 5 - option </select-box-option>
    </select-box-content>
</select-box>


Methods

  • reset() - Clearing of the selected option
  • setOption(text, value) - Sets custom option by parameters
  • isValid() - It checks whether option is selected

Properties

  • value - getting selected value
  • text - getting selected option text

Attributes

  • placeholder - Sets default text -not required
  • name - must be unique in one page -not required