Multi Select

Kontrolün açtığı bir listeden birden çok seçim: bir sayfanın daraltıldığı projeler, bir dükkânın açık olduğu günler.

import com.pantrixui.components.overlay.multiselect.PantrixMultiSelect

Kutudaki yazı. Kutu, işaretlilerin etiketlerini seçeneklerin sırasıyla ve aralarında virgülle gösterir; sığmayanı tek satırda keser. Hiçbiri işaretli değilken placeholder görünür.
Özet. valueText verilirse kutu, bir şey işaretliyken etiketlerin yerine onu yazar: bir sayı ya da hepsi için tek bir söz.
Arama. searchable listeye, seçenekleri etiketine göre daraltan bir arama alanı koyar. Odak o alanda kalır: oklar eşleşen satırlar arasında gezer, klavyenin onay tuşu okların durduğu satırı işaretler ya da işaretini kaldırır.
Seçenekler. Seçenekler Select'in SelectOption'ıdır: bir değer, bir etiket, istenirse bir ikon. enabled = false olan seçenek listede kalır ve okunur, ama işaretlenemez.
Form. field alan PantrixMultiSelect seçimlerini, hatasını ve adını formun alanından alır: alanın değeri işaretlilerin kümesidir.
Hata ve devre dışı. error ve enabled Select'teki gibidir: hata kutunun kenarını, etiketini ve alttaki metni danger rolüne çevirir; devre dışı kutu odak almaz ve liste açılmaz.
Renkler ve stil. Select'in stilini ve renklerini paylaşır: SelectStyle ve SelectColors, kutusu için TextFieldStyle ve TextFieldColors. Select'lerini yeniden biçimlendiren bir ürün bunları da biçimlendirmiş olur. Onay kutuları temanın renginde kalır.
Otomasyon. tagKey kutuyu MultiSelect_<tagKey>, listesini MultiSelectList_<tagKey>, arama alanını MultiSelectSearch_<tagKey> diye etiketler. Seçenekler kutunun içinde adlandırılır: MultiSelect_projects.MultiSelectOption_compose.

Örnekler

Projeler

Bir listeyi projelere göre daraltan süzgeç. Her satır bir onay kutusudur: basmak işaretler ya da kaldırır ve liste açık kalır. Kutu, işaretlilerin etiketlerini seçeneklerin sırasıyla gösterir; hiçbiri işaretli değilken yer tutucuyu. Burada hiçbiri işaretli değilken bütün projeler gösterilir, kutu da bunu yer tutucusuyla söyler.

Etiketi yoktur; adını ekran okuyucuya contentDescription söyler. Kartın "Son olay" satırı onSelectionChange'in en son ne istediğini yazar; öteki örneklerin çoğunda da aynı satır vardır.

var chosen by rememberSaveable { mutableStateOf(emptySet<String>()) }
val report = LocalExampleEvents.current
PantrixMultiSelect(
    options = PROJECTS,
    selected = chosen,
    onSelectionChange = {
        chosen = it
        report(if (it.isEmpty()) "Tüm projeler gösteriliyor" else "${it.size} proje işaretli")
    },
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    placeholder = "Tüm projeler (${PROJECTS.size})",
    contentDescription = "Projeler",
    tagKey = "projects"
)

private val PROJECTS = listOf(
    SelectOption(value = "compose", label = "Rorty Compose Android", icon = PantrixIcons.Folder, tagKey = "compose"),
    SelectOption(value = "android", label = "Rorty Android", icon = PantrixIcons.Folder, tagKey = "android"),
    SelectOption(value = "swiftui", label = "Rorty SwiftUI iOS", icon = PantrixIcons.Folder, tagKey = "swiftui"),
    SelectOption(value = "uikit", label = "Rorty UIKIT iOS", icon = PantrixIcons.Folder, tagKey = "uikit")
)

Özet metni

valueText verilince kutu, bir şey işaretliyken etiketlerin yerine onu yazar: burada "5 gün". Çok seçenek işaretlenince kutu taşmaz.

Hiçbiri işaretli değilken yine yer tutucu görünür: bütün günlerin işaretini kaldır, kutu "Kapalı" yazar.

var chosen by rememberSaveable { mutableStateOf(setOf("mon", "tue", "wed", "thu", "fri")) }
val report = LocalExampleEvents.current
PantrixMultiSelect(
    options = DAYS,
    selected = chosen,
    onSelectionChange = {
        chosen = it
        report("${it.size} gün işaretli")
    },
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Açık günler",
    placeholder = "Kapalı",
    valueText = "${chosen.size} gün",
    tagKey = "open_days"
)

private val DAYS = listOf(
    SelectOption(value = "mon", label = "Pazartesi", tagKey = "mon"),
    SelectOption(value = "tue", label = "Salı", tagKey = "tue"),
    SelectOption(value = "wed", label = "Çarşamba", tagKey = "wed"),
    SelectOption(value = "thu", label = "Perşembe", tagKey = "thu"),
    SelectOption(value = "fri", label = "Cuma", tagKey = "fri"),
    SelectOption(value = "sat", label = "Cumartesi", tagKey = "sat"),
    SelectOption(value = "sun", label = "Pazar", tagKey = "sun")
)

Aranabilir

searchable = true listeye bir arama alanı koyar: yazdıkça seçenekler daralır. Odak arama alanında kalır: oklar eşleşen satırlar arasında gezer, klavyenin onay tuşu okların durduğu satırı işaretler ya da işaretini kaldırır ve arama yerinde kalır.

Aramada görünmeyen seçenekler işaretini korur: birkaç dil işaretle, sonra başka bir şey ara. Kutudaki etiketler ve kartın "Son olay" satırındaki sayı değişmez.

var chosen by rememberSaveable { mutableStateOf(emptySet<String>()) }
val report = LocalExampleEvents.current
PantrixMultiSelect(
    options = SKILLS,
    selected = chosen,
    onSelectionChange = {
        chosen = it
        report("${it.size} dil işaretli")
    },
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Bildiğiniz diller",
    placeholder = "Dil seçin",
    searchable = true,
    searchPlaceholder = "Dil ara…",
    tagKey = "skills"
)

private val SKILLS = listOf(
    SelectOption(value = "Kotlin", label = "Kotlin", tagKey = "kotlin"),
    SelectOption(value = "Java", label = "Java", tagKey = "java"),
    SelectOption(value = "Swift", label = "Swift", tagKey = "swift"),
    SelectOption(value = "Dart", label = "Dart", tagKey = "dart"),
    SelectOption(value = "TypeScript", label = "TypeScript", tagKey = "typescript"),
    SelectOption(value = "JavaScript", label = "JavaScript", tagKey = "javascript"),
    SelectOption(value = "Python", label = "Python", tagKey = "python"),
    SelectOption(value = "Go", label = "Go", tagKey = "go"),
    SelectOption(value = "Rust", label = "Rust", tagKey = "rust"),
    SelectOption(value = "C#", label = "C#", tagKey = "csharp"),
    SelectOption(value = "Ruby", label = "Ruby", tagKey = "ruby")
)

Kısmi devre dışı

SelectOption(enabled = false) tek bir seçeneği kapatır: seçenek listede kalır ve okunur, ama basılmaz ve ok tuşları onu atlar. Onay kutusu da devre dışı renklerle çizilir.

var chosen by rememberSaveable { mutableStateOf(setOf("mail")) }
val report = LocalExampleEvents.current
PantrixMultiSelect(
    options = CHANNELS,
    selected = chosen,
    onSelectionChange = {
        chosen = it
        report("${it.size} bildirim kanalı işaretli")
    },
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Bildirim kanalları",
    placeholder = "Bildirim yok",
    supportingText = "SMS ve arama bu planda yok.",
    tagKey = "channels"
)

private val CHANNELS = listOf(
    SelectOption(value = "mail", label = "E-posta", tagKey = "mail"),
    SelectOption(value = "sms", label = "SMS", enabled = false, tagKey = "sms"),
    SelectOption(value = "push", label = "Anlık bildirim", tagKey = "push"),
    SelectOption(value = "call", label = "Telefon araması", enabled = false, tagKey = "call")
)

Form alanı

field alan PantrixMultiSelect bir formun alanına bağlıdır: alanın değeri işaretlilerin kümesidir, hatası yardım metninin yerini alır, kimliği otomasyon anahtarıdır (MultiSelect_roles). En az birinin işaretlenmesini Rules.satisfies ister.

Hiçbirini işaretlemeden "Davet et"e bas: kuralın mesajı yardım metninin yerine geçer ve odak buraya gelir. Sonra bir rol işaretle ve işaretini kaldır: son işaret kalkınca hata hemen görünür, çünkü alana artık dokunulmuştur.

val form = rememberFormState()
val scope = rememberCoroutineScope()
val roles = form.field(
    "roles",
    initial = emptySet<String>(),
    Rules.satisfies("En az bir rol seçin") { it.isNotEmpty() }
)
val report = LocalExampleEvents.current
PantrixMultiSelect(
    field = roles,
    options = ROLES,
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Roller",
    placeholder = "Rol seçin",
    supportingText = "Bir kişinin birden çok rolü olabilir."
)
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixButton(
        text = "Davet et",
        onClick = { scope.launch { form.submit { report("Davet gönderildi: ${roles.value.size} rol") } } },
        form = form,
        tagKey = "submit_roles"
    )
    PantrixButton(
        text = "Sıfırla",
        onClick = {
            form.reset()
            report("Form sıfırlandı")
        },
        variant = ButtonVariant.Text,
        tagKey = "reset_roles"
    )
}

private val ROLES = listOf(
    SelectOption(value = "admin", label = "Yönetici", tagKey = "admin"),
    SelectOption(value = "editor", label = "Düzenleyici", tagKey = "editor"),
    SelectOption(value = "viewer", label = "İzleyici", tagKey = "viewer")
)

Hata ve devre dışı

error = true ve enabled = false Select'teki gibidir. Hatalı kutunun kenarı, etiketi ve alttaki metni temanın danger rolündedir ve metin ekran okuyucuya hata olarak söylenir. Devre dışı kutu devre dışı renklerle çizilir, odak almaz ve listesi açılmaz; neyin işaretli olduğunu yine gösterir.

PantrixMultiSelect(
    options = ROLES,
    selected = emptySet(),
    onSelectionChange = {},
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Roller",
    placeholder = "Rol seçin",
    supportingText = "En az bir rol seçin",
    error = true,
    tagKey = "roles_in_error"
)
PantrixMultiSelect(
    options = ROLES,
    selected = setOf("editor", "viewer"),
    onSelectionChange = {},
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    enabled = false,
    label = "Roller",
    supportingText = "Rolleri yalnızca yönetici değiştirebilir.",
    tagKey = "roles_disabled"
)

private val ROLES = listOf(
    SelectOption(value = "admin", label = "Yönetici", tagKey = "admin"),
    SelectOption(value = "editor", label = "Düzenleyici", tagKey = "editor"),
    SelectOption(value = "viewer", label = "İzleyici", tagKey = "viewer")
)

Kendi renkleri

colors = SelectColors(…) listenin zeminini, yazısını ve kenarını; fieldColors = TextFieldColors(…) kutunun odaklı kenarını değiştirir. Burada liste uygulamanın kendi morunun yumuşak dolgusundadır.

Onay kutuları temanın renginde kalır. Seçili satırın dolgusu (selectedContainer) burada kullanılmaz: çok seçimli listede seçim onay kutusuyla gösterilir, satır doldurulmaz.

val own = ownColors()
var chosen by rememberSaveable { mutableStateOf(setOf("compose")) }
val report = LocalExampleEvents.current
PantrixMultiSelect(
    options = PROJECTS,
    selected = chosen,
    onSelectionChange = {
        chosen = it
        report("${it.size} proje işaretli")
    },
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Projeler",
    placeholder = "Tüm projeler (${PROJECTS.size})",
    colors = SelectColors(container = own.container, content = own.onContainer, border = own.color),
    fieldColors = TextFieldColors(focusedBorder = own.color),
    tagKey = "own_projects"
)

private val PROJECTS = listOf(
    SelectOption(value = "compose", label = "Rorty Compose Android", icon = PantrixIcons.Folder, tagKey = "compose"),
    SelectOption(value = "android", label = "Rorty Android", icon = PantrixIcons.Folder, tagKey = "android"),
    SelectOption(value = "swiftui", label = "Rorty SwiftUI iOS", icon = PantrixIcons.Folder, tagKey = "swiftui"),
    SelectOption(value = "uikit", label = "Rorty UIKIT iOS", icon = PantrixIcons.Folder, tagKey = "uikit")
)

Stil

Stil de Select'inkidir: style listenin (SelectStyle), fieldStyle kutunun (TextFieldStyle) geometrisidir. Burada listenin satırları 56dp'dir (itemHeight), liste en çok 240dp olur ve sığmayan seçenekler içinde kayar (maxHeight). Kutunun köşeleri tam yuvarlaktır: TextFieldStyle(shape = ShapeRole.Full).

Yalnızca verilen alanlar değişir; gerisi temanın ve platformun stilinden gelir.

var chosen by rememberSaveable { mutableStateOf(setOf("sat", "sun")) }
PantrixMultiSelect(
    options = DAYS,
    selected = chosen,
    onSelectionChange = { chosen = it },
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth(),
    label = "Teslimat günleri",
    placeholder = "Gün seçin",
    style = SelectStyle(maxHeight = 240.dp, itemHeight = 56.dp),
    fieldStyle = TextFieldStyle(shape = ShapeRole.Full),
    tagKey = "styled_days"
)

private val DAYS = listOf(
    SelectOption(value = "mon", label = "Pazartesi", tagKey = "mon"),
    SelectOption(value = "tue", label = "Salı", tagKey = "tue"),
    SelectOption(value = "wed", label = "Çarşamba", tagKey = "wed"),
    SelectOption(value = "thu", label = "Perşembe", tagKey = "thu"),
    SelectOption(value = "fri", label = "Cuma", tagKey = "fri"),
    SelectOption(value = "sat", label = "Cumartesi", tagKey = "sat"),
    SelectOption(value = "sun", label = "Pazar", tagKey = "sun")
)

API

options

Kontrolün açtığı bir listeden birden çok seçim: bir sayfanın daraltıldığı projeler, bir dükkânın açık olduğu günler.

Parametre	Tür	Varsayılan	Ne olduğu
`options`	`List<SelectOption<T>>`		Seçenekler, gösterildikleri sırayla. Hiç seçenek yoksa liste bunu söyler.
`selected`	`Set<T>`		Şu an seçili olan değerler: değeri bunların arasında olan her seçenek işaretlidir.
`onSelectionChange`	`(Set<T>) -> Unit`		Yeni bir küme istemek için kümenin tamamıyla çağrılır: basılan seçeneğin değeri eklenmiş ya da çıkarılmış önceki küme.
`modifier`	`Modifier`	`Modifier`	Alanın bütününün modifier'ı: etiketinin, kutusunun ve kutunun altındakilerin.
`enabled`	`Boolean`	`true`	Listenin açılıp açılamayacağı. Listesi açılamayan kontrol odak almaz, devre dışı renklerle çizilir ve devre dışı olduğunu söyler.
`label`	`String?`	`null`	Seçimin ne olduğu. Kutunun üstüne yazılır ve ekran okuyucu için alanın adıdır, listesi de bu adla duyurulur.
`placeholder`	`String?`	`null`	Hiçbir şey seçili değilken kutuda gösterilir.
`supportingText`	`String?`	`null`	Kutunun altındaki yardım metni. `error` ile birlikte neyin düzeltileceğini söyleyen mesajdır ve ekran okuyucu onu hata olarak duyurur.
`error`	`Boolean`	`false`	Seçimin hatalı olup olmadığı: kenar, etiket ve yardım metni danger rolüne döner, ekran okuyucuya da söylenir.
`valueText`	`String?`	`null`	Bir şey seçiliyken kutunun, seçili etiketlerin yerine gösterdiği metin.
`searchable`	`Boolean`	`false`	Listede seçenekleri aramak için bir alan olup olmadığı.
`searchPlaceholder`	`String?`	`null`	Arama alanının boşken gösterdiği metin ve alanın adı. Bu null ise temanın arama için kullandığı sözcüktür.
`style`	`SelectStyle?`	`null`	Bu çağrının kendi `SelectStyle`'ı, listesinin çizildiği stil: çevresindeki her stili ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir, her platformda.
`fieldStyle`	`TextFieldStyle?`	`null`	Bu çağrının kendi `TextFieldStyle`'ı, kutusunun çizildiği stil: çevresindeki her stili ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir, her platformda.
`colors`	`SelectColors?`	`null`	Listesinin kendi renkleri, temanın rollerinin yerine: verdikleri kullanılır, gerisi temanın kalır. Onay kutuları temanın renklerindedir.
`fieldColors`	`TextFieldColors?`	`null`	Kutusunun kendi renkleri, bir metin alanının aldığı gibi. Devre dışı kontrol, ne verilirse verilsin temanın devre dışı renkleriyle çizilir.
`contentDescription`	`String?`	`null`	Ekran okuyucunun alan için söylediği: `label` verilmeyen alanın adıdır.
`tagKey`	`String?`	`null`	Alanın otomasyon anahtarı: alan `MultiSelect_<tagKey>`, listesi `MultiSelectList_<tagKey>`, listenin arama alanı `MultiSelectSearch_<tagKey>` diye etiketlenir, seçenekleri de onun içinde adlandırılır: `MultiSelect_<tagKey>.MultiSelectOption_<option's key>`. Listesinin açıldığını ve bir seçeneğin işaretlendiğini ya da işaretinin kaldırıldığını bildirir: seçeneğin anahtarıyla, hiçbir zaman etiketiyle değil.
`interactionSource`	`MutableInteractionSource?`	`null`	Alanın dışarı taşınan etkileşimleri: odağı, üstündeki fare ve basışları. Null verilirse alan kendi kaynağını tutar.
`presentation`	`OverlayPresentation`	`OverlayPresentation.Popover`	listenin nasıl gösterildiği: varsayılan alanın altında; pencerenin altından bir sheet olarak, başlığı alanın etiketi; ya da dar bir pencerede biri, daha geniş pencerede öteki. Liste açılırken seçilir, kapanana kadar kalır.

field

Bir formun alanına bağlı MultiSelect: seçimleri, hatası ve adı field'dan gelir.

Parametre	Tür	Varsayılan	Ne olduğu
`field`	`FormField<Set<T>>`		Kontrolün gösterdiği ve değiştirdiği alan: seçeneklerin değerlerinden oluşan bir küme.
`options`	`List<SelectOption<T>>`		Seçenekler, gösterildikleri sırayla.
`modifier`	`Modifier`	`Modifier`	Alanın bütününün modifier'ı: etiketinin, kutusunun ve kutunun altındakilerin.
`enabled`	`Boolean`	`true`	Listenin açılıp açılamayacağı.
`label`	`String?`	`null`	Seçimin ne olduğu. Kutunun üstüne yazılır ve ekran okuyucu için alanın adıdır.
`placeholder`	`String?`	`null`	Hiçbir şey seçili değilken kutuda gösterilir.
`supportingText`	`String?`	`null`	Kutunun altındaki yardım metni: alanın orada gösterecek bir hatası olmadığı sürece.
`valueText`	`String?`	`null`	Bir şey seçiliyken kutunun, seçili etiketlerin yerine gösterdiği metin.
`searchable`	`Boolean`	`false`	Listede seçenekleri aramak için bir alan olup olmadığı.
`searchPlaceholder`	`String?`	`null`	Arama alanının boşken gösterdiği metin ve alanın adı.
`style`	`SelectStyle?`	`null`	Bu çağrının kendi `SelectStyle`'ı, listesinin çizildiği stil.
`fieldStyle`	`TextFieldStyle?`	`null`	Bu çağrının kendi `TextFieldStyle`'ı, kutusunun çizildiği stil.
`colors`	`SelectColors?`	`null`	Listesinin kendi renkleri: verdikleri kullanılır, gerisi temanın kalır.
`fieldColors`	`TextFieldColors?`	`null`	Kutusunun kendi renkleri, bir metin alanının aldığı gibi.
`contentDescription`	`String?`	`null`	`label` verilmeyen alan için ekran okuyucunun söylediği.
`interactionSource`	`MutableInteractionSource?`	`null`	Alanın dışarı taşınan etkileşimleri. Null verilirse alan kendi kaynağını tutar.
`presentation`	`OverlayPresentation`	`OverlayPresentation.Popover`	listenin nasıl gösterildiği: alanın altında, bir sheet olarak ya da pencerenin genişliğine göre.

SelectStyle

Bir PantrixSelect'in açtığı liste: çizildiği panel, bu panelin ait olduğu kutudan ve pencerenin kenarlarından ne kadar uzakta durduğu ve satırları.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Panelin köşeleri: her platformda şekil ölçeğinin orta adımı, kutunun köşeleri gibi.
`maxHeight`	`Dp`	`Dp.Unspecified`	Panelin en çok yüksekliği: sığmayan seçenekler kayar.
`elevation`	`Dp`	`Dp.Unspecified`	Panelin uygulamanın üstünde ne kadar yüksekte durduğu, yani gölgesinin ne kadar büyük olduğu.
`gap`	`Dp`	`Dp.Unspecified`	Kutu ile listesinin arası.
`margin`	`Dp`	`Dp.Unspecified`	Panel ile pencerenin kenarları arasında, bir de pencereyi orada örten şeylerle arasında boş bırakılan yer: bir sistem çubuğu, bir ekran çentiği, klavye.
`verticalPadding`	`Dp`	`Dp.Unspecified`	İlk satırın üstündeki ve son satırın altındaki boşluk.
`itemHeight`	`Dp`	`Dp.Unspecified`	Platformun dokunma hedefi daha yüksek değilse bir satırın en az yüksekliği.
`horizontalPadding`	`Dp`	`Dp.Unspecified`	Panelin kenarından bir satırın başındaki şeye ve satırın sonundaki şeyden öteki kenara kadar olan boşluk. Her preset metin alanının kendi değerini taşır: böylece bir seçeneğin etiketi kutudaki metnin başladığı yerde başlar.
`iconSize`	`Dp`	`Dp.Unspecified`	Bir seçeneğin ikonu ve seçili olanın yanındaki onay işareti.
`iconGap`	`Dp`	`Dp.Unspecified`	Bir satırın parçalarının arası: onay kutusu, ikonu, etiketi ve onay işareti.

SelectColors

Temanın renklerini almayan bir çağrı için bir PantrixSelect'in listesinin boyandığı renkler: verilen renk kullanılır, verilmeyen temanın kalır. Kutunun renkleri TextFieldColors'tır.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Panelin dolgusu. Temanın `surface`'ı.
`content`	`Color`	`Color.Unspecified`	Bir seçeneğin etiketi ve ikonu. Temanın `textPrimary`'si.
`selectedContainer`	`Color`	`Color.Unspecified`	Tek seçimli bir select'te seçili seçeneğin satırının dolgusu. `primary` rolünün container'ı. Çok seçimli bir select seçimlerini onay kutularıyla gösterir ve hiçbir satırı doldurmaz.
`selectedContent`	`Color`	`Color.Unspecified`	Tek seçimli bir select'te seçili seçeneğin etiketi, ikonu ve yanındaki onay işareti. `primary` rolünün `onContainer`'ı.
`border`	`Color`	`Color.Unspecified`	Panelin çevresindeki ince çizgi ve satırlar ile listenin arama alanı arasındaki çizgi. Çevredeki çizgi paneli, altında duran kendi rengindeki bir yüzeyden ayırır, gölgenin az göründüğü koyu temada olduğu gibi. Temanın kendi zeminlerinde temanın `divider`'ıdır. Bir dolgunun üstünde, o çizginin okunmayacağı yerde, `content`'in bir payıdır: Subtle bir düğmenin kenarı gibi. Saydam bir renk verilirse çizgi çizilmez.

Erişilebilirlik

Klavye. Select'inkidir: Enter ya da boşluk listeyi açar, oklar satırlar arasında gezer ve sondan başa döner, Home ve End ilk ve son satıra gider. Enter ve boşluk işaretler ya da işareti kaldırır.