Axure RP8 動態面板之折疊和展開(例如菜單欄)

5 評論 66994 瀏覽 50 收藏 5 分鐘

爬行蟑螂也是剛開始使用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】編輯,設置事件;

  1. 選中小矩形M1——添加事件【鼠標單擊】——【設置面板狀態】——選擇動態面板【B1】——選擇狀態【State2-B1】——確認
  2. 繼續添加事件【移動】——勾選動態面板【B2】——移動【相對位置】——設置坐標為(0,250)——確認
  3. 繼續添加事件【移動】——勾選動態面板【B3】——移動【相對位置】——設置坐標為(0,250)——確認

進入【State2-B1】編輯,設置事件;

  1. 選中小矩形M1——添加事件【鼠標單擊】——【設置面板狀態】——選擇動態面板【B1】——選擇狀態【State1-B1】——確認
  2. 繼續添加事件【移動】——勾選動態面板【B2】——移動【相對位置】——設置坐標為(0,-250)——確認
  3. 繼續添加事件【移動】——勾選動態面板【B3】——移動【相對位置】——設置坐標為(0,-250)——確認

如圖所示:

其他設置也是同上,就不用文字累贅了。

進入【State2-B2】和【State1-B2】編輯入截圖如下:

進入【State2-B3】和【State1-B3】編輯入截圖如下:

點擊預覽,即可運行成功啦!設置的過程中,注意坐標之間的關系,就不是很復雜了。

 

本文由 @Cassie 原創發布于人人都是產品經理。未經許可,禁止轉載

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 能解釋一下這個邏輯嗎

    來自北京 回復
  2. 動態面板+點擊事件就OK了 ,先做個組件,以后用的話 Ctrl+c就好

    來自浙江 回復
    1. 能不能詳細說下組件是怎么做的?

      來自北京 回復
  3. 趕緊報個起點的課程,你這思路稍顯復雜了。

    來自江蘇 回復
  4. 雖然能這么處理,但是不太好吧
    要是20個面板,各種展開折疊,并且橫向排列及長度大小不一樣的情況下怎么處理?

    來自福建 回復