Axure RP 8 實現 圓角文本框 圓角帶篩選的下拉列表框 可自動顯示滾動條


      剛開始用Axure 會發現 Axure 元件庫並不是很齊全,很多元件需要自己想辦法解決 或者去網上去找。其實個人建議網上有現成的元件可以就下載就不必花時間去折騰。除非你也想練練手,原型這種東西除非高保真的,也沒必要畫得那么逼真,能加說明說清楚就直接加說明,或者加便利貼都可以的。最終目的都是保證產品生產出來是用戶真正想要的就行。

       剛開始畫原型 發現文本框好生硬,完完全全的四邊型,顯得原型看起來不是很專業(其實沒幾個人會去在意你原型文本框是圓角還是直角)。好啰嗦,直接正題。

 

元件庫下載地址:https://pan.baidu.com/s/1ONfXrsWz-_ZFK_TA77dNPg 提取碼:3ycw

解壓后,在元件庫載入元件庫選擇文件就可以直接拖出來用。

 

圓角文本框

       Axure  RP 8 文本框樣式設置是無法設置 邊框圓角的(不知道為啥)。但是矩形是可以設置邊框圓角。這樣就可以借助 矩形來實現圓角的效果。

       1、拉個矩形 邊框設置為圓角

       2、拉個文本框在屬性欄設置隱藏邊框(注意是屬性欄不是樣式欄 或者右鍵隱藏邊框)

       3、把矩形的位置大小設置成比文本框稍微大一點點剛好包能顯示全邊框

       4、選中矩形與文本框設置成組合

如圖:

 

 

帶搜索帶滾動條的下拉列表框

1、先復制一個圓角文本框,講文本框屬性設置只讀

2、在框內加入向上 向下的 三角形(一開始先別疊加到一塊,后面需要設置這兩個形狀的點擊事件用戶控制 選項區隱藏顯示)

3、設置向下三角形隱藏

4、拖入一個矩形 一個文本框(要不要圓角的自己定) 一個動態面板(只有他才能控制滾動條),並設置成一個組合(這樣控制隱藏顯示時方便點)並且組合設置成隱藏

可以把矩形也設置成圓角 邊框顏色也可以統一一下,看起來舒服點。

5、在動態面板state1中添加中繼器,雙擊中繼器 把中繼器中的矩形邊框設置為None,並且設置下中繼器的鼠標懸停的交互效果 背景填充 F1F1F1

實現中繼器的 選擇時的光棒效果

 

 

 

6、然后在中繼器屬性中添加數據行

7、設置篩選,在篩選文本框中設置 改變文本事件

8、交互事件 文本改變時,在添加動作中選擇添加篩選動作

9、名稱隨意,條件設置[[Item.Column0.indexOf(LVAR1)>-1]]

函數:字符串1.indexOf(字符串2) 就是匹配字符串2在字符串1中的哪個位置  返回字符串2在 字符串1中的首個字符位置的下標 index (下標從零開始)。

這里面的函數做過開發的基本一眼就能看懂。

設置方式如下,設置函數時點插入函數常用的函數都可以找得到的。這里添加了一個變量,這個變量就是取到我們文本框中輸入的值,一變函數進行匹配

 

 運行看一下效果

10、右擊動態面板設置滾動條,垂直滾動條自動顯示(自動顯示的意思當內容超出動態面板時就會顯示滾動條)

 這里我把動態面板高度拉小了以便顯示滾動條。

11、接下來繼續設置下中繼器 選中值填充到 文本框。打開動態面板state1,雙擊中繼器,給中繼器添加單擊事件在左邊添加動作中選擇設置文本。

 

 

到這里提一下,養成給元件命名的習慣挺重要的,要不然你都不知道給哪個文本框賦值 。我這里就是沒命名,結果第一賦值 弄錯了,重新弄好再截圖的。

 這里添加一個變量,這個變量就是獲取當前中繼器 項item中的值

 

 

 

 12、接下來就是控制隱藏顯示了。

先來設置兩個 三角形 向下三角形 單擊事件

 

 向上三角形單擊事件

 

 然后把向上的三角形設置成隱藏后,疊加到一起

13、最后設置下展示文本框的的點擊事件

 

最后發現選中值后,下拉選項沒隱藏,需要在中繼器的點擊事件中天機隱藏,選項組合 的隱藏。

 

 

 一步步寫出來其實挺麻煩,做起來其實也簡單。

元件庫下載地址:https://pan.baidu.com/s/1ONfXrsWz-_ZFK_TA77dNPg 提取碼:3ycw

解壓后,在元件庫載入元件庫選擇文件就可以直接拖出來用。

 里面圓角的多行文本框折騰半天沒弄好(主要是多行文本框 用戶可以直接拖動大小,二外面的矩形框又取不到 多行文本框大小的值),如果有大神請指教下

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM