Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Separator

コンテンツを明確に分けて見やすく整理します。

Separatorは、コンテンツを明確なグループに分けて見やすく整理するために使用します。

使用方法

縦の区切りを使用するには、親要素の高さが定義されている必要があります。

  1. Separatorパターンをプレビューにドラッグします。

  2. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
Color 色を設定します。 Color Identifier False Entities.Color.Neutral4
Space 区切り線の周囲のスペースを設定します。 Space Identifier False Entities.Space.Base
IsVertical Trueに設定した場合、区切りが縦になります。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.separator .separator-horizontal IsVerticalパラメータがFalseの場合
.separator .separator-vertical IsVerticalパラメータがTrueの場合

高度なユースケース

縦の区切りを使用する

  1. コンテナをプレビューにドラッグします。

  2. 「separator-height」という名前のクラスを作成します。

    css .separator-height { height: 100px; } 1. Separatorパターンをコンテナにドラッグします。

  3. IsVerticalパラメータを[True]に設定します。

  4. パブリッシュしてテストします。

  • Was this article helpful?