{% 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>


{% init tab_python_code = """from xnote.plugin import TabBox

tab_box = TabBox(tab_key="tab_default_hide", tab_default="normal", css_class="btn-style")
tab_box.add_item(title="常规Tab", value="normal")
# 默认隐藏: 只有 tab_default_hide=secret 命中时才展示出来
tab_box.add_item(title="隐藏Tab", value="secret", default_hide=True)""" %}

<h3 class="card-title">
	<span>默认隐藏的tab (default_hide)</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="pycode1">展示代码</button>
</h3>
<div class="card">
	<pre id="pycode1" class="marked-code hide">{{tab_python_code}}</pre>
	{% render tab_default_hide %}
	<p class="tip">「隐藏Tab」默认不展示，只有当 <code>tab_default_hide</code> 的值命中它的 <code>value</code>（这里是 <code>secret</code>）时才会显示并高亮；命中条件由 URL 参数决定。</p>
	<p>
		<a class="btn" href="/examples/tab?tab_default_hide=secret">跳转到隐藏Tab</a>
		<a class="btn" href="/examples/tab">回到常规Tab</a>
	</p>
</div>

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


{% end %}