axure商城

教程:axure頁簽導航制作教程(復用性高)

在axure設計過程中,經常會使用到頁簽導航,往往需要區別選中和未選中效果時,那這種效果如何做起來逼真呢,又有什么方法使這個效果能復用呢?

一、實現邏輯

1、點擊Tab1時,填充矩形顏色,其他Tab不填充矩形顏色

二、實現步驟

1、首先從元件庫中拖入一個矩形框;
2、設置好矩形框大小,并將矩形框線段設置為不可見后,復制2個相同的矩形框,分別命名為Tab1、Tab2、Tab3,再拖入一條直線,按下圖所示放置;
2、設置矩形懸停和選中效果:按住shift鍵選中三個矩形框,在【交互樣式設置】中點擊鼠標懸停,彈框顯示<交互樣式設置>頁面;
3、在<交互樣式設置>頁面設置字體顏色、線段顏色、線寬、邊框可見性,其中邊框可見性選中顯示最底部的邊框;
4、在<交互樣式設置>頁面,點擊【選中】,跟鼠標懸停時的效果設置一致;設置完成后,點擊【確定】,完成設置;
5、選中矩形框Tab1,在右側窗口,點擊【鼠標單擊時】,彈窗設置選中效果,勾選“當前元件”,設置完成后,點擊【確定】,返回頁面;其他矩形框(Tab2、Tab3)按Tab1的鼠標單擊效果進行配置;
6、最后一步,選中所有矩形框(Tab1、Tab2、Tab3),在右側【設置選項組名稱】中設置名稱“標簽”,這樣就完成了頁簽的設置,可以預覽查看下效果喲。
7、其他說明:
7.1如果有新增頁簽,則直接復制一個矩形框即可,這樣復用性高;
7.2 另外頁簽的效果可以按需設置,左側頁簽、頂部頁簽都可按照此方法處理。

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

Axure生成預覽地址如何能查看到被瀏覽次數呢?

2020-11-27 16:02:19

高級教程

axure實現數字輸入框效果

2021-3-17 11:21:37

axure商城
5 條回復 A文章作者 M管理員
  1. Serena
  2. 180****0753
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo