Tabs.html 2.43 KB
Newer Older
1
<div role="tabpanel">
2
3
4
    <ul class="nav nav-tabs t3js-tabs" role="tablist" id="tabs-{id}" data-store-last-tab="{storeLastActiveTab}">
        <f:for each="{items}" as="item" iteration="iteration">
            <f:if condition="{item.content}">
5
                <li role="presentation" class="t3js-tabmenu-item nav-item">
6
                    <a href="#{id}-{iteration.cycle}" class="nav-link {f:if(condition: '{iteration.cycle} == {defaultTabIndex}', then: ' active')}" title="{item.linkTitle}" aria-controls="{id}-{iteration.cycle}" role="tab" data-bs-toggle="tab">
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
                        <f:if condition="{item.icon}">
                            <f:format.raw>{item.icon}</f:format.raw>
                        </f:if>
                        {item.label}
                        <f:if condition="{item.requiredIcon}">
                            <f:format.raw>{item.requiredIcon}</f:format.raw>
                        </f:if>
                        <f:if condition="{item.stateIcon}">
                            <f:render partial="StateIcon" arguments="{item: item}" />
                        </f:if>
                    </a>
                </li>
            </f:if>
        </f:for>
    </ul>
    <div class="tab-content">
        <f:for each="{items}" as="item" iteration="iteration">
            <f:if condition="{item.content}">
                <div role="tabpanel" class="tab-pane{f:if(condition: '{iteration.cycle} == {defaultTabIndex}', then: ' active')}" id="{id}-{iteration.cycle}">
                    <f:if condition="{item.description}">
                        <div class="panel panel-tab">
                            <div class="panel-body">
                                <p><f:format.nl2br>{item.description}</f:format.nl2br></p>
                            </div>
                        </div>
                    </f:if>
                    <f:if condition="{wrapContent}">
                        <f:then>
                            <div class="panel panel-tab">
                                <div class="panel-body">
                                    <f:format.raw>{item.content}</f:format.raw>
                                </div>
                            </div>
                        </f:then>
                        <f:else>
                            <f:format.raw>{item.content}</f:format.raw>
                        </f:else>
                    </f:if>
                </div>
            </f:if>
        </f:for>
    </div>
49
</div>