NativeScript Angular ListPicker, который ведет себя как `<select>` - PullRequest
Новая
       77

NativeScript Angular ListPicker, который ведет себя как `<select>`

0 голосов
/ 07 января 2019

По умолчанию ListPicker занимает тонну экранного пространства. Есть ли способ заставить его вести себя как метафора для HTML <select> при отображении на мобильном телефоне?

Я использовал этот реагирующий нативный плагин раньше, и это именно та метафора, которую я хочу, но для NativeScript.

Легко ли это сделать с помощью NativeScript? Я хочу использовать метафоры выбора для конкретной платформы, поэтому показ / скрытие ListPicker или вставка ListPicker в модал - это не то, что мне нужно.

Кроме того, у меня будет довольно длинный список, поэтому диалоговое окно action не будет работать для меня.

Обновление : мне известно о нативном раскрывающемся списке , однако он не использует специфичный для платформы виджет "выбор из списка вариантов", который просматривает веб-сайт и реагировать нативный плагин до.

Под "виджетом, зависящим от платформы, выберите из списка виджетов выбора", я имею в виду это (от https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select):

iOS (средство выбора заметок отображается там, где должна располагаться клавиатура, с устройством выбора Rolodex):

image

Android (примечание модальное, со списком параметров прокрутки):

image

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Я искал такое же решение и не смог найти его, поэтому создал свое собственное. Я приложил образец для вас здесь .

У вас могут быть textField / Label и onTab, в которых вы можете отобразить ListPicker, например, Select ведет себя в HTML, и он будет использовать только собственные (специфичные для платформы) компоненты.

в вашем HTML 

<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
  <Label text="Country" width="70" height="50" backgroundColor="red"></Label>
  <TextField [(ngModel)]="textFieldValue" hint="Choose countty..." editable="false" (tap)="showHideField('country')"></TextField>
</StackLayout>
<StackLayout orientation="vertical" width="100%" height="210" *ngIf="showCountryPicker" backgroundColor="lightgray">
  <ListPicker [items]="listPickerCountries" (selectedIndexChange)="selectedCountyChanged($event)"></ListPicker>
</StackLayout>

и ваш файл .ts 

showCountryPicker = false;
listPickerCountries: Array < string > = ["Australia", "Belgium", "Bulgaria", "Canada", "Switzerland",
  "China", "Czech Republic", "Germany", "Spain", "Ethiopia", "Croatia", "Hungary",
  "Italy", "Jamaica", "Romania", "Russia", "United States"
];

showHideField() {
  this.showCountryPicker = true;
}
selectedCountyChanged(args) {
  const picker = < ListPicker > args.object;
  this.showCountryPicker = false;
  this.textFieldValue = this.listPickerCountries[picker.selectedIndex];
}
0 голосов
/ 07 января 2019

Я думаю, что вы ищете нативный ниспадающий список , который похож на указанную вами реакцию-нативного выбора.

...