Multiselect
| Last update: | () |
| Message | refactor(multiselect): select design |
| Committer: | rudywaltz |
| Version history | |
Default
<div class="e-multiselect">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<select name="multiselect1" multiple class="e-multiselect__select">
<option value="1">
Ea eiusmod
</option>
<option value="2">
Consectetur dolore
</option>
<option value="3">
Laboris officia
</option>
<option value="4">
In sed
</option>
<option value="5">
Culpa sed
</option>
<option value="6">
Et ut
</option>
<option value="7">
Ex nisi
</option>
<option value="8">
Et ad
</option>
<option value="9">
Cillum nisi
</option>
<option value="10">
Anim elit
</option>
</select>
</div>
</div>
<div class="e-multiselect">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
<select name="multiselect1" multiple="" class="e-multiselect__select">
<option value="1">Anim incididunt
</option>
<option value="2">Laboris consequat
</option>
<option value="3">Ut proident
</option>
<option value="4">Do nostrud
</option>
<option value="5">Sed consequat
</option>
<option value="6">Magna occaecat
</option>
<option value="7">Anim eu
</option>
<option value="8">Adipiscing in
</option>
<option value="9">Consequat veniam
</option>
<option value="10">Do laborum
</option>
</select>
</div>
</div>AVAILABLE FIELDS
Variations
Limited size
<div class="e-multiselect e-multiselect-large">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<select name="multiselect2" multiple class="e-multiselect__select">
<option value="1">
Do duis
</option>
<option value="2">
Proident dolor
</option>
<option value="3">
Aliquip qui
</option>
<option value="4">
Minim sunt
</option>
<option value="5">
Dolore sed
</option>
<option value="6">
Amet sunt
</option>
<option value="7">
Do exercitation
</option>
<option value="8">
Proident quis
</option>
<option value="9">
Reprehenderit in
</option>
<option value="10">
Pariatur duis
</option>
</select>
</div>
</div>
<div class="e-multiselect e-multiselect-large">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
<select name="multiselect2" multiple="" class="e-multiselect__select">
<option value="1">Irure voluptate
</option>
<option value="2">In anim
</option>
<option value="3">Enim deserunt
</option>
<option value="4">Quis commodo
</option>
<option value="5">Sed fugiat
</option>
<option value="6">Dolore occaecat
</option>
<option value="7">Tempor labore
</option>
<option value="8">Sint minim
</option>
<option value="9">Excepteur sed
</option>
<option value="10">Sunt aute
</option>
</select>
</div>
</div>AVAILABLE FIELDS
Empty state
<div class="e-multiselect e-multiselect-large">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<div class="e-multiselect__emptystate">
No available item
</div>
</div>
</div>
<div class="e-multiselect e-multiselect-large">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
<div class="e-multiselect__emptystate">No available item</div>
</div>
</div>AVAILABLE FIELDS
No available item
Double
<div class="e-multiselect">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
AVAILABLE FIELDS
</div>
<select name="multiselect2" multiple class="e-multiselect__select">
<option value="1">
Nostrud fugiat
</option>
<option value="2">
Culpa duis
</option>
<option value="3">
Et enim
</option>
<option value="4">
Mollit excepteur
</option>
<option value="5">
In enim
</option>
<option value="6">
Cillum deserunt
</option>
<option value="7">
Tempor duis
</option>
<option value="8">
Ullamco veniam
</option>
<option value="9">
Consequat ipsum
</option>
<option value="10">
Ullamco duis
</option>
</select>
</div>
<div class="e-multiselect__buttons">
<div onclick="MoveRight()" class="e-btn e-btn-onlyicon">
<e-icon icon="angle-double-right"></e-icon>
</div>
<div onclick="MoveLeft()" class="e-btn e-btn-onlyicon">
<e-icon icon="angle-double-left"></e-icon>
</div>
</div>
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">
FIELDS FOR THE EXPORT
</div>
<select id="chosen_elements" name="chosen_elements" multiple class="e-multiselect__select">
<option value="1">
Duis eiusmod
</option>
<option value="2">
Veniam tempor
</option>
<option value="3">
Exercitation ipsum
</option>
<option value="4">
Nostrud in
</option>
<option value="5">
Irure mollit
</option>
</select>
</div>
</div>
<div class="e-multiselect">
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
<select name="multiselect2" multiple="" class="e-multiselect__select">
<option value="1">Fugiat aliqua
</option>
<option value="2">Tempor magna
</option>
<option value="3">Dolor tempor
</option>
<option value="4">Tempor sit
</option>
<option value="5">Esse non
</option>
<option value="6">Aliquip lorem
</option>
<option value="7">Eiusmod pariatur
</option>
<option value="8">Dolore deserunt
</option>
<option value="9">Aliquip anim
</option>
<option value="10">Irure fugiat
</option>
</select>
</div>
<div class="e-multiselect__buttons">
<div onclick="MoveRight()" class="e-btn e-btn-onlyicon">
<e-icon icon="angle-double-right"></e-icon>
</div>
<div onclick="MoveLeft()" class="e-btn e-btn-onlyicon">
<e-icon icon="angle-double-left"></e-icon>
</div>
</div>
<div class="e-multiselect__item">
<div class="e-multiselect__item__title">FIELDS FOR THE EXPORT</div>
<select id="chosen_elements" name="chosen_elements" multiple="" class="e-multiselect__select">
<option value="1">Veniam ut
</option>
<option value="2">Dolor consequat
</option>
<option value="3">Nulla adipiscing
</option>
<option value="4">Minim et
</option>
<option value="5">Officia exercitation
</option>
</select>
</div>
</div>AVAILABLE FIELDS
FIELDS FOR THE EXPORT