Lightning コンポーネント開発者ガイド
jマークアップの動的な表示または非表示
マークアップの表示を切り替えるときは CSS を使用します。<aura:if> または <aura:renderIf> タグを使用することもできますが、より標準的なアプローチである CSS の使用をお勧めします。
次の例では、$A.util.toggleClass(element, 'class') を使用してマークアップの表示を切り替えます。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:toggleCss-->
18<aura:component>
19 <ui:button label="Toggle" press="{!c.toggle}"/>
20 <p aura:id="text">Now you see me</p>
21</aura:component>1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/*toggleCssController.js*/
18({
19 toggle : function(component, event, helper) {
20 var toggleText = component.find("text");
21 $A.util.toggleClass(toggleText, "toggle");
22 }
23})1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/*toggleCss.css*/
18.THIS.toggle {
19 display: none;
20}[切り替え] ボタンをクリックすると、CSS クラスが切り替えられ、テキストが表示または非表示になります。