Product Inspector 301: プロパティポップアップの構築
必要条件
このセクションを開始する前に、Product Inspector 201: 部品ファインダーの構築を完了していることを確認してください。
この時点では、選択したコンポーネントに関連付けられているメタデータが 2D ユーザーインタフェース内でロードおよびレンダーされています。現在選択されているアイテムが視覚的なインジケータでハイライトされ、ユーザーの方向設定がわかりやすくなります。モデル階層をより詳細に調べられるようにするために、選択したサブアセンブリの拡張メタデータを動的に表示するプロパティパネルを統合します。
1. > で、左側のポップアップに対して次の CSS を定義します。
.left-side-popup {
position: fixed;
left: 0px !important;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0px 5px 5px 0px;
background-color: $PTC-dark-grey;
opacity: 90%;
}
2. Visualization ビューの 2D キャンバスに移動します。
3. 「ポップアップ」ウィジェットをキャンバスに追加し、以下のプロパティを設定します。
◦ 「クラス」 - 「left-side-popup」と入力します。
◦ 「Studio ID」 - 「propertyPopup」と入力します。
4. 次に、「グリッドレイアウト」ウィジェットを「ポップアップ」ウィジェットに追加します。
5. 「グリッドレイアウト」ウィジェットが選択されている状態で、「詳細」枠の「余白」フィールドに「10px」と入力します。
6. プロジェクトツリーで新しいポップアップの下の列を選択し、「詳細」枠を表示します。「グリッドの操作」の「列を追加」をクリックします。
7. 左側の列を選択し、次のプロパティを設定します。
◦ 「フレックス方向」 - 「行」を選択します。
◦ 「コンテンツを両端揃え」 - 「開始」を選択します。
◦ 「アイテムを整列」 - 「中央」を選択します。
8. 左側の列に「ラベル」を追加し、次のプロパティを設定します。
◦ 「テキスト」 - 「Part Details」と入力します。
◦ 「クラス」 - 「simple-label title-label」と入力します。
◦ 「パディング (例 10px 10px 20px 10px)」 - 「0px 0px 10px 0px」と入力します。
◦ 「Studio ID」 - 「partDetailsTitleLabel」を入力します。
9. 右側の列を選択し、次のプロパティを設定します。
◦ 「フレックス方向」 - 「行」を選択します。
◦ 「コンテンツを両端揃え」 - 「終了」を選択します。
◦ 「アイテムを整列」 - 「中央」を選択します。
10. 右側の列に「ボタン」を追加し、次のプロパティを設定します。
◦ 「テキスト」 - 「Part Details」と入力します。
◦ 「クラス」 - 「simple-label title-label」と入力します。
◦ 「パディング (例 10px 10px 20px 10px)」 - 「0px 0px 10px 0px」と入力します。
◦ 「Studio ID」 - 「closePartDetailsButton」と入力します。
11. closePartDetailsButton の「クリック」イベントをプロジェクトツリーの propertyPopup にドラッグアンドドロップします。「バインディングターゲットを選択」ウィンドウで「ポップアップを非表示」を選択して、「バインド」をクリックします。
12. プロジェクトツリーで propertyPopup の下の row を選択します。「グリッドの操作」の下の「詳細」枠で「行を追加」をクリックします。
13. 新しい行 (2 番目の行) に「リピーター」ウィジェットを追加します。「Studio ID」に「propertiesList」と入力します。
14. 「グリッドレイアウト」ウィジェットを「リピーター」に追加します。
15. プロジェクトツリーで propertiesList の下の row を選択します。「グリッドの操作」の下の「詳細」枠で「行を追加」をクリックします。
.
16. 左側の列に「ラベル」を追加し、次のプロパティを設定します。
◦ 「テキスト」 - 「{{item.name}}」と入力します。
◦ 「クラス」 - 「simple-label simple-label--green」と入力します。
◦ 「パディング (例 10px 10px 20px 10px)」 - 「0px 0px 10px 0px」と入力します。
◦ 「Studio ID」 - 「itemNameLabel」と入力します。
17. 右側の列に「ラベル」を追加し、次のプロパティを設定します。
◦ 「テキスト」 - 「{{item.name}}」と入力します。
◦ 「クラス」 - 「simple-label」と入力します。
◦ 「パディング (例 10px 10px 20px 10px)」 - 「0px 0px 10px 0px」と入力します。
◦ 「Studio ID」 - 「itemValueLabel」と入力します。
18. > で、次の追加 CSS を定義します。
.simple-label--green {
color: $PTC-neon-green;
font-weight: 600;
}
19. これで、このユースケースが完了しました。次は、ユースケース: Product Explorer を使用した有効なモデルデータの表示を確認してください。