Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/add readme #16

Merged
merged 11 commits into from
Oct 16, 2022
Prev Previous commit
Fix some minor issues in timepicker's README.
  • Loading branch information
marosseleng committed Oct 16, 2022
commit f9f3b58f8dc566951c7fdb36c002670014b4a397
62 changes: 31 additions & 31 deletions docs/timepicker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,44 @@ There are 2 mandatory parameters for `TimePickerDialog`:
- `onTimeChange`: called when user taps the confirmation button, the parameter is the `LocalTime` representing the selected time.

Example of `TimePickerDialog` usage:

```kotlin
var isDialogShown: Boolean by rememberSaveable {
mutableStateOf(false)
}
val (selectedTime, setSelectedTime) = rememberSaveable {
mutableStateOf(LocalTime.now().noSeconds())
}
if (isDialogShown) {
TimePickerDialog(
onDismissRequest = { isDialogShown = false },
initialTime = selectedTime,
onTimeChange = {
setSelectedTime(it)
isDialogShown = false
},
title = { Text(text = "Select time") }
)
}
```
```kotlin
var isDialogShown: Boolean by rememberSaveable {
mutableStateOf(false)
}
val (selectedTime, setSelectedTime) = rememberSaveable {
mutableStateOf(LocalTime.now().noSeconds())
}
if (isDialogShown) {
TimePickerDialog(
onDismissRequest = { isDialogShown = false },
initialTime = selectedTime,
onTimeChange = {
setSelectedTime(it)
isDialogShown = false
},
title = { Text(text = "Select time") }
)
}
```

## Customization
The time picker is a highly customizable component. It allows to customize colors, shapes and typography.
You can pass custom shapes of the digit-box as well as the AM/PM box:

_It is not recommended to pass an anonymous instance of `TimePickerShapes`. Instead, create an implementation separately and use that to prevent creating a new instance each time the component is recomposed._

```kotlin
TimePickerDialog(
// ...
shapes = object : TimePickerShapes {
override val clockDigitsShape: Shape
get() = CutCornerShape(topStart = 16.dp, topEnd = 3.dp, bottomStart = 0.dp, bottomEnd = 24.dp)
override val amPmSwitchShape: Shape
get() = CircleShape
}
)
```
```kotlin
TimePickerDialog(
// ...
shapes = object : TimePickerShapes {
override val clockDigitsShape: Shape
get() = CutCornerShape(topStart = 16.dp, topEnd = 3.dp, bottomStart = 0.dp, bottomEnd = 24.dp)
override val amPmSwitchShape: Shape
get() = CircleShape
}
)
```
produces
![custom-shapes](resources/time-picker-day-custom-shapes.png)

Expand Down