爬行蟑螂也是剛開(kāi)始使用Axure,這里分享動(dòng)態(tài)面板之折疊和展開(kāi)。當(dāng)然也是參考別人的,及時(shí)給大家分享,也是想要記錄下來(lái);
第一步:創(chuàng)建三個(gè)動(dòng)態(tài)面板,分別添加2個(gè)子動(dòng)態(tài)面板頁(yè)面;三個(gè)動(dòng)態(tài)面板命名及坐標(biāo)(x,y)寬高(w,h)如下所示:
子頁(yè)面命名為:
動(dòng)態(tài)面板坐標(biāo)為:
第二步:進(jìn)入動(dòng)態(tài)面板【State1-B1】和【State2-B1】的編輯頁(yè)面,分別在兩個(gè)頁(yè)面添加兩個(gè)矩形,小矩形坐標(biāo)及大小為:(0,0)(200,50),大矩形坐標(biāo)及大小為:(0,50)(200,250);填充內(nèi)容及顏色作為標(biāo)記;且將動(dòng)態(tài)面板【State1-B1】的大矩形設(shè)置為隱藏;其他面板的設(shè)置一樣;分別如圖所示:
第三步:
進(jìn)入【State1-B1】編輯,設(shè)置事件;
進(jìn)入【State2-B1】編輯,設(shè)置事件;
如圖所示:
其他設(shè)置也是同上,就不用文字累贅了。
進(jìn)入【State2-B2】和【State1-B2】編輯入截圖如下:
進(jìn)入【State2-B3】和【State1-B3】編輯入截圖如下:
點(diǎn)擊預(yù)覽,即可運(yùn)行成功啦!設(shè)置的過(guò)程中,注意坐標(biāo)之間的關(guān)系,就不是很復(fù)雜了。
本文由 @Cassie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。
聯(lián)系客服