Separator
コンテンツを明確に分けて見やすく整理します。
Separatorは、コンテンツを明確なグループに分けて見やすく整理するために使用します。
使用方法
縦の区切りを使用するには、親要素の高さが定義されている必要があります。
-
Separatorパターンをプレビューにドラッグします。
-
パブリッシュしてテストします。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
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の場合 |
高度なユースケース
縦の区切りを使用する
-
コンテナをプレビューにドラッグします。
-
「separator-height」という名前のクラスを作成します。
css .separator-height { height: 100px; }
1. Separatorパターンをコンテナにドラッグします。 -
IsVerticalパラメータを[True]に設定します。
-
パブリッシュしてテストします。