Line & arc

Two layouts ship in the box. Everything else is a preset built on the same contract, or a function you write yourself.

Every demo below also sets minScale, minOpacity, falloff and fade so the ends of the track fall away. Those are appearance rather than layout, so the code blocks leave them out.

Line

The default. Items sit evenly along the track, spacing pixels apart.

createPicker(el, {
  items,
  renderItem,
  spacing: 76,
})

Arc

One option bends it. radius is a magnitude, not a direction: larger is flatter, and a large enough radius is indistinguishable from a line.

createPicker(el, {
  items,
  renderItem,
  layout: 'arc',
  spacing: 76,
  radius: 620,
})

Spacing is measured along the curve, not across the chord, so it means the same thing on an arc as on a line. That is what lets you bend a track without re-tuning anything else.

Which way it bends

bend picks the side. On a horizontal track it is 'down' or 'up'; on a vertical one, 'right' or 'left'.

createPicker(el, {
  items,
  renderItem,
  layout: 'arc',
  spacing: 76,
  radius: 620,
  bend: 'up',
})

Vertical

axis turns the track through ninety degrees. It also decides which way the arrow keys step, which wheel direction the picker claims, and which way a swipe has to go before it counts as a drag rather than a page scroll.

createPicker(el, {
  items,
  renderItem,
  layout: 'arc',
  axis: 'vertical',
  bend: 'left',
  radius: 420,
})

Tilt

Arc only. Items sit tangent to the curve rather than upright, so the track reads as one bent ribbon rather than upright cards on a curve.

createPicker(el, {
  items,
  renderItem,
  layout: 'arc',
  spacing: 76,
  radius: 500,
  tilt: true,
})

Next

• Cover Flow, Wheel, Fan and Stack are presets, each one line.
• Custom layouts is how you write your own.