どうも、ハムスター森です🐹

プログラミングの調べ物をしていたら、
タイなどでは仏暦という紀年法が用いられていることを知りました…

システム開発に携わっていると、閏年とか標準時とか日時にやたら敏感になるあるある。

今日は、Lightning 基本コンポーネントのお話。

さて、Winter’17にアップデートして久しいですが、
Winter’17では、『Lightning 基本コンポーネント』がリリースされていることをご存じでしょうか。

Lightning 基本コンポーネントは、Lightning Design System(以下、LDS)のスタイルも含んでいて、
以前のuiコンポーネントよりも扱いやすくなっている印象です。

今回は、追加された Lightning 基本コンポーネント を1つずつ確認していきたいと思います。
※Winter’17時点でベータ版のものは除きました。

---

■ lightning:badge

<lightning:badge label="99" />

　件数などを表示するためのバッジ。

■ lightning:button

<lightning:button label="Download" iconName="utility:download" />

　ボタンです。
　ラベルと併用して、LDSで提供されているユーティリティアイコンを利用可。

■ lightning:buttonIcon

<lightning:buttonIcon iconName="utility:chat" />

　ラベルの無いボタン(アイコンのみ)の場合はこちらを利用。

■ lightning:buttonGroup

<lightning:buttonGroup>
    <lightning:button label="Edit" />
    <lightning:button label="Save" />
</lightning:buttonGroup>

　ボタンを横並びにグループ化できます。
　LEX風味が強くなるやつです。

■ lightning:buttonMenu

<lightning:buttonMenu alternativeText="Menu">
    <lightning:menuItem label="Menu 1" value="1" />
    <lightning:menuItem label="Menu 2" value="2" />
    <lightning:menuItem label="Menu 3" value="3" />
</lightning:buttonMenu>

　ボタンからドロップダウンのリストを表示できます。

■ lightning:card

<lightning:card>
    <aura:set attribute="title">
        <lightning:badge label="NEW!"/>
    </aura:set>
    <aura:set attribute="actions">
        <lightning:button label="Edit"/>
    </aura:set>
    <p class="slds-p-horizontal--small">
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
    </p>
</lightning:card>

　レスポンシブルで定番の、カード形式のコンポーネントを実装できます。
　スマートフォンでの検索結果はカードが綺麗ですよね。

■ lighting:icon

<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>

　アイコン。
　LDSで提供されているアクションアイコンが利用できます。

■ lightning:layout
■ lightning:layoutItem

<lightning:layout horizontalAlign="space">
      <lightning:layoutItem flexibility="auto" padding="around-small">
          1
      </lightning:layoutItem>
      <lightning:layoutItem flexibility="auto" padding="around-small">
          2
      </lightning:layoutItem>
      <lightning:layoutItem flexibility="auto" padding="around-small">
          3
      </lightning:layoutItem>
      <lightning:layoutItem flexibility="auto" padding="around-small">
          4
      </lightning:layoutItem>
  </lightning:layout>

　グリッドレイアウトを実現するためのコンポーネントで、
　layoutが親要素となるコンテナ、layoutItemが子要素となるアイテムです。

■ lightning:select

<lightning:select name="select1" label="Select an item">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
</lightning:select>

　プルダウンリスト。
　labelの要素は別途の用意が不要で、とても便利。

■ lightning:spinner

<lightning:spinner variant="brand" size="large"/>

　ローディング用のスピナー。
　LDSだと、コチラの3種類。頑張ってくれてる感は薄いですが、おしゃれです。

■ lightning:textarea

<lightning:textarea name="myTextArea" value="initial value" 
    label="What are you thinking about?" maxlength="300" />

　テキストエリア。
　こちらもlabelの要素は用意不要です。

以上、だだっと12種類を確認してきました。

グリッドレイアウトに出来たり、お洒落なパーツが使えたり、
基本と言いつつも必要十分な機能が提供されていました！

より一層、Lightningコンポーネント開発が盛り上がりそうです。