Weitere ähnliche Inhalte
Ähnlich wie Lightning componentとlightning design system (20)
Kürzlich hochgeladen (11)
Lightning componentとlightning design system
- 3. 自己紹介
• 岩井 法子
• 株式会社アピリオ
• SFDCの開発とか色々
• SFDC歴3ヶ月
• それまでは
l JavaとかC#とか・・・
l jQueryとかBackbone.jsとかNode.jsとか・・・
3
資格制度変わっちゃいましたが
- 5. Lightning Componentに対する自分の理解
5
• クライアント - サーバのWebアプリケーションを開発する
ためのフレームワーク
• クライアントサイドはHTML + JavaScript(Auraフレーム
ワーク)、サーバサイドはApex
• シングルページアプリケーション(SPA)の開発に特化
• コンポーネント同士を組み合わせて階層的に利用すること
が可能
• Lightning Design SystemはSalesforce Lightningの外観
に合わせたカスタムCSS、アイコン、ベストプラクティス
のガイドなどのUI補助ツール集
- 9. Lightning Design Systemの実際
9
• 少ない工数でリッチなUIがすぐに作れる。
show: function(component, event, helper) {
var element = component.get(‘modal’).getElement();
$A.util.toggleClass(element, 'slds-show');
$A.util.toggleClass(element, 'slds-hide');
}
<!-- Modal -->
<div aura:id=“modal”
class="slds-hide”>
…
</div>
CONTROLLER
COMPONENT
→ CSSだけならまだしも動きまで表現するとなると要自作
- 10. Lightning Design Systemの実際
10
• モダンなアニメーション効果を手軽に実現できる。
.THIS .transition-font-size {
-webkit-transition: 0.2s font-size linear;
transition: 0.2s font-size linear;
}
.THIS .transition-font-size.on {
font-size: 1.5em;
}
<li class=“transition-font-size"
onclick="{!c.selectMemberType}"
onmouseover="{!c.toggleFontSize}"
onmouseout="{!c.toggleFontSize}">
…
</li>
STYLE
COMPONENT
→ LightningのフレームワークではなくCSS3で要自作