{% extends base %}

{% block body %}

	{% include test/component/example_nav.html %}


{% init tab_html1 = """
<div class="x-tab-box btn-style" 
		data-tab-key="tab_test1" 
		data-tab-default="tab1">
	<a class="x-tab" data-tab-value="tab1">TAB1</a>
	<a class="x-tab" data-tab-value="tab2">TAB2</a>
	<a class="x-tab" data-tab-value="tab3">TAB3</a>
</div>""" %}

{% init tab_html2 = """
<div class="x-tab-box" 
		data-key="tab_test2" 
		data-tab-default="tab1">
	<a class="x-tab" data-tab-value="tab1">TAB1</a>
	<a class="x-tab" data-tab-value="tab2">TAB2</a>
	<a class="x-tab" data-tab-value="tab3">TAB3</a>
</div>""" %}

{% init html3 = """
<div class="x-tab-box btn-style dark" 
		data-tab-key="tab_test3" 
		data-tab-default="tab1">
	<a class="x-tab" data-tab-value="tab1">TAB1</a>
	<a class="x-tab" data-tab-value="tab2">TAB2</a>
	<a class="x-tab" data-tab-value="tab3">TAB3</a>
</div>""" %}


{% init html4 = """
<div class="x-tab-box underline-style" 
		data-tab-key="tab_test4" 
		data-tab-default="tab1">
	<a class="x-tab" data-tab-value="tab1">TAB1</a>
	<a class="x-tab" data-tab-value="tab2">TAB2</a>
	<a class="x-tab" data-tab-value="tab3">TAB3</a>
</div>""" %}

{% init html5 = """
<div class="x-tab-box border-style" 
		data-tab-key="tab_test5" 
		data-tab-default="tab1">
	<a class="x-tab" data-tab-value="tab1">TAB1</a>
	<a class="x-tab" data-tab-value="tab2">TAB2</a>
	<a class="x-tab" data-tab-value="tab3">TAB3</a>
</div>""" %}


<div class="card">
	<p>按钮tab</p>
	<pre class="marked-code">{{tab_html1}}</pre>
	{% raw tab_html1 %}
</div>


<div class="card">
	<p>链接tab</p>
	<pre class="marked-code">{{tab_html2}}</pre>
	{% raw tab_html2 %}
</div>

<div class="card">
	<p>按钮tab（深色模式）</p>
	<pre class="marked-code">{{html3}}</pre>
	{% raw html3 %}
</div>

<div class="card">
	<p>下划线tab</p>
	<pre class="marked-code">{{html4}}</pre>
	{% raw html4 %}
</div>

<div class="card">
	<p>外边框tab</p>
	<pre class="marked-code">{{html5}}</pre>
	{% raw html5 %}
</div>

{% end %}