Select

მიმოხილვა

Basic Select

                <!-- Basic Select -->
                                         <div  class="gk-select">
                                             <button class="gk-select-button" role="combobox" aria-labelledby="select button"
                                                 aria-haspopup="listbox" aria-expanded="false" aria-controls="listbox"
                                                 data-select-target="MultiSelect">
                                                 <span  class="gk-select-value"></span>
                                                 <label  class="gk-select-floating-label"  style="display:block;">BasicSelect Input</label>
                                                 <i  class="material-symbols-outlined">arrow_drop_down</i>
                                             </button>
                                             <ul  role="listbox"  class="gk-select-dropdown"  data-select-id="MultiSelect">
                                                 <li  role="option"  class="list-item"  value="angular">
                                                     <span  class="list-item-content">Angular</span>
                                                     <i  class="material-symbols-outlined checkbox-mark">done</i>
                                                 </li>
                                                 <li  role="option"  class="list-item"  value="react">
                                                     <span  class="list-item-content">React</span>
                                                     <i  class="material-symbols-outlined checkbox-mark">done</i>
                                                 </li>
                                                 <li  role="option"  class="list-item"  value="html">
                                                     <span  class="list-item-content">HTML</span>
                                                     <i  class="material-symbols-outlined checkbox-mark">done</i>
                                                 </li>
                                                 <li  role="option"  class="list-item"  value="css">
                                                     <span  class="list-item-content">CSS</span>
                                                     <i  class="material-symbols-outlined checkbox-mark">done</i>
                                                 </li>
                                                 <li  role="option"  class="list-item"  value="js">
                                                     <span  class="list-item-content">Javascript</span>
                                                     <i  class="material-symbols-outlined checkbox-mark">done</i>
                                                 </li>
                         
                                             </ul>
                                         </div>

Multi Select

        <div  class="gk-select">
                                   <button  class="gk-select-button"  role="combobox"  aria-labelledby="select button"  aria-haspopup="listbox"  aria-expanded="false"  aria-controls="listbox"  data-select-target="BasicSelect">
                                     <span  class="gk-select-value"></span>
                                     <label  class="gk-select-floating-label"  style="display:block;">MultiSelectable Inputs</label>
                                     <i  class="material-symbols-outlined">arrow_drop_down</i>
                                   </button>
                                   <ul  role="listbox"  class="gk-select-dropdown"  aria-multiselectable="true"  data-select-id="BasicSelect">
                                     <li  role="option"  class="list-item"  value="b">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">Angular</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">React</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">HTML</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">CSS</span>
                                     </li>
                                      <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">Javascript</span>
                                     </li>
                                   </ul>
                                 </div>

Image Select

        <div  class="gk-select">
                                   <button  class="gk-select-button"  role="combobox"  aria-labelledby="select button"  aria-haspopup="listbox"  aria-expanded="false"  aria-controls="listbox"  data-select-target="ImageSelect">
                                     <span  class="gk-select-value"></span>
                                     <label  class="gk-select-floating-label"  style="display:block;">ImgSelectable Inputs</label>
                                     <i  class="material-symbols-outlined">arrow_drop_down</i>
                                   </button>
                                   <ul  role="listbox"  class="gk-select-dropdown"  aria-multiselectable="true"  data-select-id="ImageSelect">
                                     <li  role="option"  class="list-item"  value="angular">
                                       <span  class="checkbox__mark"></span>
                                       <img  src="https://gokk-design.vercel.app/public/images/angular.png"  width="20"  height="20">
                                       <span  class="list-item-content">Angular</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="react">
                                       <span  class="checkbox__mark"></span>
                                       <img  src="https://gokk-design.vercel.app/public/images/react.png"  width="20"  height="20">
                                       <span  class="list-item-content">React</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="html">
                                       <span  class="checkbox__mark"></span>
                                       <img  src="https://gokk-design.vercel.app/public/images/html.png"  width="20"  height="20">
                                       <span  class="list-item-content">HTML</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="css">
                                       <span  class="checkbox__mark"></span>
                                       <img  src="https://gokk-design.vercel.app/public/images/css.svg"  width="20"  height="20">
                                       <span  class="list-item-content">CSS</span>
                                     </li>
                                      <li  role="option"  class="list-item"  value="js">
                                       <span  class="checkbox__mark"></span>
                                       <img  src="https://gokk-design.vercel.app/public/images/js.png"  width="20"  height="20">
                                       <span  class="list-item-content">Javascript</span>
                                     </li>
                                   </ul>
                                 </div>

Disabled Select

        <!-- Disabled Select -->
                                 <div  class="gk-select"  aria-disabled="true">
                                   <button class="gk-select-button" role="combobox" aria-labelledby="select button" aria-haspopup="listbox"
                                     aria-expanded="false" aria-controls="listbox" data-select-target="disabledSelect">
                                     <span  class="gk-select-value"></span>
                                     <label  class="gk-select-floating-label"  style="display:block;">MultiSelectable Inputs</label>
                                     <i  class="material-symbols-outlined">arrow_drop_down</i>
                                   </button>
                                   <ul role="listbox" class="gk-select-dropdown" aria-multiselectable="true"
                                     data-select-id="disabledSelect">
                                     <li  role="option"  class="list-item"  value="b">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">ჯავა</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">პითონი</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">ჰტმლ</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <span  class="list-item-content">ანგულარი</span>
                                     </li>
                                     <li  role="option"  class="list-item"  value="c">
                                       <span  class="checkbox__mark"></span>
                                       <i  class="material-symbols-outlined">subscriptions</i>
                                       <span  class="list-item-content">ბუთსტრაპი</span>
                                     </li>
                                   </ul>
                                 </div>

კონფიგურაცია

კომპონენტის კონფიგურაცია

Select კომპონენტს სჭირდება, რომ ჰქონდეს Button და ul ელემენტები, რომლებსაც უნდა ჰქონდეთ იგივე ID. ul-ს უნდა ჰქონდეს ატრიბუტი data-select-id, ხოლო Button-ს data-select-target. Select ელემენტი 4 ტიპისაა - Basic, Multi, Img, Disabled პირველი არის ჩვეულებრივი ელემენტი, რომელშიც ირჩევა მხოლოდ ერთი მათგანი, მეორეში შესაძლებელია აირჩეს რამდენიმე, მესამე ვარიანტში შეგვიძლია გვქონდეს ფოტოები, ხოლო მეოთხე ვარიანტი არის გათიშული Select კომპონენტი.