axure商城

【Axure 教程】中繼器入門教程-卡片制作

文主要講解中繼器的基本用法,以便大家更容易去理解和學習中繼器的高級用法,入門教程會分為 6 個小節,本節主要講解如何通過中繼器快速制作卡片列表

原型展示:https://ypqsfr.axshare.com

所需原件:

  1. 中繼器
    1. 矩形
    2. 圖片
    3. 文本標簽

本文主要講解中繼器的基本用法,以便大家更容易去理解和學習中繼器的高級用法,入門教程會分為 6 個小節,本節主要講解如何通過中繼器快速制作卡片列表


一、卡片制作

拖入中繼器,雙擊中繼器,刪除中繼器默認帶出的矩形,拖入需要制作卡片的元件,示例中使用了矩形(卡片背景)、圖片(卡片圖標)、文本標簽(卡片標題、描述文本、操作按鈕);并按照自己的想法將元件做好布局;

二、中繼器賦值

關閉中繼器編輯窗口,選中中繼器,在樣式模塊中,編輯中繼器的數據,如上圖,注意設置好數據表頭的名稱,以便在賦值時快速查找;

特別地,圖片的數據,需要鼠標右擊數據,通過【導圖圖片】進行設置,如上圖所示;

新建交互,添加【每項加載】時設置文本和設置圖片(圖片需要通過此動作設置)的交互動作,設置完畢,頁面將會實時更新中繼器的列表內容,如上圖所示;

三、布局設置

賦值完成后,中繼器默認【垂直】布局方式,在中繼器的樣式面板,找到【布局】,并將布局方式設置為【水平】,勾選【網格排布】,并設置每行項數量為【4】(可根據實際使用進行調整);

四、間距設置

最后一步,大家完成一、二、三后可能就會發現,卡片之間沒有間距,過于密集,因此我們需要在樣式面板中找到【間距】,并設置【每行】【每列】的間距為 24(可根據實際使用進行調整);


更多內容,微信搜索“愛學兒”,一起交流探討吧!

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

【Axure 教程】中繼器入門教程-列表制作

2021-5-20 18:51:04

基礎教程

Axure RP 10授權激活圖文教程

2021-5-22 20:48:50

axure商城
2 條回復 A文章作者 M管理員
  1. Plutonium

    感謝分享!

  2. Sly69

    太棒了

?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo