Axure RP8 動態面板之折疊和展開(例如菜單欄)
爬行蟑螂也是剛開始使用Axure,這里分享動態面板之折疊和展開。當然也是參考別人的,及時給大家分享,也是想要記錄下來;
第一步:創建三個動態面板,分別添加2個子動態面板頁面;三個動態面板命名及坐標(x,y)寬高(w,h)如下所示:
子頁面命名為:
- B1——State1-B1,State2-B1;
- B2——State1-B2,State2-B2;
- B3——State1-B3,State2-B3;
動態面板坐標為:
- B1——【0,0】,【200,300】;
- B2——【0,50】,【200,300】;
- B3——【0,100】,【200,300】
第二步:進入動態面板【State1-B1】和【State2-B1】的編輯頁面,分別在兩個頁面添加兩個矩形,小矩形坐標及大小為:(0,0)(200,50),大矩形坐標及大小為:(0,50)(200,250);填充內容及顏色作為標記;且將動態面板【State1-B1】的大矩形設置為隱藏;其他面板的設置一樣;分別如圖所示:
第三步:
進入【State1-B1】編輯,設置事件;
- 選中小矩形M1——添加事件【鼠標單擊】——【設置面板狀態】——選擇動態面板【B1】——選擇狀態【State2-B1】——確認
- 繼續添加事件【移動】——勾選動態面板【B2】——移動【相對位置】——設置坐標為(0,250)——確認
- 繼續添加事件【移動】——勾選動態面板【B3】——移動【相對位置】——設置坐標為(0,250)——確認
進入【State2-B1】編輯,設置事件;
- 選中小矩形M1——添加事件【鼠標單擊】——【設置面板狀態】——選擇動態面板【B1】——選擇狀態【State1-B1】——確認
- 繼續添加事件【移動】——勾選動態面板【B2】——移動【相對位置】——設置坐標為(0,-250)——確認
- 繼續添加事件【移動】——勾選動態面板【B3】——移動【相對位置】——設置坐標為(0,-250)——確認
如圖所示:
其他設置也是同上,就不用文字累贅了。
進入【State2-B2】和【State1-B2】編輯入截圖如下:
進入【State2-B3】和【State1-B3】編輯入截圖如下:
點擊預覽,即可運行成功啦!設置的過程中,注意坐標之間的關系,就不是很復雜了。
本文由 @Cassie 原創發布于人人都是產品經理。未經許可,禁止轉載
評論
評論請登錄
能解釋一下這個邏輯嗎
動態面板+點擊事件就OK了 ,先做個組件,以后用的話 Ctrl+c就好
能不能詳細說下組件是怎么做的?
趕緊報個起點的課程,你這思路稍顯復雜了。
雖然能這么處理,但是不太好吧
要是20個面板,各種展開折疊,并且橫向排列及長度大小不一樣的情況下怎么處理?