1.1.24 • Published 6 months ago
@prof-dev/improved-select v1.1.24
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>
1.1.23
6 months ago
1.1.22
6 months ago
1.1.21
10 months ago
1.1.20
10 months ago
1.1.24
6 months ago
1.1.9
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.12
1 year ago
1.1.11
1 year ago
1.1.10
1 year ago
1.1.16
1 year ago
1.1.15
1 year ago
1.1.14
1 year ago
1.1.13
1 year ago
1.1.19
12 months ago
1.1.18
1 year ago
1.1.17
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.1.6
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.2
3 years ago
1.0.3
3 years ago
1.0.1
3 years ago