Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

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 現在アクティブなリンクを定義します

高度なユースケース

アクティブ時の色を変更する

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

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

  2. または、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: fixedposition: stickyの代わりに使用します。後者はサポートされていません。

他のパターンとの互換性

同じ画面内のSectionパターンとのみ連携します。

  • Was this article helpful?