adminlte封装

按钮

{% 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 = '×' %}
    {% 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':'《皇帝的新装》'
    }) }}