Axure高保真教程:用氣泡元件顯示中繼器表格里的省略文字

0 評論 5196 瀏覽 13 收藏 9 分鐘

編輯導語:很多時候,我們可能會遇到一行內容展示不下、文字需省略顯示的情況。這種情況很常見,那么我們如何利用氣泡元件顯示中繼器表格里的省略文字?本篇文章里便做了手把手解讀,一起來看看吧。

在系統表格中,經常會遇到有些格子里的內容很長,如果全部顯示就會導致一頁看不完其他列的內容,遇到這種情況,我們往往是只顯示長內容的前面部分,如果鼠標移入的時候才會顯示全部內容。

這樣的好處一是可以一眼看完表格內完整的內容,二是如果想查看詳細的長內容,也可以通過鼠標移入的方式查看。

所以今天作者就教大家,如何用中繼器和氣泡元件實現這種顯示具體文字內容的原型模板。

一、制作完成后應具備以下效果

  1. 在中繼器表格中導入文字,自動在對應元件上顯示文本內容。
  2. 如果文本較長時,只顯示前面部分的內容,后面自動用省略號代替。
  3. 鼠標移入長內容時,顯示其他和對應完整的文本內容。。

二、制作教程

1. 表頭的制作

表頭的制作比較簡單,我們用矩形來制作即可,矩形的樣式根據需求偏好來調整即可。有多少列我們就用多少個矩形,如下圖所示擺放。

2. 表格內容的制作

制作表格內容,我們主要用到的是中繼器和矩形。我們在中繼器里放入對應的矩形,這里矩形和上面的表頭的各個矩形的寬度應該是一一對應的,最后一列操作列我們用修改和刪除的文本代替即可,我們還要增加一個底部矩形作為背景,底部矩形設置懸停時淺藍色的交互樣式。

最后我們把中繼器內部所有元件組合,勾選觸發鼠標內容交互樣式,這樣才可以有移入對應行高亮變色的效果。

添加完元件后,我們在中繼器表格里面增加列:

完成后我們就可以增加交互了首先我們用設置文本的交互,將中繼器里的值設置到對應的元件里,例如矩形1,我們就設置他的文本值為item.Column1;矩形2,我們就設置他的文本值為item.Column2……以此類推

然后我們就要加一個條件進入了,我們以第四列內容為例,因為案例中只有第四列是長內容,所以我們添加一個條件,就是如果第四列表格中的字數大于10,我們就設置他的文本為前十位內容+……

這里設置條件是考慮到有可能他某一行里面沒有操作10個字的,那行就應該全部顯示,所以我們增加了這樣一個條件,當然了如果你說,你這列里面每一行都超過了10個字,那就可以不寫條件。

這里面我們涉及到兩個行數,一個是length函數,就可以統計一段內容里包含了多少個字符,所以我們的條件就是Item.Column4.length>10

如果這個條件成立,我們就要用設置文本的交互,首先我們要在這段內容里面提取前面10個字符,這里設計到slice函數,就是可以對文本進行切割,我們去0到10位,Item.Column4.slice(0,10),這樣就取出來了,然后在后面再加上……提示用戶這是省略內容。

3. 氣泡的制作和交互

我們新建一個矩形,鼠標右鍵,選擇形狀,就可以選擇出氣泡的形狀,如下圖:

選擇形狀后,我們調整一下尺寸,已經文字上下左右的邊距和對齊方式,默認隱藏。

然后我們進入中繼器,選中里面第四列的矩形,在里面增加交互:

鼠標移入時:首先用顯示的交互,將氣泡框顯示出來,然后用移動的事件,將氣泡框移動到對應的位置,這里我們要選到達,x軸的位置是不變的,他原本在哪里就填寫在哪里,例如他原來是在200的橫坐標,就填200。

關鍵是y軸的位置,我們要知道現在是在第幾行,這里用到item.index的函數就可以獲取到第幾行了,這里具體的y坐標其實就是中繼器的y坐標值-氣泡的高度+(所在行數-1)*表格每一行的高度。

例如中繼器在200的位置,氣泡高度是100,現在看的是第1行,那么氣泡應該出現的y坐標就是200-100=100,如果是第二行就要+35,如果是第三行就再加35。

可以看到,一般作者都是喜歡寫成函數的形式,不會寫具體的數字,因為如果寫的是數字,移動位置,或者我們修改尺寸的時候就又要重新改這里的交互,就會很麻煩了,所以為了復用性,我都會寫成函數的形式。如果你們理解不了函數,建議先寫固定值,等效果出來了,理解了之后,在轉化為函數的形式。

鼠標移入的最后我們還要把完整的文本值設置到氣泡里面,完整值其實一直記錄在中繼器表格里,我們用設置文本的交互,將item.Column4的值設置到氣泡里即可。

最后,在鼠標移出時,我們用顯示隱藏的交互,將氣泡隱藏即可。

這樣我們就完成了用氣泡顯示中繼器表格里省略內容的原型模板了,下次使用時,我們只需要在中繼器表格里填寫或導入文字,即可自動生成交互,是不是很方便呢?感興趣的同學們可以動手試試哦。

 

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

題圖來自 Pexels,基于 CC0 協議

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

題圖來自 Unsplash,基于 CC0 協議

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

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