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

Separator

Last updated
Save as PDF

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

Separator UIパターンの使用方法

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

Separatorウィジェットが表示されます。
ツールボックスから、Separatorウィジェットをアプリケーション画面のメインコンテンツ領域のコンテンツを区切りたい場所にドラッグします。この例では、画像とテキストの間にウィジェットをドラッグしています。
［Properties］タブで関連する（オプションの）プロパティを設定します。たとえば、色やコンテンツを区切るスペースのサイズなどを設定します。

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

プロパティ

プロパティ	説明
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_というスタイルを追加します。