Açılır liste

Bu, tarayıcının kendi açılır listesini kullanan gerçek bir <select> öğesidir — yani JavaScript olmadan çalışır, telefonda doğru açılır ve bu kitaplıktan hiçbir şey olmadan klavyeyle gezilebilir.

select() çıplak denetimdir; selectField() onu tıpkı textField() gibi bir etiket, yardım metni ve hata iletisiyle sarar.

Temel açılır liste

Seçenekler düz dize olabilir; bu durumda değer ile etiket aynıdır.

selectField({
  label: 'Tema',
  name: 'theme',
  options: ['Açık', 'Koyu', 'Sistem'],
})

Değerler ve etiketler

Gönderilen değer, kişinin okuduğu metinden farklı olduğunda nesne geçirin. value seçili seçeneği işaretler.

selectField({
  label: 'Çıktı',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — varsayılan' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Yer tutucu

Yer tutucu, devre dışı bir ilk seçenek olarak işlenir ve value yokken seçili olur — böylece alan, geçerli bir seçim olmadan boş başlar.

selectField({
  label: 'Dağıtım hedefi',
  name: 'target',
  placeholder: 'Bir sunucu seçin…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Gruplar

Kendi options dizisi olan bir girdi bir <optgroup> olur.

selectField({
  label: 'Sayfa uzantısı',
  name: 'ext',
  value: '.ht.js',
  options: [
    { label: 'JavaScript', options: ['.ht.js', '.html.js'] },
    { label: 'TypeScript', options: ['.ht.ts', '.html.ts'] },
    { label: 'JSX', options: ['.ht.jsx', '.ht.tsx'] },
  ],
})

Boyutlar

stack({ gap: 'md' },
  selectField({ label: 'Küçük', name: 'sm', size: 'sm', options: ['Bir', 'İki'] }),
  selectField({ label: 'Orta', name: 'md', size: 'md', options: ['Bir', 'İki'] }),
  selectField({ label: 'Büyük', name: 'lg', size: 'lg', options: ['Bir', 'İki'] }),
)

Yardım, hata ve devre dışı

html lang özniteliği için kullanılır.
Devam etmek için bir framework seçin.
stack({ gap: 'lg' },
  selectField({
    label: 'Yerel ayar',
    name: 'locale',
    options: ['en', 'es', 'fr'],
    help: 'html lang özniteliği için kullanılır.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Birini seçin…',
    options: ['sitelo'],
    error: 'Devam etmek için bir framework seçin.',
  }),
  selectField({
    label: 'Plan',
    name: 'plan',
    options: ['Ücretsiz'],
    disabled: true,
  }),
)

Veriden

Seçenekler yalnızca bir dizidir, bu yüzden genellikle sayfa için data() işlevinin zaten yüklediği şeyden gelirler.

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Merhaba dünya' },
    { slug: 'static-first', title: 'Önce statik' },
    { slug: 'no-runtime', title: 'Çalışma zamanı yok' },
  ]

  return selectField({
    label: 'Öne çıkan yazı',
    name: 'featured',
    value: 'static-first',
    options: posts.map((post) => ({ value: post.slug, label: post.title })),
  })
})()

Proplar

PropTürVarsayılanAçıklama
optionsSelectOption[][]Dizeler, { value, label, disabled } nesneleri ya da bir grup için { label, options }.
valuestring | number—Hangi seçeneğin seçili olduğu.
placeholderstring—Devre dışı ilk seçenek, değer yokken seçili olur.
size'sm' | 'md' | 'lg''md'Denetim yüksekliği ve metin boyutu.
namestring—Form alanı adı; kimlik ondan türetilir.
invalidbooleanfalsearia-invalid ayarlar. selectField bunu sizin için error değerinden ayarlar.
disabledbooleanfalseDenetimi devre dışı bırakır.

selectField() ek olarak label, help, error, required ve fieldClass alır — bkz. textField(). Çocuklar üretilen seçeneklerin ardına eklenir, böylece ihtiyaç duyduklarınızı elle yazabilirsiniz.