slim select

Pilih Ramping 2

slimselectjs.com

Tarik-turun pilih tingkat lanjut

Mendukung

Dokumentasi dan Contoh

Lihat situs web untuk daftar lengkap pengaturan, metode, dan panggilan balik acara

Fitur

• Tidak Ada Ketergantungan
• JS: 29kb - 5kb gzip
• CSS: 7kb - 1kb gzip
• Pilih Tunggal
• Multi Pilih
• Opsi yang Dapat Ditambahkan Pengguna
• Opsi HTML
• Data yang Dapat Diatur
• Acara Panggilan Balik
• Penampung
• Mencari
• Nonaktifkan Opsi
• CSS ringan
• Skema Warna Terang
• Warisan Gaya dan Kelas
• Animasi Bersih
• Pemain
• naskah ketikan

Kerangka kerja

• Lihat

Instalasi

npm install slim-select

atau

 < script src =" https://unpkg.com/slim-select@latest/dist/slimselect.min.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/slim-select@latest/dist/slimselect.css " />

Penggunaan Sederhana

 import SlimSelect from 'slim-select'

new SlimSelect ( {
  select : '#selectElement' ,
} ) 

 < select id =" selectElement " >
  < option value =" value1 " > Value 1 </ option >
</ select > 

Data

Data adalah larik objek yang mewakili opsi dan grup opt.

Lihat di bawah untuk daftar tipe data

 new SlimSelect ( {
  select : '#selectElement' ,

  // Array of Option objects
  data : [ { text : 'Value 1' , value : 'value1' } ] ,

  // or

  // Array of Optgroups and/or Options
  data : [ { label : 'Optgroup Label' , options : { text : 'Value 1' , value : 'value1' } } ] ,
} ) 

Tipe Data

 // <optgroup>
var optgroup = {
  label : 'label' , // Required
  selectAll : false , // Optional - default false
  closable : 'off' , // Optional - default 'off' - 'off', 'open', 'close'
  options : [ ] , // Required - value is an array of options
}

// <option>
var option = {
  text : 'text' , // Required
  value : 'value' , // Optional - value will be set by text if not set
  html : '<b>Html</b>' , // Optional - if set, used for display purposes
  selected : false , // Optional - default is false
  display : true , // Optional - default is true
  disabled : false , // Optional - default is false
  mandatory : false , // Optional - default is false
  placeholder : false , // Optional - default is false
  class : '' , // Optional - default is not set
  style : '' , // Optional - default is not set
  data : { } , // Optional - If you have data attributes
} 

Pengaturan

Pengaturan adalah daftar bidang yang membantu menyesuaikan cara SlimSelect beroperasi

 new SlimSelect ( {
  select : '#selectElement' ,

  settings : {
    // Below are a list of optional fields
    // their values are the defaults
    disabled : false ,
    alwaysOpen : false ,
    showSearch : true ,
    focusSearch : true ,
    searchPlaceholder : 'Search' ,
    searchText : 'No Results' ,
    searchingText : 'Searching...' ,
    searchHighlight : false ,
    closeOnSelect : true ,
    contentLocation : document . body ,
    contentPosition : 'absolute' ,
    openPosition : 'auto' , // options: auto, up, down
    placeholderText : 'Select Value' ,
    allowDeselect : false ,
    hideSelected : false ,
    showOptionTooltips : false ,
    minSelected : 0 ,
    maxSelected : 1000 ,
    timeoutDelay : 200 ,
    maxValuesShown : 20 ,
    maxValuesMessage : '{number} selected' ,
    addableText : 'Press "Enter" to add {value}' ,
  } ,
} ) 

Acara

Peristiwa adalah panggilan balik fungsi ketika tindakan tertentu terjadi

 new SlimSelect ( {
  select : '#selectElement' ,

  events : {
    search : ( searchValue : string , currentData : DataArray ) => Promise < DataArrayPartial > | DataArrayPartial
    searchFilter : ( option : Option , search : string ) = > boolean
    addable : ( value : string ) = > Promise < OptionOptional | string > | OptionOptional | string | Error
    beforeChange : ( newVal : Option [ ] , oldVal : Option [ ] ) = > boolean | void
    afterChange : ( newVal : Option [ ] ) = > void
    beforeOpen : ( ) = > void
    afterOpen : ( ) = > void
    beforeClose : ( ) = > void
    afterClose : ( ) = > void
    error : ( err : Error ) = > void
  } ,
} )