Lightningアプリ開発でボタンを表示したいときには、『ui:button』という専用のタグが用意されています。この『ui:button』について少し調べてみました。
uiタグはapexタグと同じで使用時には自動でHTMLタグに変換してくれます。ui:buttonタグがHTMLタグに変換されるときは、buttonタグとspanタグという組み合わせで変換されるみたいです。
また、ui:buttonタグには『default uiBlock uiButton』というクラスが付いているためか、Bootstrap SF1のスタイルは適用されませんでした。
spanタグが付いていますが、buttonタグとして変換されているので、次のようにbuttonに対してのCSSはきちんと適用されました。
ui:buttonタグのクリックイベントを実行するために、press属性が用意されています。これでcontroller.js側の処理を呼び出すことが可能になります。このpress属性ですが、通常のbuttonタグではもちろん使用できません。
Lightningでjs処理を呼び出す場合は、『{!c.myAction}』というように少し特殊な呼び方となるので、もしかするとbuttonタグではクリック時にcontroller.jsの処理を呼び出せないのではないかと思ったりしたのですが、onClickイベントで同じように問題なく実行することができました。
今回検証に使用したサンプルはコチラです。
