{% extends base %}

{% block body %}

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


{% init tab_html1 = """
<div class="x-tab-box btn-style" 
		data-tab-key="tab_test1" 
		data-tab-default="tab1">
	<span class="x-tab title">Tab名称:</span>
	<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">
	<span class="x-tab title">Tab名称:</span>
	<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">
	<span class="x-tab title">Tab名称:</span>
	<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>""" %}

{% init html6 = """
<div class="x-tab-box border-style" 
		data-tab-key="tab_test6" 
		data-tab-default="tab1">
	<div class="block-title">
		<span>块标题</span>
		<div class="float-right">
			<a onclick="xnote.showCode(this);" data-code-id="html6">[展示代码]</a>
		</div>
	</div>
	<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 html7 = """
<div class="x-tab-box segment-style" 
		data-tab-key="tab_test7" 
		data-tab-default="all">
	<a class="x-tab" data-tab-value="all">全部</a>
	<a class="x-tab" data-tab-value="doing">进行中</a>
	<a class="x-tab" data-tab-value="archived">归档</a>
</div>""" %}

<h3 class="card-title">
	<span>默认tab样式</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html2">展示代码</button>
</h3>
<div class="card">
	<pre id="html2" class="marked-code hide">{{tab_html2}}</pre>
	{% raw tab_html2 %}
</div>

<h3 class="card-title">
	<span>按钮tab</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html1">展示代码</button>
</h3>
<div class="card">
	<pre id="html1" class="marked-code hide">{{tab_html1}}</pre>
	{% raw tab_html1 %}
</div>

<h3 class="card-title">
	<span>按钮tab组</span>
</h3>
<div class="card">	
	{% render tab_group_1 %}
	{% render tab_group_2 %}
</div>

<h3 class="card-title">
	<span>按钮tab表格</span>
</h3>
<div class="card">	
	{% render tab_table %}
</div>

<h3 class="card-title">
	<span>按钮tab（深色模式）</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html3">展示代码</button>
</h3>
<div class="card">
	<pre id="html3" class="marked-code hide">{{html3}}</pre>
	{% raw html3 %}
</div>


<h3 class="card-title">
	<span>下划线tab</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html4">展示代码</button>
</h3>
<div class="card">
	<pre id="html4" class="marked-code hide">{{html4}}</pre>
	{% raw html4 %}
</div>

<h3 class="card-title">
	<span>外边框tab</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html5">展示代码</button>
</h3>
<div class="card">
	<pre id="html5" class="marked-code hide">{{html5}}</pre>
	{% raw html5 %}
</div>

<div class="card">
	<pre id="html6" class="marked-code hide">{{html6}}</pre>
	{% raw html6 %}
</div>

<h3 class="card-title">
	<span>分段选择器 (segment-style)</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html7">展示代码</button>
</h3>
<div class="card">
	<pre id="html7" class="marked-code hide">{{html7}}</pre>
	{% raw html7 %}
	<p class="tip">选中项紫色实心胶囊 + 白字，未选中为透明底深灰字；配合 data-tab-key 由 x-tab.js 按 URL 参数自动高亮。</p>
</div>


{% include examples/page/example_script.html %}


{% end %}