中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在Axure原型中，我們需要經(jīng)常對標(biāo)簽的元件進(jìn)行調(diào)整。這期內(nèi)容，我們來探討Axure中可編輯標(biāo)簽元件設(shè)計與交互技巧。

01 可移除標(biāo)簽元件

創(chuàng)建可移除標(biāo)簽所需的元件

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.在元件庫中拖出一個文本框元件。

3.選中文本框元件，在樣式窗格中將按鈕元件的寬設(shè)置為60，高設(shè)置為25，填充色為任意顏色，這里用的是藍(lán)色（#0052D9）輸入文本“標(biāo)簽”文本字體顏色白色，居中，線寬為0，圓角半徑3。

4.在https://www.iconfont.cn/這個網(wǎng)站上找一個關(guān)閉icon圖標(biāo)，復(fù)制圖標(biāo)SVG代碼，粘貼到畫布上，將icon寬高設(shè)置為15，選中圖片右鍵變換圖片，轉(zhuǎn)換SCG圖片為形狀。

5.選中做好的矩形和關(guān)閉icon圖標(biāo)打一個組，右鍵，組合。

02 創(chuàng)建交互

創(chuàng)建“關(guān)閉icon圖標(biāo)”的交互狀態(tài)

1.選中組合中的“關(guān)閉icon”，在交互窗格點(diǎn)擊新建交互，單擊時，顯示/隱藏，隱藏組合元件。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁面點(diǎn)擊關(guān)閉按鈕可以隱藏圖標(biāo)。

03 動態(tài)編輯標(biāo)簽元件

創(chuàng)建添加標(biāo)簽所需的元件

1.復(fù)制一個前面做好的可移除標(biāo)簽元件，將填充顏色改為白色，線框為1，線框顏色為淺灰色（#D9D9D9），輸入文本“+添加標(biāo)簽”字體顏色為灰色。

2.在元件庫中拖入一個文本框，寬設(shè)為75，高設(shè)為25，線段為0，命名為輸入框，置于添加標(biāo)簽元件底層。

3.選中添加標(biāo)簽、輸入框，右鍵轉(zhuǎn)為動態(tài)面板。

創(chuàng)建動態(tài)標(biāo)簽所需的元件

1.在元件庫中拖入一個中繼器元件，復(fù)制可移除標(biāo)簽元件，粘貼到中繼器容器中，命名為標(biāo)簽名稱。

2.選中中繼器容器，將行間距設(shè)為10，列間距設(shè)為15，布局為水平分布。

創(chuàng)建清楚按鈕所需元件

1 雙擊中繼器容器，選中清除icon，右鍵創(chuàng)建為動態(tài)面板。

04 創(chuàng)建交互

創(chuàng)建“+添加標(biāo)簽”元件的交互狀態(tài)

輸入框

1.雙擊“+添加標(biāo)簽”動態(tài)面板，選中輸入框元件，在交互窗格中新建按鍵按下時交互，啟用情形判斷。

情形1：如果 文字于 當(dāng)前!= “”并且 按下的鍵 ==Return、設(shè)置選中+添加標(biāo)簽為“假”、置于頂層/底層 到底層。

添加行，動態(tài)標(biāo)簽中繼器添加 1行。

添加函數(shù)變量值。

添加局部變量，LVAR1=元件文字輸入框，插入變量 LVAR1

情形2：否則 如果 文字于 當(dāng)前!= “”并且 按下的鍵 ==Return、設(shè)置選中+添加標(biāo)簽為“假”、置于頂層/底層 到底層，添加行 動態(tài)標(biāo)簽添加1行。

2.新建交互，獲取焦點(diǎn)時，設(shè)置選中，+添加標(biāo)簽為“真”，設(shè)置文本當(dāng)前為“”

3.新建交互，失去焦點(diǎn)時，啟用情形判斷。

情形1：如果文字于 當(dāng)前！=“”

設(shè)置選中+T添加標(biāo)簽為“假”，置于頂層/底層 到 底層，添加行 動態(tài)標(biāo)簽 添加1行

情形2：如果文字于 當(dāng)前！=“”設(shè)置選中+T添加標(biāo)簽為“假”，置于頂層/底層 到 底層。

4.文本框?qū)傩?最大長度設(shè)置為10

+添加標(biāo)簽

1.選中“+添加標(biāo)簽”按鈕，在交互窗格中新建交互，單擊時，置于頂層/底層 輸入框 到頂層，獲取焦點(diǎn) 輸入框 選中文本。

2.文本框?qū)傩?交互樣式 鼠標(biāo)懸停的樣式 填充色為藍(lán)色（#0052D9）字體顏色為白色。

3.元件選中的樣式 線段顏色為藍(lán)色（#0052D9）。

創(chuàng)建“動態(tài)標(biāo)簽”元件的交互狀態(tài)

創(chuàng)建動態(tài)標(biāo)簽容器交互

1.選中動態(tài)標(biāo)簽容器，在交互窗格中新建交互，每項加載時，設(shè)置文本，標(biāo)簽為“[[Item.Column0]]”

2.設(shè)置尺寸 標(biāo)簽寬為[[LVAR1.length*15+15]] 高度不變

創(chuàng)建標(biāo)簽元件交互

1.雙擊動態(tài)標(biāo)簽容器，選中標(biāo)簽動態(tài)面板，在交互窗格中新建交互，載入時，移動，當(dāng)前元件到達(dá) X;[[LVAR1.x+LVAR1.width-This.width-5]] y;[[LVAR1.y+This.height-2]]

2.雙擊icon動態(tài)標(biāo)簽容，選中關(guān)閉icon，在交互窗格中新建交互，單擊時，刪除當(dāng)前行。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁面點(diǎn)擊關(guān)閉按鈕可以刪除標(biāo)簽，點(diǎn)擊添加標(biāo)簽可以新增標(biāo)簽。

預(yù)覽地址：https://zvevp3.axshare.com

OK，這期內(nèi)容到這里就結(jié)束了。