The List feature makes it easy to create lists that repeat the same layout and manage styles and content all at once.
1. How to create a list
To create a list, select the box you want to repeat and use one of the following methods.
⌘＋L (for windows, Ctrl＋L)
Select Create list from the right-click menu.
Select Create list from the box button in the box settings panel.
The selected box turns green when you convert boxes into a list.
*Once you create a list, you can not convert it into regular boxes.
2. Edit and manage a list
Unlike regular boxes in STUDIO, lists consist of one parent box (ul) and child multiple boxes (li).
You can check the property and data of the list itself in the settings panel of the list.
When you go to the settings panel of the list item, you can check the item's property and data.
2-a. Add and edit items in a list
Items in the list consist of image and text data.
To add a new item, go to the settings panel of the list, and click on the + New button.
When you hover over an item, the trash can icon will appear. You can delete an item by clicking the trash can icon.
You can change the order of items and properties in the list. The order of the item will be reflected instantly on the item on the screen.
2-b. Add and edit the list data (property)
Place a text/image box in the list item, and then click + add to list data to add data to the item. When you add data (property) to an item, the same property will be automatically added to all the other items.
You can also add data from the box settings panel. Go to the box settings panel of a list and click + button on the right end of the list.
You can edit list data on the screen as you do with regular image and text boxes.
You can also edit in the settings panel of the list and list items.
*You can only edit from the settings panel if the following cases are applied.
When editing a Carousel.
Text with Display filter.
If there is a string input in the text field.
You can edit a property name from a three dots menu that appears when hovering over a property.
In the settings panel of a list
In the settings panel of a list item
3. Changing content data (property)
The image and text boxes in the list use properties to display data, and you can change the properties.
In the box settings panel
Click the image/text box you want to change their data, and go to the settings panel. Click in the image/text filed, and select property.
Data panel
Select the list item and click on the data panel icon on the left of the screen to open the data panel. You can drag a connector from a blue dot and connect the property to a box.
When you click on a text property name, the display filter menu appears, and you can set some filters. For more information, read Display filter｜STUDIO U.