Picker

Picker

The Picker Component and Columns

A picker is the spinning-wheel selector of iOS, built from columns. Each column has values (and optional displayValues) and a textAlign; a divider: true column is a fixed separator. rotateEffect: true curves the wheels in 3D. The delivery time and handover picker:

The time-and-handover picker in src/pages/checkout.f7

      slotPicker = $f7.picker.create({
        inputEl: $el.value.find('#delivery-slot'),
        rotateEffect: true,
        cols: [
          { values: slots, textAlign: 'left' },
          { divider: true, content: '·' },
          { values: ['Hand to me', 'Leave at door', 'With a neighbor'] },
        ],
        formatValue: (values) => `${values[0]} h, ${values[1]}`,
      });

picker.value is an array with one entry per value column, ['9-12', 'Hand to me'], and formatValue turns it into the input's text, "9-12 h, Hand to me". Both themes draw the same wheels; iOS adds a glass band behind the selected row (panel B shows Material).

MENU