Salesforce技術ブログ(【Winter'17】新しく追加された『Lightning 基本コンポーネント』12種類に触れてみた。)

Salesforce技術ブログ(【Winter'17】新しく追加された『Lightning 基本コンポーネント』12種類に触れてみた。)

Salesforce技術ブログ(【Winter'17】新しく追加された『Lightning 基本コンポーネント』12種類に触れてみた。)


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

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

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


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


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

robot

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

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



■ lightning:badge
robot
<lightning:badge label="99" />

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



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

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



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

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



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

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



■ lightning:buttonMenu
robot
<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
robot
<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
robot
<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
robot
<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
robot
<lightning:spinner variant="brand" size="large"/>

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



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

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



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

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

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

简体中文English日本語한국어
翻訳