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］に設定します。
-
パブリッシュしてテストします。
