Skip to main content

 

 

 

 
Language:

 

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

 

 
 
OutSystems

Separator

Separator UIパターンを使用すると、コンテンツを明確に区切って見やすく整理できます。

Separator UIパターンの使用方法

1.Service StudioのツールボックスでSeparatorを検索します。

Separatorウィジェットが表示されます。

![](<images/separator-5-ss.png>)

1.ツールボックスから、Separatorウィジェットをアプリケーション画面のメインコンテンツ領域のコンテンツを区切りたい場所にドラッグします。この例では、画像とテキストの間にウィジェットをドラッグしています。

![](<images/separator-7-ss.png>)

1.[Properties]タブで関連する(オプションの)プロパティを設定します。たとえば、色やコンテンツを区切るスペースのサイズなどを設定します。

![](<images/separator-8-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
Color(Color Identifier型): オプション 区切り線の色を設定します。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - 灰色(Neutral4)の線を表示します(デフォルト値)。
  • Entities.Color.Red - 赤色の線を表示します。
Space(Space Identifier型): オプション 区切り線の周囲のスペースを設定します。以下の値が事前定義されています。

  • None
  • Extra small
  • Small
  • Base
  • Medium
  • Large
  • Extra large
  • Extra extra large

  • 空白 - 区切り線の周囲に16pxのスペースを表示します(Entities.Space.Base)。これがデフォルト値です。
  • Entities.Space.Large - 区切り線の周囲に32pxのスペースを表示します。
IsVertical(Boolean型): オプション Falseの場合、区切り線は横方向に表示されます(デフォルト)。Trueの場合、区切り線は縦方向に表示されます。
ExtendedClass(Text型): オプション Separator UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるSeparator UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるSeparator UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?