{% extends base %}

{% block body %}

{% include test/component/example_nav.html %}
{% include common/script/load_select2.html %}
{% include test/page/example_script.html %}

{% init select2_html = """
<select style="width: 100px;" data-placeholder="选项">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>

<select id="select2-multiple" style="width: 200px;" data-placeholder="选项" multiple="multiple">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
</select>
""" %}

{% init native_html = """
<select data-disable-select2="true">
    <option disabled selected>模拟placeholder</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>
""" %}

<h3 class="card-title">
	<span>原生组件</span>
    <button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="native_html">展示代码</button>
</h3>
<div class="card" id="native_html">
    {% raw native_html %}
</div>


<h3 class="card-title">
	<span>select2风格</span>
	<button class="btn link-style" onclick="xnote.showCode(this);" data-code-id="select2_html">展示代码</button>
</h3>
<div class="card">
    <div id="select2_html">
        {% raw select2_html %}
    </div>
</div>


{% init html1 = """
<div class="x-dropdown">
    <span class="dropdown-btn btn">左对齐▾</span>
    <div class="dropdown-content">
        <a class="dropdown-option">选项1</a>
        <a class="dropdown-option">选项2</a>
    </div>
</div>

<div class="x-dropdown align-right">
    <span class="dropdown-btn btn">右对齐▾</span>
    <div class="dropdown-content">
        <a class="dropdown-option">选项1</a>
        <a class="dropdown-option">选项2</a>
    </div>
</div>
""" %}

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


{% end %}