Panels

joseph edited this page Sep 4, 2011 · 1 revision

Panels are the controls that provide the interface to flippers. There's three built-in:

  • TwoPane: clicking or swiping on the left half moves backwards, clicking or swiping on the right half moves forwards.
  • Marginal: clicking/swiping left margin moves backwards, right margin moves forwards. This leaves the text open for interaction, such as selection or clicking links.
  • IMode: the screen is initially divided into thirds. Left third -> backwards, right third -> forwards. The middle third, when tapped, causes the left and right panels to recede to the margins, opening the text to interaction. Clicking the little (i) interactive mode indicator restores the panels to their original positions. This is a good choice for small screens.

For most flippers, you can set the preferred panel class with the 'panels' option to the reader. For eg:

Monocle.reader('reader', bookData, { panels: Monocle.Panels.IMode });

Of course, you can create your own panel classes too. Take a look at the TwoPane class for the simplest example code.