Lightningコンポーネント(標準コンポーネント)

####ボタン
```html
<lightning:button variant="neutral" 
 onclick="{!c.closeDialog}">キャンセル</lightning:button>
<lightning:button aura:id="addButton" variant="brand" 
 onclick="{!c.saveData}" disabled="{!v.isShowSaveButton ? '' : 'true'}">保管</lightning:button>
```
[Lightning:button](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_button.htm)
[LDS button(CSSの説明)](https://www.lightningdesignsystem.com/components/buttons/)
<img width="114" alt="Screen Shot 2017-02-13 at 15.06.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/d900db9f-a8af-6153-8929-8b417ae17ce2.png"> variant="neutral"
<img width="76" alt="Screen Shot 2017-02-13 at 15.08.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/5c926bc5-1f5e-708c-bcc8-dee2f0941f4a.png"> variant="brand"
<img width="68" alt="Screen Shot 2017-02-13 at 15.11.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/0b8f5773-88de-4efb-8cdc-8b0ba78a5130.png"> variant="destructive"

####テキストボックス
```html
<ui:inputText value="{!v.value}" maxlength="10" size="10"
   change="{!c.valueChanged}" aura:id="inputData" />
```
```java
valueChanged : function(cmp, event, helper){
    var newValue = event.getSource().get("v.value");
    ....
}
```

[ui:inputText](https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/aura_compref_ui_inputText.htm)

####テキストエリア
```html 
//rowsのデフォルトは2
<ui:inputTextArea value="{!file.Description}" rows="5"/>
```

[ui:inputTextarea](https://developer.salesforce.com/docs/atlas.ja-jp.206.0.lightning.meta/lightning/aura_compref_ui_inputTextArea.htm)
####チェックボックス
```html 
//コンポーネントを使用
<ui:inputCheckbox label="重要" click="{!c.update}" text="任意の属性値"/>

//plain htmlを使用
<input aura:id="checkbox" type="checkbox" 
 class=" uiInput uiInputCheckbox uiInput--default uiInput--checkbox" 
 data-id="{!xxx}" />
```
<img width="30" alt="Screen Shot 2017-02-16 at 11.26.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/baf4c55a-3793-a6c2-1418-4fb25dc93675.png"><img width="30" alt="Screen Shot 2017-02-16 at 11.26.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/4396e404-f645-af9e-a81a-4277a46a47ae.png">

[ui:inputCheckbox](https://developer.salesforce.com/docs/atlas.ja-jp.206.0.lightning.meta/lightning/aura_compref_ui_inputCheckbox.htm)

#####>コントローラでの値の取得
```java 
//aura:idをキーに全てのコンポーネントを取得
var cboxes = cmp.find('checkbox');

//ui:inputBoxでの値の取得
for(var i=0; i<cboxes.length; i++){
    if (cboxes[i].get('v.value')){ //チェック時はtrueになる
        var id = cboxes[i].get('v.text'); //text属性の値
        ....
    }
}

//input type="checkbox"での取得
for(var i=0; i<cboxes.length; i++){
    if (cboxes[i].getElement().checked){
        var id = cboxes[i].getElement().dataset.id;
        ....
    }
}
```

####イメージの表示

```html
<lightning:icon iconName="standard:task" size="xx-small"/>`

 #iconNameの例
  action:apex
  custom:custom5
  doctype:csv
  standard:apps
  utility:upload
#size
  xx-small、x-small、medium、large 
```

[アイコン一覧](https://www.lightningdesignsystem.com/icons/)
[lightning:icon](https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/aura_compref_lightning_icon.htm)

####パス
単なるPicklist項目をパス形式で表示する。パス設定している項目をを表示するには[lightning:path](https://developer.salesforce.com/docs/component-library/bundle/lightning:path/documentation) コンポーネントを使用する。

```html
<lightning:picklistPath aura:id="picklistPath" 
  recordId="{!v.invoiceDirectionId}"
  variant="linear"
  picklistFieldApiName="Status__c">
</lightning:picklistPath>
```
[Lightning:picklistPath](https://developer.salesforce.com/docs/component-library/bundle/lightning:picklistPath/documentation)

####パスコンポーネント
<img width="1103" alt="Screen Shot 2018-10-05 at 19.11.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/ac71b0cf-30d1-7df5-e08d-a25ebf9a3251.png">

####force:recordEdit
標準のレイアウトを使った編集画面を表示するコンポーネント。

```html
<aura:If isTrue="{! v.newRecordId!=null}">
  <force:recordEdit aura:id="NewOutsourceWork" recordId="{! v.newRecordId}"/>
</aura:If>
```

```javascript
/*
 * handler: '保管' button is clicked.
 */
onSaveData: function(cmp, event, helper) {
    cmp.find("NewOutsourceWork").get("e.recordSave").fire();  
},

/*
 * Fired after successfully updating the record.
 */
onRecordSaveSuccess : function(cmp, event, helper) {
    event.stopPropagation();
    $A.get('e.force:refreshView').fire(); //refresh
    cmp.set('v.newRecordId', null);
    helper.common.closeModalDialog(cmp);
},

```
####spinner
処理実行中にくるくる回るスピナーを画面トップに表示

```html
<div style="position:relative">
  <lightning:spinner aura:id="lspinner2" class="slds-hide" variant="brand" size="medium" />
・・・・
</div>
<!-- position:relative の中にspinnerをコンポーネントを含めるのがミソ -->
```

```javascript
//spinner on
var spinner = cmp.find("lspinner");
$A.util.removeClass(spinner, "slds-hide");

//spinner off
var spinner = cmp.find("lspinner2");
$A.util.addClass(spinner, "slds-hide");
```
[lightning:spinner](https://developer.salesforce.com/docs/component-library/bundle/lightning:spinner/example)

####unescape
HTMLタグをエスケープせずに表示するには aura:unescapedHtml を利用

```html
{!v.dispValue} 
 => 1<br/>2
<aura:unescapedHtml value="{!v.dispValue}" />
 => 1
    2
```

####背景のスクロール防止
カスタムダイアログボックスを表示した時に、マウスホイールで背景画像がスクロールしないようにするコード。

```javascript
ダイアログの表示の時に指定

//背景のHTML要素がスクロールしないようにする
document.body.style.overflow = 'hidden';

ダイアログボックスのクローズの時に指定

//背景のHTML要素をスクロールできるようにする
document.body.style.overflow = null;

```