Section Index
Section Index UIパターンを使用すると、画面のコンテンツを整理してページ内をすばやく移動できます。
Section Index UIパターンの使用方法
-
Service Studioのツールボックスで
Section Indexを検索します。Section Indexウィジェットが表示されます。
-
ツールボックスから、Section Indexウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
この例では、Section Indexウィジェットを列にドラッグしています。
-
ツールボックスでSectionウィジェットを検索し、アプリケーション画面のメインコンテンツ領域にドラッグします。アプリに必要な数に応じてセクションを追加します。
この例では、4つのSectionウィジェットを列にドラッグしています。各Sectionウィジェットには、［Title］、［Actions］、［Content］の各プレースホルダが含まれています。
-
関連するコンテンツをSectionウィジェットの［Title］プレースホルダと［Content］プレースホルダに追加します。
この例では、［Title］プレースホルダに従業員名を追加し、［Content］プレースホルダにテキストと画像を含むCard Sectionedウィジェットを追加しています。
画面上にあるすべてのセクションへのリンクが自動的に作成されます。リンクの名前は、各セクションの［Title］プレースホルダに入力したテキストに基づきます。以下の例では、リンクは手順2で入力した従業員名に設定されています。
-
［Properties］タブでオプションのプロパティを設定し、Section Indexのルックアンドフィールをカスタマイズできます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| IsSmooth（Boolean型）: オプション | Trueの場合、リンク先への移動がアニメーション化されます。Falseの場合、即時に移動します。これがデフォルトです。 |
| IsFixed（Text型）: オプション | Trueの場合、Section Indexパターンは常に画面上の同じ位置に表示されます。これがデフォルトです。Falseの場合、Section Indexパターンがページコンテンツとともにスクロールします。 |
| TopPosition（Integer型）: オプション | ページの上部からSection Indexの最初のアイテムまでの距離（ピクセル単位）。 |
| ExtendedClass（Text型）: オプション | Section Index UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
その他の注記
Section Indexパターンでは、［Title］プレースホルダを忘れずに使用してください。各Section Indexのリンクのテキストがこれによって定義されます。
デバイスの互換性
Internet Explorerでは、position: fixedをposition: stickyの代わりに使用します。後者はサポートされていません。
他のパターンとの互換性
このUIパターンは、同じ画面内のSectionパターンとのみ連携します。