# Label

本来のLabelの多くは、HTMLのフォーム要素を説明するために使われます。例えば、主に `<input>` や `<select>` などの入力欄に対してキャプションを付ける役割です。

Dashcombが提供しているInputやSelectなどのコンポーネントは通常のLabelを内蔵しているため、これらのコンポーネントのためにLabel コンポーネントを追加する必要がありません。Label コンポーネントはこれらの機能をベースにしつつ、複数の要素の説明、画面の注意書きやエリアのコメントなどとしても、より自由に使えるラベルとなっています。

### プロパティ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-7e93fbdf521e98011bea7a8972a8eba2ed5a2c84%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%A9%E3%83%99%E3%83%AB.png?alt=media" alt=""><figcaption></figcaption></figure>

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

#### **オブジェクト**

ラベルオブジェクトの変数名です。Labelコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `label1`、`label2`... と名付けられます。

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

（例）`{{label1.hidden}}` で `label1` の表示状態の真偽値を取得することができます。

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

#### 非表示

トグルスイッチをONにすると、ラベルが非表示になります。

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

#### 無効

トグルスイッチをONにすると、ラベルが無効になり、入力できなくなります。

通常のhtmlのlabel要素のdisabled属性に該当します。

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

***

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

#### ラベル文字

ラベルに表示するテキストです。Label コンポーネントをドラッグ＆ドロップすると、自動的に `Label` に設定されます。

`Label` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。

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

### &#x20;<a href="#appearance" id="appearance"></a>

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

#### サイズ

ラベルテキストの表示サイズを選択します。S、M、L の3つから選択できます。

#### 太字

トグルスイッチをONにすると、ラベルテキストを太字で表示します。

#### 斜体

トグルスイッチをONにすると、ラベルテキストを斜体で表示します。

#### ラベル整列

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