Skip to main content

Засіб вибору (Picker)

Picker — це потужний компонент, який дозволяє створювати налаштовані засоби вибору за допомогою накладання(overlay), які виглядають як вихідні засоби вибору iOS. Вибір можна використовувати як вбудований компонент або як накладення. Накладання буде автоматично перетворено на Popover на планшетах (iPad).

Методи застосунку Вибір

Давайте розглянемо пов’язані методи роботи застосунку Picker:
МетодОпис
app.picker.create(parameters)
створити екземпляр Picker

parameters - object. Об'єкт з параметрами вибору

Метод повертає створений екземпляр Picker

app.picker.destroy(el)
знищити екземпляр Picker

el - HTMLElement or string (with CSS Selector) or object. Елемент Picker або екземпляр Picker для знищення.

app.picker.get(el)
отримати екземпляр Picker за елементом HTML

el - HTMLElement or string (with CSS Selector). Елемент вибору.

Метод повертає екземпляр Picker

app.picker.close(el)
закрити Picker

panel - HTMLElement or string (with CSS Selector) елемент Picker, який потрібно закрити

Наприклад:
var picker = app.picker.create({
  inputEl: '#picker-input',
  cols: [
     {
       values: ['apple', 'orange', 'banana'],
       displayValues: ['Apple', 'Orange', 'Banana'],
     }
   ]
});

Параметри Вибору

Давайте подивимося на список усіх доступних параметрів Picker:
ПараметрЗа замовчуваннямОписТип
rotateEffect
false
Вмикає ефект 3D обертання
boolean
freeMode
false
Вимикає прив’язку до значень
boolean
value
Масив із початковими значеннями. Кожен елемент масиву представляє значення відповідного стовпця
array
formatValue
Функція для форматування вхідного значення має повертати нове/відформатоване значення рядка. values і displayValues — це масиви, де кожен елемент представляє значення/відображуване значення відповідного стовпця
function (values, displayValues)
cols
Масив зі стовпцями. Кожен елемент масиву представляє об’єкт із параметрами стовпця
array
Параметри контейнера/відкривача
ПараметрЗа замовчуваннямОписТип
containerEl
Рядок із селектором CSS або HTMLElement, де розмістити згенерований HTML-код засобу вибору. Використовуйте лише для вбудованого вибору
String

HTMLElement

openIn
auto
Може бути auto, popover(щоб відкрити засіб вибору в поповері), sheet(щоб відкрити в режимі аркуша). У разі auto відкриється в режимі аркуша на маленьких екранах і в спливному вікні на великих екранах.
String
backdrop
Вмикає тло для контейнера Picker (Popover або Sheet) (темний напівпрозорий шар позаду). За замовчуванням він використовує значення за замовчуванням на основі способу відкриття (у аркуші або в Popover).
boolean
sheetPush
false
Дозволяє аркушу вибору відкривати перегляди позаду
boolean
sheetSwipeToClose
false
Дозволяє закривати аркуш вибору за допомогою свайпу
boolean
inputEl
Рядок із селектором CSS або HTMLElement із відповідним елементом введення
HTMLElement

or string

scrollToInput
true
Прокрутіть вікно перегляду (вміст сторінки), щоб ввести, коли відкрито засіб вибору
boolean
inputReadOnly
true
Встановлює атрибут "лише для читання" для вказаного введення
boolean
cssClass
Додаткове ім’я класу CSS, яке буде встановлено в елементі вибору
string
closeByOutsideClick
true
Якщо ввімкнено, засіб вибору буде закрито, клацнувши за межами засобу вибору або пов’язаного елемента введення
boolean
toolbar
true
Вмикає панель інструментів вибору
boolean
toolbarCloseText
Done
Текст для кнопки панелі інструментів «Готово/Закрити».
string
routableModals
false
Додасть відкритий засіб вибору до історії маршрутизатора, що дає можливість закрити засіб вибору, повернувшись до історії маршрутизатора та встановивши поточний маршрут у режимі вибору
boolean
url
select/
Модальна URL-адреса вибору, яка буде встановлена як поточний маршрут
string
view
Перегляньте, де встановити маршрутизацію, якщо routableModals ввімкнено. За замовчуванням використовується батьківський перегляд inputEl або головний перегляд, якщо не знайдено батьківський перегляд
object
Функції візуалізації
ПараметрОписТип
renderToolbar
Функція візуалізації панелі інструментів. Необхідно повернути рядок HTML панелі інструментів
function
render
Функція відтворення всього засобу вибору. Має повернути повний HTML-рядок вибору
function
Події
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var picker = app.picker.create({
  ...
  on: {
    opened: function () {
      console.log('Picker opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку властивості picker , щоб встановити значення за замовчуванням для всіх засобів вибору. Наприклад:
var app = new Techno4({
  picker: {
    rotateEffect: true,
    openIn: 'popover',
  }
});

Параметри стовпця

Коли ми налаштовуємо Picker, нам потрібно передати cols параметр. Це масив, де кожен елемент є об’єктом із параметрами стовпця:
ПараметрЗа замовчуваннямОписТип
values
Масив зі значеннями рядкових стовпців
array
displayValues
Масив із значеннями рядкових стовпців, які відображатимуться в інструменті вибору. Якщо не вказано, відображатимуться значення з параметра values
array
cssClass
Додаткове ім’я класу CSS, яке буде встановлено в контейнері HTML стовпця
string
textAlign
Вирівнювання тексту значень стовпців, може бути «зліва», «по центру» або «справа» стовпця "left", "center" or "right"
string
width
Ширина стовпця в пікселях. Корисно, якщо вам потрібно виправити ширину стовпців у підборі з залежними стовпцями. За замовчуванням обчислюється автоматично
number
divider
false
Визначає стовпець, який слід використовувати як візуальний роздільник, який не має жодних значень
boolean
content
Слід вказати для стовпця-роздільника ( divider:true) із вмістом стовпця
string
onChange
Функція зворотного виклику, яка буде виконана при зміні значення вибору.
function

(picker, value, displayValue)

Методи та властивості вибору

Після ініціалізації Picker у нас є його ініціалізований екземпляр у змінній (як picker у прикладах вище) з корисними методами та властивостями:
Властивості
Властивість Опис
picker.app
Посилання на глобальний екземпляр застосунку
picker.containerEl
Елемент HTML контейнера, що обгортає засіб вибору (коли використовується вбудований засіб вибору)
picker.$containerEl
Екземпляр Dom64 з HTML-елементом контейнера, що обгортає засіб вибору (коли використовується вбудований засіб вибору)
picker.el
Елемент HTML засобу вибору
picker.$el
Екземпляр Dom64 з HTML-елементом вибору
picker.inputEl
Вхідний HTML-елемент засобу вибору (передається в inputEl параметрі)
picker.$inputEl
Примірник Dom64 із вхідним HTML-елементом засобу вибору (передається в inputEl параметрі)
picker.value
Масив, де кожен елемент представляє поточне вибране значення для кожного стовпця
picker.cols
Масив із зазначеними стовпцями Picker. Кожен стовпець також має власні методи та властивості (див. нижче)
picker.opened
true якщо Picker наразі відкрито
picker.inline
true коли використовується вбудований засіб вибору
picker.url
URL-адреса вибору (передана в url параметрі)
picker.view
Вид вибору (переданий у viewпараметрі) або знайдений батьківський перегляд
picker.params
Об'єкт з параметрами ініціалізації
Методи
МетодОпис
picker.setValue(values)
Установити нове значення вибору.

values це масив, де кожен елемент представляє значення для кожного стовпця.

picker.getValue()
Повертає поточне значення вибору
picker.open()
Відкрити засіб вибору
picker.close()
Закрити засіб вибору
picker.destroy()
Знищити екземпляр Picker і видалити всі події
picker.on(event, handler)
Додати обробник подій
picker.once(event, handler)
Додати обробник подій, який буде видалено після запуску
picker.off(event, handler)
Видалити обробник подій
picker.off(event)
Видалити всі обробники для вказаної події
picker.emit(event, ...args)
Запустити подію на екземплярі

Методи та властивості стовпців

Кожен стовпець у picker.cols масиві також має власні корисні методи та властивості.
//Get first column
var col = picker.cols[0];
Властивості
Властивість Опис
col.el
HTML-елемент стовпця
col.$el
Екземпляр Dom64 з HTML-контейнером стовпців
col.items
Екземпляр Dom64 з HTML-елементами стовпців
col.value
Поточне вибране значення стовпця
col.displayValue
Вибране значення відображення стовпця
col.activeIndex
Індекс поточного вибраного/активного елемента
Методи
МетодОпис
col.setValue(value)
Установити нове значення для поточного стовпця. value це нове значення
col.replaceValues(values, displayValues)
Замініть значення стовпців і displayValues новими

Події Вибору

Picker запускатиме такі події DOM в елементі picker і події в екземплярі застосунку та вибору:

Події DOM

ПодіяОб'єктОпис
picker:open
Picker Element

<div class="picker">

Подія буде ініційована, коли Picker запустить початкову анімацію
picker:opened
Picker Element

<div class="picker">

Подію буде запущено після того, як Picker завершить свою початкову анімацію
picker:close
Picker Element

<div class="picker">

Подія буде ініційована, коли Picker почне завершувати анімацію
picker:closed
Picker Element

<div class="picker">

Подію буде запущено після того, як Picker завершить анімацію закриття

Події екземплярів застосунку та вибору

Екземпляр Picker запускає події як для власного екземпляра, так і для екземпляра застосунку. Події екземплярів застосунку мають ті самі назви з префіксом picker.
ПодіяАргументОписОб'єкт
change
(picker, value, displayValue)
Подія буде ініційована, коли змінюється значення вибору
picker
pickerChange
(picker, value, displayValue)
Подія буде ініційована, коли змінюється значення вибору
app
init
(picker)
Подія буде ініційована під час ініціалізації вибору
picker
pickerInit
(picker)
Подія буде ініційована під час ініціалізації вибору
app
open
(picker)
Подія буде ініційована, коли Picker запустить початкову анімацію. Як аргумент обробник події отримує екземпляр засобу вибору
picker
pickerOpen
(picker)
Подія буде ініційована, коли Picker запустить початкову анімацію. Як аргумент обробник події отримує екземпляр засобу вибору
app
opened
(picker)
Подію буде запущено після того, як Picker завершить свою початкову анімацію. Як аргумент обробник події отримує екземпляр засобу вибору
picker
pickerOpened
(picker)
Подію буде запущено після того, як Picker завершить свою початкову анімацію. Як аргумент обробник події отримує екземпляр засобу вибору
app
close
(picker)
Подія буде ініційована, коли Picker почне завершувати анімацію. Як аргумент обробник події отримує екземпляр засобу вибору
picker
pickerClose
(picker)
Подія буде ініційована, коли Picker почне завершувати анімацію. Як аргумент обробник події отримує екземпляр засобу вибору
app
closed
(picker)
Подію буде запущено після того, як Picker завершить анімацію закриття. Як аргумент обробник події отримує екземпляр засобу вибору
picker
pickerClosed
(picker)
Подію буде запущено після того, як Picker завершить анімацію закриття. Як аргумент обробник події отримує екземпляр засобу вибору
app
beforeDestroy
(picker)
Подію буде запущено безпосередньо перед тим, як екземпляр Picker буде знищено. Як аргумент обробник події отримує екземпляр засобу вибору
picker
pickerBeforeDestroy
(picker)
Подію буде запущено безпосередньо перед тим, як екземпляр Picker буде знищено. Як аргумент обробник події отримує екземпляр засобу вибору
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-picker-height: 260px;
  --t4-picker-inline-height: 200px;
  --t4-picker-popover-height: 260px;
  --t4-picker-popover-width: 280px;
  --t4-picker-landscape-height: 200px;
  --t4-picker-item-height: 36px;
  /*
  --t4-picker-sheet-bg-color: var(--t4-sheet-bg-color);
  */
}
.ios {
  --t4-picker-column-font-size: 20px;
  --t4-picker-item-selected-text-color: #000;
  --t4-picker-item-selected-bg-color: rgba(0, 0, 0, 0.12);
  --t4-picker-divider-text-color: #000;
  --t4-picker-item-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --t4-picker-item-selected-text-color: #fff;
  --t4-picker-item-selected-bg-color: rgba(255, 255, 255, 0.1);
  --t4-picker-divider-text-color: #fff;
  --t4-picker-item-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --t4-picker-column-font-size: 20px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-picker-item-selected-text-color: var(--t4-md-on-surface);
  --t4-picker-item-text-color: var(--t4-md-on-surface-variant);
  --t4-picker-divider-text-color: var(--t4-md-on-surface);
  --t4-picker-item-selected-border-color: var(--t4-md-outline);
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Picker</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Picker is a powerful component that allows you to create custom overlay pickers which looks like native
          picker.</p>
        <p>Picker could be used as inline component or as overlay. Overlay Picker will be automatically converted to
          Popover on tablets (iPad).</p>
      </div>
      <div class="block-title">Picker with single value</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Your iOS device" readonly="readonly" id="demo-picker-device" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">2 values and 3d-rotate effect</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Describe yourself" readonly="readonly" id="demo-picker-describe" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Dependent values</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom toolbar</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Describe yourself" readonly="readonly"
                    id="demo-picker-custom-toolbar" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Inline Picker / Date-time</div>
      <div class="list no-margin">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Date Time" readonly="readonly" id="demo-picker-date" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block block-strong block-outline-ios inset-md no-padding no-margin-top">
        <div id="demo-picker-date-container"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $on }) => {
    let pickerDevice;
    let pickerDescribe;
    let pickerDependent;
    let pickerCustomToolbar;

    $on('pageInit', () => {
      // iOS Device picker
      pickerDevice = $t4.picker.create({
        inputEl: '#demo-picker-device',
        cols: [
          {
            textAlign: 'center',
            values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
          }
        ]
      });

      // Describe yourself picker
      pickerDescribe = $t4.picker.create({
        inputEl: '#demo-picker-describe',
        rotateEffect: true,
        cols: [
          {
            textAlign: 'left',
            values: ('Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot').split(' ')
          },
          {
            values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' ')
          },
        ]
      });

      // Dependent values
      var carVendors = {
        Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
        German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
        American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
      };
      pickerDependent = $t4.picker.create({
        inputEl: '#demo-picker-dependent',
        rotateEffect: true,
        formatValue: function (values) {
          return values[1];
        },
        cols: [
          {
            textAlign: 'left',
            values: ['Japanese', 'German', 'American'],
            onChange: function (picker, country) {
              if (picker.cols[1].replaceValues) {
                picker.cols[1].replaceValues(carVendors[country]);
              }
            }
          },
          {
            values: carVendors.Japanese,
            width: 160,
          },
        ]
      });

      // Custom Toolbar
      pickerCustomToolbar = $t4.picker.create({
        inputEl: '#demo-picker-custom-toolbar',
        rotateEffect: true,
        renderToolbar: function () {
          return '<div class="toolbar">' +
            '<div class="toolbar-inner">' +
            '<div class="left">' +
            '<a  class="link toolbar-randomize-link">Randomize</a>' +
            '</div>' +
            '<div class="right">' +
            '<a  class="link sheet-close popover-close">That\'s me</a>' +
            '</div>' +
            '</div>' +
            '</div>';
        },
        cols: [
          {
            values: ['Mr', 'Ms'],
          },
          {
            textAlign: 'left',
            values: ('Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot').split(' ')
          },
          {
            values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' ')
          },
        ],
        on: {
          open: function (picker) {
            picker.$el.find('.toolbar-randomize-link').on('click', function () {
              var col0Values = picker.cols[0].values;
              var col0Random = col0Values[Math.floor(Math.random() * col0Values.length)];

              var col1Values = picker.cols[1].values;
              var col1Random = col1Values[Math.floor(Math.random() * col1Values.length)];

              var col2Values = picker.cols[2].values;
              var col2Random = col2Values[Math.floor(Math.random() * col2Values.length)];

              picker.setValue([col0Random, col1Random, col2Random]);
            });
          },
        }
      });
      // Inline date-time
      const today = new Date();
      pickerInline = $t4.picker.create({
        containerEl: '#demo-picker-date-container',
        inputEl: '#demo-picker-date',
        toolbar: false,
        rotateEffect: true,
        value: [
          today.getMonth(),
          today.getDate(),
          today.getFullYear(),
          today.getHours(),
          today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes()
        ],
        formatValue: function (values, displayValues) {
          return displayValues[0] + ' ' + values[1] + ', ' + values[2] + ' ' + values[3] + ':' + values[4];
        },
        cols: [
          // Months
          {
            values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
            displayValues: ('January February March April May June July August September October November December').split(' '),
            textAlign: 'left'
          },
          // Days
          {
            values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
          },
          // Years
          {
            values: (function () {
              var arr = [];
              for (var i = 1950; i <= 2030; i++) { arr.push(i); }
              return arr;
            })(),
          },
          // Space divider
          {
            divider: true,
            content: '&nbsp;&nbsp;'
          },
          // Hours
          {
            values: (function () {
              var arr = [];
              for (var i = 0; i <= 23; i++) { arr.push(i); }
              return arr;
            })(),
          },
          // Divider
          {
            divider: true,
            content: ':'
          },
          // Minutes
          {
            values: (function () {
              var arr = [];
              for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
              return arr;
            })(),
          }
        ],
        on: {
          change: function (picker, values, displayValues) {
            var daysInMonth = new Date(picker.value[2], picker.value[0] * 1 + 1, 0).getDate();
            if (values[1] > daysInMonth) {
              picker.cols[1].setValue(daysInMonth);
            }
          },
        }
      });
    });
    $on('pageBeforeRemove', () => {
      pickerDevice.destroy();
      pickerDescribe.destroy();
      pickerDependent.destroy();
      pickerCustomToolbar.destroy();
    });

    return $render;
  };

</script>