Axure:tab頁簽

0 評論 7059 瀏覽 33 收藏 6 分鐘

下面這篇文章是筆者整理分享的關于Axure教程中tab頁簽的相關內容,對Axure感興趣的同學可以進來了解了解吧!

最近畫原型圖使用比較多的一個組件形式——tab頁簽,之前一直用多個動態面板來設置tab頁簽的選中和未選中狀態,比較復雜且麻煩,最近發現了一個簡單便捷的方法,分享給大家,先展示一下最終效果,感興趣的就一起來試一下吧~

首先我們先畫幾個矩形,分別寫上頁簽名稱(我這里就直接寫頁簽1234),當前矩形的樣式就是你頁簽未選中狀態下的樣子(我這里是無邊框+黑色字體,大家可以根據自己的需求設置)。

我們選中添加的幾個頁簽,在右側【交互】欄,點擊【顯示全部】會出現一個【選項組】,我們給這個選項組命名(我這里就起名“tab頁簽”)。

現在給每個頁簽設置選中效果,選擇一個頁簽,在右側【交互】欄,【交互樣式】選擇【元件選中樣式】進行樣式的編輯,我這邊是希望選中的元件文字顏色改變,并且下方會出現選擇線,將每一個頁簽都設置選中樣式,可以直接復制粘貼。

具體操作如下圖,可參考。

如果還想鼠標懸停的時候也有相應效果,也可以參照上一條進行【鼠標懸停樣式】編輯。

現在需要的就是在每次點擊到對應的元件時,元件為選中狀態:選擇元件,在右側【交互】欄新建交互,選擇【單擊時】-【設置選中】-【當前元件值為真】,將每一個頁簽都設置選中交互,可以直接復制粘貼,具體操作如下圖,可參考。

其實到這一步我們的效果已經出來了。

但是感覺好像缺了點啥,按理說我進入這個頁面應該會有一個默認選中的tab頁簽,這個時候我們就需要對頁面載入時默認選中的tab頁簽添加一個交互了:在右側【交互】欄新建交互,選擇【載入時】-【設置選中】-【當前元件值為真】。

上一步完成之后效果如下,頁面載入時就會默認選中第一個tab頁簽。

這個時候搭配一個動態面板,就可以實現切換tab頁簽,展示不同的內容了,我們添加一個動態面板(我這里命名為內容展示),新增4個state,分別命名為1234,每個state內放入對應需要展示的內容。

接下來我們添加對應的交互就ok了。

完成啦,現在來看一下最終效果吧~

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

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!