{"id":155,"date":"2022-07-22T08:28:52","date_gmt":"2022-07-22T00:28:52","guid":{"rendered":"http:\/\/axure.in\/?p=155"},"modified":"2023-04-25T13:35:34","modified_gmt":"2023-04-25T05:35:34","slug":"axure-advanced-tutorial-repeater-variable-columns","status":"publish","type":"post","link":"http:\/\/axure.in\/?p=155","title":{"rendered":"Axure Repeater Variable Columns"},"content":{"rendered":"\n

Introduction<\/strong> :<\/p>\n\n\n\n

Repeater has become so common in Axure usage that many people are confused about not being able to change the number of columns too much.\u00a0for example:<\/p>\n\n\n\n

from 4 rows and 3 columns<\/p>\n\n\n

\n
\"\"\/
4 rows and 3 columns<\/figcaption><\/figure>\n<\/div>\n\n\n

Dynamically becomes 3 rows and 4 columns<\/p>\n\n\n

\n
\"\"\/
3 rows and 4 columns<\/figcaption><\/figure>\n<\/div>\n\n\n

As of the current version, the official has not released the relevant settings, but we can do it by changing the coordinates.<\/p>\n\n\n

\n
\"\"\/
achieve the effect of changing here<\/figcaption><\/figure>\n<\/div>\n\n\n

The demo effect can be viewed at the link: https:\/\/5gn5xg.axshare.com\/#id=b8577g&g=1<\/a><\/p>\n\n\n\n

Tutorial:<\/strong><\/p>\n\n\n\n

Below, I will teach you how to do it:<\/p>\n\n\n\n

First, we need a repeater, the layout is set to “Vertical”, and the “Grid distribution” is not selected (Wrap(Grid)):<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

In addition, a variable needs to be set. For the convenience of display, we use a global variable called columns. The default value is 3, indicating the initial number of columns:<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

Double-click the repeater to enter the modification mode and create a new interaction event on the component.<\/p>\n\n\n\n

Note: is the “Loaded” of the component inside the repeater row, the event is move:<\/p>\n\n\n\n

The goal is: “To (To)”<\/p>\n\n\n\n

The x coordinate is: [[This.width*((Item.index-1)%columns)]]<\/p>\n\n\n\n

The y coordinate is: [[-This.Height*(Math.ceil(((Item.index-1)%columns)\/columns))]]<\/p>\n\n\n\n

If you want to see the animation effect, you can customize Animate, and it will be cool when you change it later.<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

At this time, “Preview”, you can find that the effect of 4 rows and 3 columns we want has been completed.<\/p>\n\n\n\n

Next, we create a new button, the text of the button is “change to 4 columns”, and the new interaction “Click or Tap” has two steps:<\/p>\n\n\n\n

The first step is to “Set Variable Value” and select the “value” of the variable columns as 4.<\/p>\n\n\n\n

The second step is “Fire Event”, “Add Action”, the target is the “Loaded” event of the component in the repeater.<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

Preview the page again, click the button “change to 4 columns”, you will find that the repeater has changed from 3 columns to 4 columns.<\/p>\n\n\n\n

Summarize:<\/strong><\/p>\n\n\n\n

As long as the value of columns is changed first, and then the event of moving the coordinates is triggered, the number of columns can be dynamically changed.<\/p>\n\n\n\n

For more Axure tutorials, please visit: http:\/\/axure.in\/<\/a> Here is the most Infation Axure data station.<\/p>\n

\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a\u6700In\u306eAxure<\/a> » Axure Repeater Variable Columns<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Introduction : Repeater has become so common in Axure usage that many people are confused about not being able to change […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[35],"tags":[52,48,51],"class_list":["post-155","post","type-post","status-publish","format-standard","hentry","category-advanced-tutorial","tag-columns","tag-repeater","tag-variable"],"_links":{"self":[{"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts\/155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=155"}],"version-history":[{"count":9,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts\/155\/revisions"}],"predecessor-version":[{"id":10000013,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts\/155\/revisions\/10000013"}],"wp:attachment":[{"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}