@prof-dev/improved-select
v1.1.24
Published
Helper for live clicks events management
Downloads
7
Readme
improved-select
Custom select library allowing you to use any custom layout & behavior you like
Installation
npm i @prof-dev/improved-select
Usage
Styles
import "@prof-dev/improved-select/lib/improved-select.css";
or
@import "@prof-dev/improved-select/lib/improved-select.css";
Code
import { ImprovedSelect } from "@prof-dev/improved-select";
ImprovedSelect.initAllAvailableOnPage();
<div class="improved-select select-regular" data-improved-select>
<select multiple hidden>
<option value="value-1">Select value 1</option>
<option value="value-2">Select value 2</option>
<option value="value-3">Select value 3</option>
<option value="value-4">Select value 4</option>
<option value="value-5">Select value 5</option>
<option value="value-6">Select value 6</option>
<option value="value-7">Select value 7</option>
<option value="value-8">Select value 8</option>
<option value="value-9">Select value 9</option>
<option value="value-10">Select value 10</option>
<option value="value-11">Select value 11</option>
<option value="value-12">Select value 12</option>
<option value="value-13">Select value 13</option>
<option value="value-14">Select value 14</option>
<option value="value-15">Select value 15</option>
</select>
<div class="select-header" data-select-toggle>
<div class="select-icon">😀</div>
<div class="select-value">
<div data-select-value></div>
<div class="select-placeholder">Search / Multiple</div>
</div>
<div class="select-arrow">▾</div>
</div>
<div class="select-body" data-select-body>
<div class="select-search">
<div class="search-icon">🔍</div>
<input
type="text"
class="search-input"
placeholder="Search reply"
data-select-search
/>
</div>
<div class="select-menu">
<div class="select-menu-item" data-select-option>Select value 1</div>
<div class="select-menu-item" data-select-option>Select value 2</div>
<div class="select-menu-item" data-select-option>Select value 3</div>
<div class="select-menu-item" data-select-option>Select value 4</div>
<div class="select-menu-item" data-select-option>Select value 5</div>
<div class="select-menu-item" data-select-option>Select value 6</div>
<div class="select-menu-item" data-select-option>Select value 7</div>
<div class="select-menu-item" data-select-option>Select value 8</div>
<div class="select-menu-item" data-select-option>Select value 9</div>
<div class="select-menu-item" data-select-option>Select value 10</div>
<div class="select-menu-item" data-select-option>Select value 11</div>
<div class="select-menu-item" data-select-option>Select value 12</div>
<div class="select-menu-item" data-select-option>Select value 13</div>
<div class="select-menu-item" data-select-option>Select value 14</div>
<div class="select-menu-item" data-select-option>Select value 15</div>
</div>
</div>
</div>