一、製作Tab頁面
1、 拖入一個矩形
去掉3個邊,只留下下單邊,如果你用的我的《快速原型組件庫》,可以直接拖入“下單邊矩形”,設置一下尺寸爲100×40(尺寸這種東西,可以按自己需求來,下同),起個名字Tab1(給原件起名字這個習慣一定要養成,方便自己,也方便別人)
2、 交互樣式設置
設置了鼠標懸停樣式及選定樣式,此處可根據你的需求自行調整樣式
3、設置選項組名稱
選項組的功能,一般用在表單的單選框上,相同的選項組,可以聯動單選,此處,我們可以將普通元件編組,同樣讓其具有單選框的效果
4、添加基本交互動作
【動作】
“鼠標點擊時”
設置“選中狀態”,當前元件(This),設置選中狀態爲“值”、true
5、複製多個Tab標籤
複製多個Tab標籤,一字排開,分別改下名稱,便於識別,Tab1、Tab2、Tab3;把Tab1的選中勾上 ,Tab2和Tab3的選中都去掉。
做完這一步,就可以看到初步的效果了
二、製作Tab頁面
1、 拖入一個矩形
設置一下尺寸300x191(根據你的需求來可以),簡單調下演示,輸入文字,便於效果區別
2、 將矩形轉換爲動態面板
給動態面板起個名字,便於識別Tab-box
3、 複製動態面板狀態
通過複製狀態,一共三個狀態State1 – State3
4、 編輯狀態內容
簡單編輯下各狀態內容,演示的時候,效果更好