按钮
{% macro button(data) %}
{% if data['style'] == 'gradient' %}
{% set style_mark = 'bg-gradient-' %}
{% elif data['style'] == 'outline' %}
{% set style_mark = 'btn-outline-' %}
{% elif data['style'] == 'default' or data['style'] == '' %}
{% set style_mark = 'btn-' %}
{% endif %}
{% if data['flat'] == 'true' %}
{% set flat_mark = 'btn-flat' %}
{% endif %}
{% if data['block'] == 'true' %}
{% set block_mark = 'btn-block' %}
{% endif %}
{% if data['disable'] == 'true' %}
{% set disable_mark = 'disabled' %}
{% endif %}
<button id="{{ data['id'] }} {{ disabled_mark }}" type="{{ data['type'] }}" class="btn btn-{{ data['size'] }} {{ style_mark }}{{ data['color'] }} {{ flat_mark }} {{ block_mark }} {{ disable_mark }} {{ data['other'] }}">{{ data['name'] }}</button>
{% endmacro %}
{{ button({
'id':'sendmsg',
'type':'button',
'name':'内容',
'style':'outline',
'size':'lg',
'color':'info',
'block':'true',
'flat':'true',
'disable':'false',
'other':''
}) }}
style: default, gradient, outline
size: default, lg, sm, xs,
color: default, primary, success, info, warning, danger
other: something other describe
进度条
{% macro progressBar(data) %}
{% set value_mark = 'width' %}
{% if data['vertical'] == 'true' %}
{% set vertical_mark = 'vertical' %}
{% set value_mark = 'height' %}
{% endif %}
{% if data['striped'] == 'true' %}
{% set striped_mark = 'progress-bar-striped' %}
{% endif %}
<div class="progress progress-{{ data['size'] }} {{ vertical_mark }}">
<div id="{{ data['id'] }}" class="progress-bar bg-{{ data['color'] }} {{ striped_mark }}" role="progressbar" aria-valuenow="{{ value }}"
aria-valuemin="0" aria-valuemax="100" style="{{ value_mark }}: {{ data['value'] }}%" {{ data['other'] }}>
<span class="sr-only">{{ data['desc'] }}</span>
</div>
</div>
{% endmacro %}
{{ progressBar({
'id':'pbar',
'value':'10',
'size':'xs',
'color':'info',
'striped':'false',
'desc':'hello',
'vertical':'true',
}) }}
size: '', default, sm, xs, xxs
color: '', 'primary', 'info', 'success', 'warning', 'danger'
警告框
{% macro warningFrame(data) %}
{% if data['closed'] == 'true' %}
{% set close_mark1 = 'alert-dismissible' %}
{% set close_mark2 = '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' %}
{% endif %}
<div class="alert alert-{{ data['color'] }} {{ close_mark1 }}">
{{ close_mark2|safe }}
<h{{data['title_size'] }}><i class="{{ data['icon'] }}"></i>{{ data['title'] }}</h{{ data['title_size'] }}>
{{ data['content'] }}
</div>
{% endmacro %}
{{ warningBox({
'title':'警告!',
'title_size':'5',
'content':'发送了一个error',
'closed':'true',
'color':'warning',
'icon':'icon fas fa-info'
}) }}
标注框
{% macro markFrame(data) %}
<div id="{{ data['id'] }}" class="callout callout-{{ data['color'] }}">
<h{{ data['title_size'] }}>{{ data['title'] }}</h{{ data['title_size'] }}>
<p>{{ data['content'] }}</p>
</div>
{% endmacro %}
{{ markFrame({
'id':'mark1',
'title':'通知',
'title_size':'5',
'content':'123',
'color':'info',
}) }}
轮播图
{% macro turnPlayer(urls,index) %}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for url in urls %}
{% if loop.index == index %}
{% set active_mark = 'active' %}
{% endif %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index0 }}" class="{{ active_mark }}"></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for url in urls %}
{% if loop.index == index %}
{% set active_mark = 'active' %}
{% endif %}
<div class="carousel-item {{ active_mark }}">
<img class="d-block w-100" src="{{ url }}" alt="第{{ loop.index }}张幻灯片">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
{% endmacro %}
{{ turnPlayer(['https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3401628512,3829073026&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2345885190,3997397978&fm=26&gp=0.jpg'],1) }}
图标
{% macro icon(name) %}
<i class="{{ name }}"></i>
{% endmacro %}
{{ icon('fa fa-star') }}
滚动按钮
{% macro scrollButton(color,icon) %}
{% if not icon %}
{% set icon = 'fas fa-chevron-up' %}
{% endif %}
<a id="back-to-top" href="#" class="btn btn-{{ color }} back-to-top" role="button" aria-label="Scroll to top">
<i class="{{ icon }}"></i>
</a>
{% endmacro %}
{{ scrollButton('info','fa fa-star') }}
引用
{% macro quote(data) %}
<blockquote class="quote-{{ data['color'] }}">
<p>{{ data['content'] }}</p>
<small>{{ data['prior'] }} <cite title="{{ data['rear'] }}">{{ data['rear'] }}</cite></small>
</blockquote>
{% endmacro %}
{{ quote({
'color':'info',
'content':'惠风和煦',
'prior':'来自',
'rear':'《皇帝的新装》'
}) }}