Conveyor
Arrows at both ends of a row or column that is too long to fit, so people can move it along without a scrollbar.
Master
Switch what is inside and the direction. The arrows show only when there is something to scroll, and turn off at the ends.
Usage
Use Conveyor around a run of pieces that does not fit, like eight scorecards in a Scoreboard, a row of filter chips or a tall side list. It is one component: put the run inside it. The arrows show only when there is something to scroll, and each one turns off at its end. A soft fade sits where the content passes under an arrow. A press moves most of a screenful, or the step you set. The row can also be scrolled by hand, with a trackpad, or with the arrow keys when it has focus. A Scoreboard past four cards already puts itself in one, so wrap a Scoreboard by hand only when you want other settings, and pass it scroll off. For paged slides with a Slide 2 of 5 caption, use Carousel. See contracts/conveyor.json for the full contract. In a box narrower than 640px, the kit's mobile break, the two arrows would take a third of the room, so they give way to swiping: the track keeps the whole width and comes to rest on a whole piece. It stays a focus stop, so the arrow keys still move it.
Do's
- A row of scorecards, chips or cards that runs past the edge.
- A row of chips, cards or tabs that runs past the edge.
- A tall list in a narrow column, scrolled up and down.
Don'ts
- Do not use it for paged slides or a gallery. Use Carousel.
- Do not use it to page a table. Use Pagination.
- Do not put a second scrolling box inside it; turn that one's scrolling off.
- Do not hide the only way to reach content behind the arrows alone; the row still scrolls by hand and by keyboard.
- Do not use raw hex.
<Conveyor orientation="horizontal" label="Key metrics" />