{% extends base %}

{% block body %}

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

{% init html1 = """
<div class="row margin-top-sm">
    <span class="tag">默认标签</span>
    <span class="tag info">info标签</span>
    <span class="tag orange">orange标签</span>
    <span class="tag lightgray">lightgray标签</span>
    <span class="tag lightblue">lightblue标签</span>
    <span class="tag red">red标签</span>
    <span class="tag lightred">lightred标签</span>
    <span class="tag lightpurple">lightpurple标签</span>
    <span class="tag grayblue">grayblue标签</span>
    <span class="tag system">system标签</span>
    <span class="tag pill">pill标签</span>
</div>
""" %}

{% init html2 = """
<div class="row margin-top-sm">
    <a class="tag">默认标签</a>
    <a class="tag info">info标签</a>
    <a class="tag orange">orange标签</a>
    <a class="tag lightgray">lightgray标签</a>
    <a class="tag lightblue">lightblue标签</a>
    <a class="tag red">red标签</a>
    <a class="tag lightred">lightred标签</a>
    <a class="tag lightpurple">lightpurple标签</a>
    <a class="tag grayblue">grayblue标签</a>
    <a class="tag system">system标签</a>
    <a class="tag pill">pill标签</a>
</div>
""" %}

{% init html3 = """
<div class="row margin-top-sm">
    <a class="tag large">默认标签</a>
    <a class="tag info large">info标签</a>
    <a class="tag orange large">orange标签</a>
    <a class="tag lightgray large">lightgray标签</a>
    <a class="tag lightblue large">lightblue标签</a>
    <a class="tag red large">red标签</a>
    <a class="tag lightred large">lightred标签</a>
    <a class="tag lightpurple large">lightpurple标签</a>
    <a class="tag grayblue large">grayblue标签</a>
    <a class="tag system large">system标签</a>
    <a class="tag pill large">pill标签</a>
</div>
""" %}

{% init html4 = """
<div class="row margin-top-sm">
    <span class="tag-span">
        <a>tag1</a>
        <span>2</span>
    </span>
    <span class="tag-span">
        <a>tag2</a>
        <span>10</span>
    </span>
</div>
""" %}

<h3 class="card-title">
    <span>span标签</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">{{html1}}</pre>
	{% raw html1 %}
</div>

<h3 class="card-title">
    <span>a标签</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">{{html2}}</pre>
	{% raw html2 %}
</div>

<h3 class="card-title">
    <span>大标签</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>

{% init html5 = """
<div class="tag-select segment-style" data-multiple="false">
    <input type="hidden" name="status" value="doing">
    <span class="tag active" data-value="all">全部</span>
    <span class="tag" data-value="doing">进行中</span>
    <span class="tag" data-value="archived">归档</span>
</div>
""" %}

{% init html6 = """
<div class="tag-select segment-style" data-multiple="true">
    <input type="hidden" name="tags" value="python,web">
    <span class="tag active" data-value="python">Python</span>
    <span class="tag active" data-value="web">Web</span>
    <span class="tag" data-value="db">数据库</span>
</div>
""" %}

<h3 class="card-title">
    <span>tag-span</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>分段选择器（单选）</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 class="row">
		<span class="tag lightgray">用法：TagSelect(segment=True)</span>
		<span class="tag lightgray">与 tab 的 segment-style 同一套视觉</span>
	</div>
</div>

<h3 class="card-title">
    <span>分段选择器（多选）</span>
    <button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="html6">展示代码</button>
</h3>
<div class="card">
	<pre id="html6" class="marked-code hide">{{html6}}</pre>
	{% raw html6 %}
	<div class="row">
		<span class="tag lightgray">用法：TagSelect(segment=True, multiple=True)</span>
		<span class="tag lightgray">选中值以逗号分隔写入隐藏域</span>
	</div>
</div>

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

{% end %}