Post with 1 note
Creating a Scrollable Horizontal DataList
Steps
1) Draw a rectangle on the artboard.
2) Click the rectangle, and in the floating HUD click the “Convert Artwork to Component…” button.
3) Select DataList.
4) Notice the little warning sign. We need to define the repeated item.
5) Click the ‘Edit Parts’ button.
6) Click the rectangle, and click ‘Convert Artwork to Part..”, and select ‘Repeated Item’. You should now see the rectangle you selected repeated downwards multiple times. We have successfully created a vertical datalist component.
7) To change the arrangement of rectangles to be horizontal, let’s change the layout in the properties panel.
8) In the ‘Properties’ panel in the bottom right hand corner, click the ‘Layout’ section to expand it.
9) Notice the Vertical layout button is currently pressed. Click Horizontal to get a horizontal layout.
10) Note that the bounds don’t change to be horizontal… we need to adjust this. Drag the right most selection handle to the right. When you release, you’ll notice more rectangles appear, but are laid out horizontally. Don’t drag the right handle too far, we want it to scroll.
11) From the ‘Wireframe Components’ section, drag a ‘Horizontal Scrollbar’ component under the rectangles.
12) Run your project. You should be able to scroll through the rectangles horizontally.
I removed the buttons from the scrollbar, added some mouse over and selected effects to the rectangle, and added some text to the right and left of the scrollbar.
Does this work for you? Any Questions?
