WrapList (랩리스트) Widget Control

This page lists the Widget Controls (Property · Method · Event) you use to control the WrapList widget from a script. To learn what the widget does and how to use it, visit WrapList.

info

In the examples below, wraplistID is the name (ID) you gave the WrapList widget on the canvas.
In a script, access members as widgetID.member.

Widget Control summary

Widget Control	Kind	Signature	Description
add	Method	add() → number	Appends an empty item to the end
clear	Method	clear() → none	Removes every item
count	Property	count (get/set, number)	Reads or sets the number of repeated items
current	Property	current (get/set, number)	Index of the current item that binding is scoped to
insert	Method	insert(index) → none	Inserts an empty item at the given position
lineCount	Property	lineCount (get, number)	Number of lines (runs) currently laid out
onLineCountChanged	Event	onLineCountChanged = (lineCount) => { ... }	Runs when the number of laid-out lines changes
onOverflowChanged	Event	onOverflowChanged = (count) => { ... }	Runs when the number of clipped items changes
onSelected	Event	onSelected = (index) => { ... }	Runs when an item is tapped
overflowCount	Property	overflowCount (get, number)	Number of items clipped for exceeding maxLines
remove	Method	remove(index) → none	Removes the item at the given index
select	Property	select (get/set, number)	Index of the selected item
setState	Method	setState(index, function) → none	Updates and redraws only the given item

Widget Control details

add

Appends an empty item to the end of the list and redraws.

• Kind: Method
• Parameters: none
• Returns: number - the index of the newly added item

Example

const i = wraplistID.add();

clear

Removes every item and redraws.

• Kind: Method
• Parameters: none
• Returns: none

Example

wraplistID.clear();

count

The number of items rendered repeatedly. Reading it returns the current count. Setting it grows or shrinks the bound data list to that count, then redraws.

• Kind: Property (get/set)
• Type: number

Example

const n = wraplistID.count;
wraplistID.count = 5;

current

The index of the current item that binding is scoped to. Set it, and every later property write targets that item's row. Returns -1 when no value is set.

• Kind: Property (get/set)
• Type: number (-1 when unset)

Example

wraplistID.current = 2;
const cur = wraplistID.current;

insert

Inserts an empty item at the given index and redraws.

• Kind: Method
• Parameters: index (number) - the position to insert at
• Returns: none

Example

wraplistID.insert(0);

lineCount

The number of lines (runs) currently laid out. It updates only when maxLines is set. Read-only.

• Kind: Property (get)
• Type: number

Example

const lines = wraplistID.lineCount;

onLineCountChanged

Runs when the number of laid-out lines changes.

• Kind: Event
• Handler: (lineCount) => { ... } - lineCount is the new number of laid-out lines
• Returns: none

Example

// Precondition: fires only when maxLines is set on wraplistID
wraplistID.onLineCountChanged = (lineCount) => {
  // Adjust the UI based on how many lines the items now occupy
  moreButton.visible = (lineCount >= wraplistID.maxLines);
};

onOverflowChanged

Runs when the number of clipped (overflowing) items changes.

• Kind: Event
• Handler: (count) => { ... } - count is the new number of clipped items
• Returns: none

Example

wraplistID.onOverflowChanged = (count) => { /* ... */ };

onSelected

Runs when the user taps an item.

• Kind: Event
• Handler: (index) => { ... } - index is the index of the tapped item
• Returns: none

Example

wraplistID.onSelected = (index) => { /* ... */ };

overflowCount

The number of items clipped (hidden) for exceeding maxLines. Returns 0 when nothing is clipped or maxLines isn't set. Read-only.

• Kind: Property (get)
• Type: number

Example

const hidden = wraplistID.overflowCount;

remove

Removes the item at the given index and redraws. Does nothing when the index is out of range.

• Kind: Method
• Parameters: index (number) - the index of the item to remove
• Returns: none

Example

wraplistID.remove(0);

select

The index of the selected item. Returns -1 when nothing is selected.

• Kind: Property (get/set)
• Type: number (-1 when nothing is selected)

Example

wraplistID.select = 0;
const sel = wraplistID.select;

setState

Runs a callback with the binding scope set to the item at the given index, then redraws only that item. Use it to update the bound properties of a single item.

• Kind: Method
• Parameters: index (number) - the index of the item to update / function (callback function) - runs while that index is the active item
• Returns: none

Example

wraplistID.setState(0, () => {
  $item.title = "변경된 제목";   // Update the properties bound to item 0
  $item.selected = true;
});

Common Widget Control (all widgets)

note

Every widget can use name-based common Widget Controls (Method) such as setProperty, getProperty, and setStyleProperty. See the common reference doc (to be written).