{% extends base %}

{% block body %}

	{% include test/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 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 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 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>

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

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

{% end %}