Recap Card Base: Charts

No notes defined.

<div class="sds-recapCard sds-box -insetLg sds-stackLg">
    <nav>
        <ul class="sds-toggleTab list-unstyled nav" id="" role="tablist">

            <li class="nav-item" role="presentation">
                <button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive active" id="sidebar-bar-chart-1-tab" data-toggle="tab" data-target="#sidebar-bar-chart-1" role="tab" aria-controls="sidebar-bar-chart-1" aria-selected="true">

                    <span class="sds-btn__text">Débit/Crédit</span>

                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn" id="sidebar-bar-chart-2-tab" data-toggle="tab" data-target="#sidebar-line-chart-1" role="tab" aria-controls="sidebar-line-chart-1" aria-selected="false">

                    <span class="sds-btn__text">Evolution</span>

                </button>
            </li>

            </li>
        </ul>
    </nav>
    <div class="tab-content" id="sidebar-bar-charts">
        <div class="tab-pane fade show active" id="sidebar-bar-chart-1" role="tabpanel" aria-labelledby="sidebar-bar-chart-1-tab">
            <div><img class="img-fluid" src="../../media/snet/components/toggle-tab/bar-chart.png" alt=""></div>
        </div>
        <div class="tab-pane fade" id="sidebar-line-chart-1" role="tabpanel" aria-labelledby="sidebar-bar-chart-2-tab">
            <div>line chart pane</div>
        </div>
    </div>
</div>
 
<div class="{{ namespace }}recapCard {{ namespace }}box -insetLg {{ namespace }}stackLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@toggle-tab--tabs",recapCardtoggleTabOptions,true %}
	<div class="tab-content" id="sidebar-bar-charts">
		<div class="tab-pane fade show active" id="{{ recapCardtoggleTabOptions.toggleTabItems[0].target }}" role="tabpanel" aria-labelledby="{{ recapCardtoggleTabOptions.toggleTabItems[0].id }}">
			<div><img class="img-fluid" src="{{ (mediaPath + "/snet/components/toggle-tab/bar-chart.png") | path }}" alt=""></div>
		</div>
		<div class="tab-pane fade" id="{{ recapCardtoggleTabOptions.toggleTabItems[1].target }}" role="tabpanel" aria-labelledby="{{ recapCardtoggleTabOptions.toggleTabItems[1].id }}">
			<div>line chart pane</div>
		</div>
	</div>
</div>