欧美日韩午夜精品不卡综合-欧美日韩系列-欧美日韩小视频-欧美日韩性-成人五月网-成人五级毛片免费播放

二維碼
企資網

掃一掃關注

當前位置: 首頁 » 企資頭條 » 專題 » 正文

Axure高保真教程_用氣泡元件顯示中繼器表格

放大字體  縮小字體 發布日期:2022-12-25 13:41:33    作者:微生曉鵬    瀏覽次數:53
導讀

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

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

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

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

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

一、制作完成后應具備以下效果
    在中繼器表格中導入文字,自動在對應元件上顯示文本內容。如果文本較長時,只顯示前面部分得內容,后面自動用省略號代替。鼠標移入長內容時,顯示其他和對應完整得文本內容。。

原型地址:感謝分享39xb3u.axshare感謝原創分享者/#g=1

二、制作教程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 協議

 
(文/微生曉鵬)
打賞
免責聲明
本文為微生曉鵬推薦作品?作者: 微生曉鵬。歡迎轉載,轉載請注明原文出處:http://www.syqk.com.cn/news/show-317462.html 。本文僅代表作者個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,作者需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們郵件:weilaitui@qq.com。
 

Copyright ? 2016 - 2023 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

粵ICP備16078936號

微信

關注
微信

微信二維碼

WAP二維碼

客服

聯系
客服

聯系客服:

在線QQ: 303377504

客服電話: 020-82301567

E_mail郵箱: weilaitui@qq.com

微信公眾號: weishitui

客服001 客服002 客服003

工作時間:

周一至周五: 09:00 - 18:00

反饋

用戶
反饋

主站蜘蛛池模板: 欧美日韩人成在线观看 | 黄色a毛片 | 欧美另类自拍 | 成人毛片免费观看视频大全 | 日韩经典在线观看 | 精品96在线观看影院 | 久久久久综合一本久道 | 欧美综合自拍亚洲综合 | 五月激情丁香婷婷综合第九 | 国产系列在线 | 国产亚洲福利一区二区免费看 | 日本精品1在线区 | 在线看片中文字幕 | 精品国产免费观看久久久 | 日韩成人在线播放 | 国产成人综合久久精品红 | 亚洲精品久久久中文字 | 性欧美巨大的视频 | 黄a在线观看 | 成人国产精品一区二区网站 | 免费观看毛片的网站 | aaaaaa精品视频在线观看 | 中文字幕成人免费视频 | 欧美在线视频 一区二区 | 91av福利| 久久精品国产一区二区三区日韩 | 国产91精品一区二区麻豆亚洲 | 草草影院视频 | 日本一区二区三区在线 视频观看免费 | 97青青草原国产免费观看 | 九九精品视频在线播放8 | 欧美成人影院免费观 | 国产精品成人一区二区三区 | 一区二区三区在线免费看 | 国产性大片黄在线观看在线放 | 91四虎国自产在线播放线 | 久久久久久综合成人精品 | 中文在线视频 | 国产一区精品 | 国产网站免费视频 | 国产性较精品视频免费 |