# Divider

Dividerは主に画面デザインの際に使う区切り用のコンポーネントです。Dashcombが提供しているDividerは、区切り用以外に、管理画面の用途に合わせて、レベル文字の設定などもできます。

## プロパティ

Dividerコンポーネントには、以下のプロパティが含まれています。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-be09c499fd1068bda6380533c6664ac5be9bb9a0%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%83%87%E3%82%A3%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC.png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

**オブジェクト**

ディバイダーオブジェクトの変数名です。Dividerをドラッグ＆ドロップすると、そのオブジェクトが自動的に `divider1`、`divider2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{divider1.label}}` で `divider1` のラベルを取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

トグルスイッチをONにすると、ディバイダーが非表示になります。

現在の設定値は、`{{オブジェクト名.readonly}}` で参照できます。

### データ <a href="#data" id="data"></a>

#### ラベル文字

ディバイダーのラベルテキストです。画面を開いた時点で、初期値は空文字列（""）です。

（例）オブジェクト `divider1` のラベル文字に `Dashcombはとても便利なツールです。` を入力します。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）オブジェクト `divider2` のラベル文字に`{{currentUser.name}}` を入力すると、ログイン中のユーザーの名前が表示されます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% endhint %}

### 外観 <a href="#appearance" id="appearance"></a>

**ラベル整列**

ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。