カスタムページでは、バブルを使用して完全なコンテンツを提示します

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用シーン

カスタムページでデータを循環的に表示すると、データの内容が長すぎると、表示が不完全になることがあります。この場合、バブルヒントを使用できますマウスが押されると、自動的に完全なコンテンツが表示されます。

2.機能を実現する

2.1カスタムページの作成

2.2バブルヒントの設定

(1) コンテナを追加し、バブルヒントコンポーネントを入れて配置する

アウトラインツリーを開くと、バブルヒントの下にトリガー要素層とポップアップ層があり、トリガー要素層はページに表示されるトリガー内容を配置するために使用されます弾層はポップアップボックスの内容を表示するために使用されます。

(2) バブルヒントコンポーネントの設定

トリガービヘイビアーを「hover」に変更すると、マウスが押されたときにバブルが飛び出します。

2.3トリガ要素層に配置された循環展示データ

(1) テキストコンポーネントをドラッグしてトリガー要素に配置する

テキストコンポーネントをページにドラッグするには、アウトラインツリーでテキストコンポーネントを見つけ、アウトラインツリーでテキストコンポーネントをトリガー要素の下にドラッグして、テキストコンポーネントのスタイルを調整しますスタイルは自由に調整できます。

(2) 変数データソースを作成し、テストデータを追加して循環コンテナをバインドする

(3) トリガー要素の文字コンポーネントを循環データ内容にバインドする

コンテナが変数データソースdataをバインドした後、反復変数名はitemで、テキストは変数データソースのname値をバインドする必要があるため、テキストをitem.nameバインドします。

(4) 循環データの展示効果は以下の通りである

2.4バブルポップアップ層の内容を設定する

(1) テキストコンポーネントをドラッグしてトリガー要素に配置する

テキストコンポーネントをページにドラッグするには、アウトラインツリーでテキストコンポーネントを見つけ、アウトラインツリーでテキストコンポーネントをポップアップにドラッグして、テキストコンポーネントのスタイルを調整します。スタイルは自由に調整できます。

(2) ポップアップ内の文字コンポーネントを循環データ内容にバインドする

コンテナが変数データソースdataをバインドした後、反復変数名はitemで、テキストは変数データソースのname値をバインドする必要があるため、テキストをitem.nameバインドします。

3.効果を実現する

4.オンラインで試してみます

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_T5X4BNF7CDGI7BOAQG8C&from=yuque_subject