#FlipView

FlipView in UIToolbox shows one page at a time. Each child is a page. It can also show several pages side by side, such as three cards of a character select.

<tb:FlipView name="tour" loop="true" transition="Fade" transition-duration="400" auto-advance="5" style="height: 220px;">
    <ui:VisualElement><ui:Label text="Welcome" /></ui:VisualElement>
    <ui:VisualElement><ui:Label text="Swipe" /></ui:VisualElement>
    <ui:VisualElement><ui:Button text="Start" /></ui:VisualElement>
</tb:FlipView>

var flip = root.Q<FlipView>("tour");
flip.SelectionChanged += (old, now) => Debug.Log($"page {old} > {now}");
flip.AddPage(new Label("One more"));
flip.GoTo(0);

// A transition of your own; the view clears translate, scale, rotate and opacity after the change
flip.CustomTransition = (from, to, t, direction) =>
{
    from.style.opacity = 1 - t;
    to.style.scale = new Scale(Vector2.one * (0.7f + 0.3f * t));
};

• A drag of more than 8 pixels moves the pages with the pointer. A release past 30% of the width (the height when vertical), or a fast flick, changes the page; a shorter drag goes back. A vertical view ignores sideways drags, and a horizontal view ignores drags up and down.
• A click on a button in a page stays a click: the view takes the pointer only when a drag starts.
• The view takes focus. Left and Right (Up and Down when vertical), Home and End change the page. The gamepad directions change it too. The other arrow keys move the focus as usual.
• The automatic timer waits while the pointer is over the view or a drag is in progress, and starts again after each change.
• A new change ends the change in progress at once.
• The pages get the tb-flip-view__page class when the view is attached, or on AddPage or Refresh. The sheet hides the pages that do not have --shown.

#Several items per view

<tb:FlipView name="heroes" items-per-view="3" spacing="12" alignment="Center" style="height: 160px;">
    <ui:VisualElement class="hero-card"><ui:Label text="Knight" /></ui:VisualElement>
    <ui:VisualElement class="hero-card"><ui:Label text="Mage" /></ui:VisualElement>
    <ui:VisualElement class="hero-card"><ui:Label text="Rogue" /></ui:VisualElement>
    <ui:VisualElement class="hero-card"><ui:Label text="Cleric" /></ui:VisualElement>
</tb:FlipView>

var heroes = root.Q<FlipView>("heroes");
heroes.SelectionChanged += (old, now) => showHero(heroes.SelectedPage);

Set ItemsPerView above 1. Each page gets an equal part of the view (of the height when vertical), less the Spacing between the pages. The view sets the width of each page (the height when vertical) and its translate.

• Alignment Start: SelectedIndex is the first shown page. The last position still fills the view, so 5 pages in a view of 3 have the positions 0, 1 and 2.
• Alignment Center: SelectedIndex is the page in the middle, and each page can be selected. The first and the last page have an empty place beside them.
• A click on a page beside the selected one selects it, with a slide. A click on the selected page changes nothing. With StepSize Page, the view goes to the position of the clicked page.
• StepSize Item: the arrows, the keys, the gamepad directions, a drag and the timer move one page.
• StepSize Page: they move as many pages as the view shows. 7 pages in a view of 3 have the positions 0, 3 and 4: the last position still fills the view.
• There is one dot for each position, not for each page. GoTo and SelectedIndex take a page index and go to the position of that page.
• SelectedPage and the class tb-flip-view__page--current give the selected page. The pages inside the view have --shown.
• The change is always a slide. Fade and CustomTransition work only with one page per view. None changes at once.
• With Loop, the arrows, the keys and the timer go from the last position to the first: the pages slide back over all the pages. A drag stops at the ends.

#Tips

• For a character select, use alignment="Center" with an odd items-per-view, and style .tb-flip-view__page--current (a border or a larger scale) so that the user sees the selected card.
• For a shelf of cards that moves a whole row at a time, use alignment="Start" with step-size="Page".
• Give the view a height. The pages take the height of the view (the width when vertical).

#Styling