-
Notifications
You must be signed in to change notification settings - Fork 3
Pickers
A Picker is a component where you can select something. We have several different Pickers in our library, which are found below.
An item picker should be used by you to let people pick an item from a list of items. The item picker is an in-line button with a title that people tap to start picking from the items. When an item is picked, the item will be displayed as a part of the in-line button.
In the following example, the item picker is populated by a list of Person named People , where Person have a a property DisplayName to be used for people to see when picking the item from the item picker.
<dui:ItemPicker Title="Person"
Mode="BottomSheet"
ItemsSource="{Binding People}"
SelectedItem="{Binding PickedPerson}"
ItemDisplayProperty="DisplayName"/>You should select a proper Mode for the item picker depending on the size of each item and the length of the items to pick from. ContextMenu mode is preferred if the number of items are short and the length of each item to display is short, otherwise BottomSheet is preferred.
Inspect the components properties class to further customise and use it.
There are three types of date/time pickers:
- Android: Material Design 2 - Date Pickers & Material Design 2 - Time Pickers
- iOS: Pickers - Human Interface Guidelines
A date picker should be used by you to let people pick a date. The date picker is an in-line button with a title that people tap to start picking the date. When a date is picked, the date will be displayed as a part of the in-line button.
<dui:DatePicker SelectedDate="{Binding SelectedBirthday}"/>Inspect the components properties class to further customise and use it.
If you need to display a horizontal line that people can swipe to select dates, you can use the HorizontalInlineDatePicker. People can tap the selected date to get a native DatePicker to select the date from.
<dui:HorizontaInlineDatePicker SelectedDate="{Binding SelectedBirthday}"/>Inspect the components properties class to further customise and use it.
A TimePicker should be used by you to let people pick a time. The TimePicker is an in-line button with a title that people tap to start picking the time. When a time is picked, the time will be displayed as part of the in-line button.
<dui:DateAndTimePicker SelectedTime="{Binding SelectedGroceryShopping}" />Inspect the components properties class to further customize and use it.
A DateAndTimePicker should be used by you to let people pick both a date -and time. The DateAndTimePicker is two in-line buttons with a title that people tap to start picking the date or time. When date is picked, the date or time will be displayed as part of the in-line button.
<dui:DateAndTimePicker SelectedDateTime="{Binding SelectedDeadline}"/>Inspect the components properties class to further customize and use it.