Time Filled Text Field

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

import com.pantrixui.components.date.timefilledtextfield.PantrixTimeFilledTextField

Ö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.

var start by remember { mutableStateOf<PantrixTime?>(null) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimeFilledTextField(
        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: aralık dışında yazılan bir saat alınmaz ve alan iki ucu söyler.

var call by remember { mutableStateOf<PantrixTime?>(null) }
PantrixTimeFilledTextField(
    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: günün yarısı kutuda rakamların yanında durur ve basınca çevrilir.

var alarm by remember { mutableStateOf<PantrixTime?>(PantrixTime(7, 30)) }
PantrixTimeFilledTextField(
    value = alarm,
    onValueChange = { alarm = it },
    label = "Alarm",
    is24Hour = false,
    tagKey = "alarm"
)

Forma bağlı

Bir formun alanına bağlı: saat boşken "Kaydet" hatayı gösterir ve odağı alana gönderir.

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"))
PantrixTimeFilledTextField(
    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)) {
    PantrixTimeFilledTextField(
        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 dolu bir metin alanı: saat rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı bir saat seçiciden seçilir. Dolu bir kutudaki PantrixTimeTextField'dır.

state

Çağıranın tuttuğu bir state üzerinde bir saat alanı; başka her bakımdan bir değerin PantrixTimeFilledTextField'ı 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.

FilledTextFieldStyle

PantrixFilledTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, içindekilerin çevresindeki boşluk, ikonları ve çerçevesi.

FilledTextFieldColors

Temanın renklerini almayan bir alan için PantrixFilledTextField'ı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: