Time Text Field

Günün bir saati için bir metin alanı: saat rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı bir saat seçiciden seçilir.

import com.pantrixui.components.date.timetextfield.PantrixTimeTextField

• Yalnız rakam. Alan en çok dört rakam alır; saat tamamlanınca iki nokta kendiliğinden gelir: 1430 14:30 olur. Saatin başı olamayan bir ilk rakam tek haneli bir saattir: 930 09:30 olur. Telefonda rakam klavyesi açılır.
• Yapıştırılan saat. Yazılmış bir saat yazıldığı gibi okunur: 14:30, 14.30, 1430, ya da günün yarısıyla 2:30 PM, ÖS 2:30. Dakikadan sonra yazılan saniye bırakılır.
• 12 saat. is24Hour = false ile saatler 01–12 yazılır ve günün yarısı kutuda rakamların yanında bir düğme olarak durur: basmak ya da odaktayken Boşluk onu çevirir, masaüstünde ve web'de A ve P de. Varsayılan 24 saattir, seçicideki gibi.
• Değer. onValueChange alanın saati her değiştiğinde çağrılır: alanın aldığı tam bir saat, ya da alan boş, yarım ya da saat olmayan rakamlar tuttuğunda null. Yarım yazılan saat value null iken ekranda kalır; dışarıdan gelen başka bir saat alana yazılır, saniyesi saat ile dakika yeniden yazılana dek korunur.
• Kendi hatası. Alan yanlış yazılanı kutunun altına kendisi yazar: alandan çıkınca tamamlanmamış bir saat, saatte olmayan bir saat (25:00), minTime ile maxTime dışında bir saat. minTime maxTime'dan sonraysa saatler gece yarısını geçer, bir gece vardiyası gibi. Uygulamanın error'u önce gelir; mesajı supportingText'tir.
• Seçici. Düğmeyle, masaüstünde ve web'de Alt+↓ ile, salt okunur alanda kutuya basınca, Enter ya da Boşluk ile açılır; presentation neyde açılacağını seçer: varsayılan dar pencerede sheet, daha genişte popover; ya da her pencerede popover, sheet ya da dialog. Seçicide her basış saati hemen alana yazar ve seçici açık kalır, böylece önce saat, sonra dakika seçilir; bir değerde Enter, Escape ve dışarı basmak kapatır. Klavyeyle açılınca odak seçili saate, yoksa şimdiki saate geçer. minuteStep yalnız seçicinin dakikalarını belirler; aradaki bir dakika yazılabilir.
• Üç biçim. value ve onValueChange alan biçim; state alan biçim (rememberTimeTextFieldState()): time alanın saatidir, text yarım yazılmış alanı boş alandan ayırır; field alan biçim bir formun alanına bağlanır.
• Saat türü. Saatler PantrixTime'dır; bir günle birleştirmek ve başka kütüphanelere çevirmek için docs/guide/date-time/DATE_TIME_GUIDE.md.

Örnekler

Toplantı başlangıcı, çeyrek saatlerle

Bir toplantının başlangıcı, çeyrek saatlerle: seçicinin dakikaları on beşer dakika arayla gelir. Yazarken aradaki bir dakika da alınır. Saat tamamlanınca altta yazılır.

var start by remember { mutableStateOf<PantrixTime?>(null) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimeTextField(
        value = start,
        onValueChange = { start = it },
        label = "Toplantı başlangıcı",
        minuteStep = QUARTER,
        showClearButton = true,
        tagKey = "meeting_start"
    )
    PantrixText(
        text = start?.let { "Başlangıç: ${strings.time(it.hour, it.minute, is24Hour = true)}" }
            ?: "Henüz bir saat yok",
        style = PantrixTheme.typography.body
    )
}

private const val QUARTER = 15

Çalışma saatleri içinde

Çalışma saatleri içinde bir arama: 09:00'dan önce ya da 18:00'den sonra yazılan bir saat alınmaz ve alan iki ucu söyler. Seçicide aralık dışındaki saatler soluktur ve basılmaz.

var call by remember { mutableStateOf<PantrixTime?>(null) }
PantrixTimeTextField(
    value = call,
    onValueChange = { call = it },
    label = "Arama saati",
    supportingText = "Hafta içi 09:00 ile 18:00 arası",
    minTime = PantrixTime(OPENS, 0),
    maxTime = PantrixTime(CLOSES, 0),
    tagKey = "call"
)

private const val OPENS = 9

private const val CLOSES = 18

12 saatlik saat

12 saatlik bir saat: saatler 01–12 yazılır, günün yarısı kutuda rakamların yanında durur. Ona basmak ÖÖ ile ÖS arasında çevirir; seçicide de üçüncü bir sütun olarak gelir.

var alarm by remember { mutableStateOf<PantrixTime?>(PantrixTime(7, 30)) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimeTextField(
        value = alarm,
        onValueChange = { alarm = it },
        label = "Alarm",
        is24Hour = false,
        tagKey = "alarm"
    )
    PantrixText(
        text = alarm?.let { "Alarm: ${strings.time(it.hour, it.minute, is24Hour = false)}" } ?: "Alarm kapalı",
        style = PantrixTheme.typography.body
    )
}

Seçici bir sheet'te ya da dialog'da

Seçici bir sheet'te açılır: telefonda parmağa yakın, ekranın genişliğinde. presentation = Dialog onu pencerenin ortasında bir dialog'da açar. Sheet her basışta açık kalır; dışarı basmak ya da geri onu kapatır.

var pickup by remember { mutableStateOf<PantrixTime?>(null) }
var presentation by remember { mutableStateOf(DatePickerPresentation.Sheet) }
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(DatePickerPresentation.Popover, "Popover", tagKey = "popover"),
            SegmentOption(DatePickerPresentation.Sheet, "Sheet", tagKey = "sheet"),
            SegmentOption(DatePickerPresentation.Dialog, "Dialog", tagKey = "dialog")
        ),
        selected = presentation,
        onSelect = { presentation = it },
        fullWidth = false,
        tagKey = "presentation"
    )
    PantrixTimeTextField(
        value = pickup,
        onValueChange = { pickup = it },
        label = "Teslim alma saati",
        minuteStep = FIVE_MINUTES,
        presentation = presentation,
        tagKey = "pickup"
    )
}

private const val FIVE_MINUTES = 5

Uygulamanın hatası ve devre dışı

Uygulamanın kendi hatası alanınkinden önce gelir: dolu bir saat error ve supportingText ile söylenir. Altındaki alan devre dışıdır: odak almaz, seçicisi açılmaz.

var slot by remember { mutableStateOf<PantrixTime?>(PantrixTime(BOOKED, 0)) }
val taken = slot == PantrixTime(BOOKED, 0)
PantrixTimeTextField(
    value = slot,
    onValueChange = { slot = it },
    label = "Randevu saati",
    supportingText = if (taken) "Bu saat dolu, başka bir saat seçin" else "Yarım saatlik bir randevu",
    error = taken,
    tagKey = "slot"
)
PantrixTimeTextField(
    value = PantrixTime(OPENS, 0),
    onValueChange = {},
    enabled = false,
    label = "Açılış saati",
    tagKey = "opening"
)

private const val OPENS = 9

private const val BOOKED = 14

Salt okunur: yalnız seçiciden

Salt okunur bir alan yazılmaz: saat yalnız seçiciden seçilir. Kutuya basmak, Enter ya da Boşluk seçiciyi açar. Saatin bir listeden seçilmesi gereken yerler için.

var departure by remember { mutableStateOf<PantrixTime?>(null) }
PantrixTimeTextField(
    value = departure,
    onValueChange = { departure = it },
    readOnly = true,
    label = "Kalkış saati",
    placeholder = "Seçiciden seçin",
    minuteStep = QUARTER,
    tagKey = "departure"
)

private const val QUARTER = 15

Forma bağlı

Bir formun alanına bağlı: saat boşken "Kaydet" hatayı gösterir ve odağı alana gönderir. Hata alandan çıkınca da görünür; seçiciye geçmek alandan çıkmak sayılmaz. Saat olmayan rakamlar değeri null bırakır, kural onu yakalar.

val form = rememberFormState()
val scope = rememberCoroutineScope()
val report = LocalExampleEvents.current
val start = form.field<PantrixTime?>("shift_start", initial = null, Rules.required("Vardiyanın başlangıcını yazın"))
PantrixTimeTextField(
    field = start,
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Vardiya başlangıcı",
    minuteStep = QUARTER
)
PantrixButton(
    text = "Kaydet",
    onClick = { scope.launch { form.submit { report("Kaydedildi") } } },
    form = form,
    tagKey = "save_shift"
)

private const val QUARTER = 15

Bir durumla

Bir durumla: state.time alanın saati, state.text yazılan rakamlar. İkisi birlikte boş alanı yarım yazılmış alandan ayırır. Düğme durumun saatini değiştirir; alan onu kendisi yazar, 12 saatte günün yarısıyla birlikte.

val state = rememberTimeTextFieldState()
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimeTextField(
        state = state,
        label = "Hatırlatma",
        is24Hour = false,
        tagKey = "reminder"
    )
    PantrixText(
        text = when {
            state.time != null -> "Saat: ${state.time}"
            state.text.isEmpty() -> "Alan boş"
            else -> "Yarım: ${state.text}"
        },
        style = PantrixTheme.typography.body
    )
    PantrixButton(
        text = "Şimdiyi yaz",
        onClick = { state.time = PantrixTime.now() },
        variant = ButtonVariant.Outline,
        tagKey = "write_now"
    )
}

API

value

Günün bir saati için bir metin alanı: saat rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı bir saat seçiciden seçilir.

state

Çağıranın tuttuğu bir state üzerinde bir saat alanı; başka her bakımdan bir değerin PantrixTimeTextField'ı gibidir: durumun time'ı alanın saatidir, onu yazmak saati alana koyar, text'i de yarım yazılmış bir alanı boş bir alandan ayırır.

field

Bir formun alanına bağlı bir saat alanı: saati, hatası ve adı field'dan gelir.

TextFieldStyle

PantrixTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, metninin çevresindeki boşluk, ikonları ve kenarlığı.

TextFieldColors

Temanın renklerini almayan bir alan için PantrixTextField'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temadaki rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir, başkasını vermez: