Section Index
画面のコンテンツを整理してページ内をすばやく移動できるようにします。
SectionIndexは、画面のコンテンツを整理してすばやく移動できるようにするために使用します。関連するコンテンツは、できる限り隣り合わせにグループ化します。
使用方法
SectionIndexパターンをプレビューにドラッグします。
ページ上にあるすべてのセクションへのリンクが作成されます。リンクの名前は、各セクションの[Title]プレースホルダに含まれるテキストに基づきます。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
IsSmooth | IsSmoothがTrueの場合、リンク先への移動がアニメーション化されます。Falseに設定した場合、即座に移動します。 | Boolean | False | False |
IsFixed | FixedがTrueの場合、SectionIndexは常に画面内の同じ位置に配置されます。Falseに設定した場合、ページコンテンツとともにスクロールします。 | Text | False | True |
TopPosition | SectionIndexを固定するときの上の位置を設定します。数字のみを挿入すると、ピクセル単位が自動的に追加されます。 | Integer | False | なし |
ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
要素 | CSSクラス | 説明 |
---|---|---|
.section-index | .section-index.is--sticky | SectionIndexの位置を固定するかどうかを定義します |
.section-index-item | .section-index-item.is--active | 現在アクティブなリンクを定義します |
高度なユースケース
アクティブ時の色を変更する
-
CSSエディタで以下のCSSを記述し、
yourcolor
を変更します。a.section-index-item.is--active { border-left-color: yourcolor; color: yourcolor; }
-
または、CSS変数を使用します:
var(--color-yourcolor)
.a.section-index-item.is--active { border-left-color: var(--color-yourcolor); color: var(--color-yourcolor); }
RTLとの互換性のため、以下のコードも追加するようにします。
`.is-rtl a.section-index-item.is--active {
border-right-color: yourcolor;
color: yourcolor;
}`
注記
Sectionパターンでは、[Title]プレースホルダを忘れずに使用してください。各SectionIndexリンクのテキストがこれによって定義されます。
デバイスの互換性
Internet Explorerでは、position: fixed
をposition: sticky
の代わりに使用します。後者はサポートされていません。
他のパターンとの互換性
同じ画面内のSectionパターンとのみ連携します。