Community

Applies only to Traditional Web Apps

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クラス	説明
.section-index	.section-index.is--sticky	SectionIndexの位置を固定するかどうかを定義します
.section-index-item	.section-index-item.is--active	現在アクティブなリンクを定義します

1.CSSエディタで以下のCSSを記述し、yourcolorを変更します。

`a.section-index-item.is--active {
    border-left-color: yourcolor;
    color: yourcolor;
}`

1.または、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パターンとのみ連携します。