ランディングページの構築
ナビゲーションを強化するために、このセクションではポップアップを追加します。ポップアップは、UI をより効果的に構造化し、より良いユーザーエクスペリエンスを提供するのに役立ちます。
1. > で、ページ全体のポップアップを表示するために次の CSS を定義します。
.full-page-popup {
background-color: $PTC-dark-grey;
}
アプリケーションのスタイルは、次のようになります。
2. Identification ビューに移動します。
3. 「ポップアップ」ウィジェットをキャンバスに追加し、以下のプロパティを設定します。
◦ 「クラス」 - 「full-page-popup」と入力します。
◦ 「幅 (px、%、vh、em)」 - 「100%」と入力します。
◦ 「高さ (px、%、vh、em)」 - 「100%」と入力します。
◦ 「表示」 - チェックボックスをオンにします。
◦ 「Studio ID」 - 「landingPagePopup」と入力します。
4. 次のバインディングを作成します。
◦ プロジェクトツリーで scan-1 を選択します。「ユーザーがキャンセル」イベントをプロジェクトツリーの landingPagePopup にドラッグアンドドロップします。「バインディングターゲットを選択」ウィンドウで「ポップアップを表示」を選択して、「バインド」をクリックします。
◦ プロジェクトツリーで Start Scanning ボタンを選択します。ボタンの「クリック」イベントをプロジェクトツリーの landingPagePopup にドラッグアンドドロップします。「バインディングターゲットを選択」ウィンドウで「ポップアップを非表示」を選択して、「バインド」をクリックします。
5. 次に、「グリッドレイアウト」ウィジェットを「ポップアップ」ウィジェットに追加して、レイアウトをさらに構造化します。
6. 「グリッドレイアウト」ウィジェットが選択されている状態で、「詳細」枠の「行の高さを均等に分配」チェックボックスをオンにします。
7. (「詳細」枠の「グリッドの操作」で) 「行を追加」を 2 回クリックして、グリッドにさらに 2 行追加します。
8. 1 行目は空のままにします。
9. 2 行目を選択し、次の操作を行います。
◦ 「フレックス方向」 - 「列」を選択します。
◦ 「コンテンツを両端揃え」 - 「中央」を選択します。
◦ 「アイテムを整列」 - 「中央」を選択します。
◦ 「ラベル」ウィジェットを追加し、以下のプロパティを設定します。
▪ 「テキスト」 - 「Welcome to the」と入力します。
▪ 「クラス」 - 「simple-label title-label」と入力します。
▪ 「Studio ID」 - 「welcomeLabel」と入力します。
◦ 2 番目の「ラベル」ウィジェットを追加し、以下のプロパティを設定します。
▪ 「テキスト」 - 「Displaying Dynamic Assets 101 sample」と入力します。
▪ 「クラス」 - 「simple-label sub-title-label」と入力します。
▪ 「Studio ID」 - 「experienceTitleLabel」と入力します。
10. 3 行目を選択し、次の操作を実行します。
◦ 「フレックス方向」を「行」に設定します。
◦ 「コンテンツを両端揃え」を「中央」に設定します。
◦ 「アイテムを整列」を「終了」に設定します。
◦ 「パディング (例 10px 10px 20px 10px)」を「20px」に設定します。
11. 次に、「スキャンを開始」ボタンを 3 行目に移動し、次のプロパティを更新します。
◦ 「テキスト」 - 「Scan the QR code」と入力します。
◦ 「クラス」 - 「long-button--green」と入力します。
◦ 「Studio ID」 - 「startScanButton」と入力します。
12. これでランディングページが作成されました。次に製品識別ポップアップを追加します。