在axure中使用兩種不同的方法實現(xiàn)toggle組件


classification: 實戰(zhàn)axure
title: 在axure中使用兩種不同的方法實現(xiàn)toggle組件
tag: toggle dynamic panel move by 方法
author: 嘟嘟寶嘟
Date: 2020年12月4日


在axure中使用兩種不同的方法實現(xiàn)toggle組件

在實際原型設計中渠鸽,一般都使用動態(tài)面板實現(xiàn)toggle組件的動態(tài)效果妹笆,其實還可以使用組件的move by 方法實現(xiàn)toggle組件的動態(tài)效果捶索。

兩種方法各有優(yōu)缺點:

動態(tài)面板事件的邏輯簡單胸哥,代碼少溃斋,但是需要使用的組件較多馍佑,幾乎沒有動態(tài)效果(開關(guān)動作)酒甸;
使用組件的move by方法堆巧,基礎組件較少(是動態(tài)面板方式的一半)礁叔,可以做出開關(guān)移動的效果牍颈,但是對基礎組件的樣式效果設置和事件的代碼邏輯比較復雜。

今天就介紹用這兩種方法實現(xiàn)toggle組件的案例琅关。

1. 使用動態(tài)面板實現(xiàn)toggle組件

使用動態(tài)面板實現(xiàn)toggle組件需要一個動態(tài)面板組件煮岁,為動態(tài)面板組件設置兩個狀態(tài):關(guān),每個狀態(tài)內(nèi)包含三個基礎組件涣易,兩個shape組件畫出toggle開關(guān)的基礎樣式画机,一個label組件表明當前開關(guān)的狀態(tài)。

動態(tài)面板方式toggle的組件

動態(tài)面板的on狀態(tài):

on狀態(tài)

動態(tài)面板的off狀態(tài):

off狀態(tài)

然后設置動態(tài)面板click or tap 事件:

click事件

運行這個組件新症,我們看到當點擊toggle組件的時候步氏,開關(guān)實現(xiàn)了打開和關(guān)閉的效果。

但是當點擊中間的滑塊或開關(guān)狀態(tài)文字的時候徒爹,組件狀態(tài)也發(fā)生了改變荚醒,而實際系統(tǒng)的toggle組件這個時候的狀態(tài)不會發(fā)生,只會在點擊滑塊的旁邊顏色區(qū)域時隆嗅,滑塊才會滑動改變狀態(tài)腌且。

2. 使用組件的move by方法,實現(xiàn)toggle組件

這種方法只需要定義三個基礎組件榛瓮,兩個shape組件和一個label組件:

toggle的組件組成

一個帶有顏色改變的大的shape組件作為toggle的滑軌铺董,一個圓形shape組件作為toggle的滑塊,label組件表明當前開關(guān)的狀態(tài)。

組件效果
  1. 首先設置作為滑軌的shape組件的顏色和樣式效果精续,我把基本效果設置為紅色關(guān)閉狀態(tài)(這是因為selceted效果對應on狀態(tài)比較符合語義邏輯)坝锰,selected style設置為綠色,默認展示selected style重付。
滑軌組件的樣式效果設置
  1. 然后定義滑軌shape組件的click or tap事件:
滑軌組件的click事件

在move方法中使用的是相對位置by而不是絕對位置to顷级,橫向移動距離只要大于滑軌組件的尺寸就可以,設置移動的邊界滑塊就不會滑出滑軌組件确垫。500ms的滑動時間只是為了看到滑動效果弓颈,實際設置時可以設為100ms。

運行這個組件删掀,當我們點擊滑塊或者滑軌之外時翔冀,toggle組件不會有反應,當點擊滑軌時披泪,滑塊會有明顯的滑動開關(guān)效果纤子。

最終顯示效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市款票,隨后出現(xiàn)的幾起案子控硼,更是在濱河造成了極大的恐慌,老刑警劉巖艾少,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卡乾,死亡現(xiàn)場離奇詭異,居然都是意外死亡缚够,警方通過查閱死者的電腦和手機幔妨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來潮瓶,“玉大人,你說我怎么就攤上這事钙姊√焊ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵煞额,是天一觀的道長思恐。 經(jīng)常有香客問我,道長膊毁,這世上最難降的妖魔是什么胀莹? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮婚温,結(jié)果婚禮上描焰,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好荆秦,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布篱竭。 她就那樣靜靜地躺著,像睡著了一般步绸。 火紅的嫁衣襯著肌膚如雪掺逼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天瓤介,我揣著相機與錄音吕喘,去河邊找鬼。 笑死刑桑,一個胖子當著我的面吹牛氯质,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漾月,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼病梢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了梁肿?” 一聲冷哼從身側(cè)響起蜓陌,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吩蔑,沒想到半個月后钮热,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡烛芬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年隧期,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赘娄。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡仆潮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出遣臼,到底是詐尸還是另有隱情性置,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布揍堰,位于F島的核電站鹏浅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏屏歹。R本人自食惡果不足惜隐砸,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蝙眶。 院中可真熱鬧季希,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至珊搀,卻和暖如春冶忱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背境析。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工囚枪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人劳淆。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓链沼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親沛鸵。 傳聞我的和親對象是個殘疾皇子括勺,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容