Axure的級聯選擇組件本家兒要操縱動態面板,結果圖片如下,用戶可以經由過程一級級選擇確定子項的方針,以下以城市為例介紹具體實現方式。
起首介紹若何操縱動態面板實現級聯的選擇,第一步我們設計好框架
1、拖動一個矩形框作為布景,設置暗影使其看上去比力美不雅
2、再拖動三個矩形框作為每一個項承載
3、拖動小矩形作為數據內容,各個小矩形的懸停結果設置為淺藍色,選中時也為淺藍色
框架搭完,第二步我們設置數據
1、將作為省的數據及矩形框組合定名為省;作為市的數據矩形框及矩形框02組歸并轉換為動態面板定名市;作為區的數據矩形框及矩形框03組歸并轉換為動態面板區
2、如圖設置市的面板狀況并填湊數據
3、如圖設置區的面板狀況并填湊數據
設置數據完第三步設計交互結果,以浙江省的為例
1、將兩個動態面板設置為埋沒
2、當點擊浙江省時,滑動呈現市的動態面板,面板狀況為浙江省下市
3、當點擊杭州市時,滑動呈現區的動態面板,面板狀況為杭州市下區
如下圖
其他數據的交互結果也是如斯,這里不再贅述,上述步調做完級聯選擇就根基實現。接下來我們要設計一個選擇框,使選擇到對應區時,選擇框可以或許獲取到數據。
1、起首還需要將我們方才設計好的級聯選擇的組合定名為級聯選擇下拉框然后設為埋沒
2、我們拉動一個矩形框,設置懸停和選中結果,我這里依舊為#108EE9的淺藍色。
交互事務如下圖
最后我們在單擊區的數據時,選擇框的文本變為該區的數據即可,如下圖
前面步調做完根基結果就完當作啦
0 篇文章
如果覺得我的文章對您有用,請隨意打賞。你的支持將鼓勵我繼續創作!