SharePoint Web パーツをデザインする場合は、セカンダリの相互作用レベルが必要な場合があります。たとえば、リスト内のアイテムや、ギャラリー内の個々の写真などです。 この記事では、セカンダリ状態のツール バー、既定のコマンド、スケール、相互作用の状態を使用して個々のアイテムを選択する方法について説明します。
セカンダリの Web パーツの構成とツール バーは、イメージまたはファイルのビューアなど、単一状態の Web パーツと同じパターンに従います。 2 次レベルのアイテムは、独自のツール バーとそれぞれのプロパティ ウィンドウを持つことができます。これにより、編集者は Web パーツを意味のあるコンテンツやデータで簡単に構成することができます。 2 つのレベルをもつ Web パーツの構成オプションには、明確な区別があることに留意してください。 ソース、フィルタリング、レイアウトの構成だけでなく、Web パーツ全体に影響を与える他のオプションについても、1 次レベルで保持することをお勧めします。
参照として使用する Web パーツの例をいくつか以下に示します。
- イメージ ギャラリー
- クイック リンク
セカンダリ ツール バー
セカンダリ ツール バーは、プロパティ ウィンドウでアイテム レベルの構成をサポートする必要のある Web パーツ レイアウト内の個々のアイテムと、move など他のコマンドで、レイアウト内のアイテムを再配置するか、またはアイテムを削除するのに使用します。 このツール バーに、ご自分の Web パーツへのニーズに合ったユーザー設定のコマンドを追加することもできます。
選択状態
Web パーツ内の 2 次レベルのツール バーには、編集、移動、削除の 3 つの中核となるコマンドがあります。 セカンダリ レベルで Web パーツをビルドしている場合は、選択状態の実装を検討することが重要です。
2 次レベルのツール バーは編集者が個々のアイテムを選択 (クリック/タップ) した場合のみ表示する必要があります。 ユーザーに過度の負担がかかる可能性があるので、全アイテムに対して一度にすべての 2 次レベル ツール バーを表示しないでください。 また、ツール バーがホバー上に表示されないようにしてください。これを行うと、タッチをサポートするデバイスの利便性に問題が起こる可能性があります。
2 次レベルのアイテムの境界ボックスと枠線の両方またはどちらかは、既定の状態からホバー上でプライマリ カラーに変更し、選択でプライマリ カラーを保持する必要があります。 プロパティ ウィンドウを使用している場合、またはアイテムを再配置している場合に、選択されるアイテムの内容をユーザーに把握してもらうために、境界ボックスとアイコンをアクティブ状態に保持することが重要です。
以下は、イメージ ギャラリー Web パーツの個々の 2 次レベル アイテムから引用した例です。
アイテム レベルの編集 –特定のアイテム レベルの構成オプションでプロパティ ウィンドウを開きます。 境界ボックスがアクティブ/選択済みのままになることに注意してください。
移動 – アイテムの透明度が 65% まで下がり、ドロップ シャドウがアイテムを囲みます。
削除 – X 削除アイコンが選択された場合は、ツール バーが非表示となり、アイテムがフェードアウトして特定のレイアウトが入るように空きスペースを作ります。
プロパティ ウィンドウ
プロパティ ウィンドウは、2 次アイテム レベルでは、最初に Web パーツ全体を選択する場合と同じように動作します。 1 次レベルへのフォーカスは 2 次レベルの選択へシフトし、編集者が個々のアイテムを構成できるようになります。
下の例では、1 次レベルがイメージ ギャラリー Web パーツのイメージ ソースとレイアウト構成になっています。 ユーザーが個々のイメージを選択すると、2 次レベルのプロパティ ウィンドウでタイトル、キャプション、代替テキストを構成できます。
