# Banner Régua Utilizado para exibir algumas informações sobre a loja.

Exemplo de exibição do banner régua

Snippet para criar o banner régua. {% tabs %} {% tab title="settings.html" %} 
{#
# Banner regua - arquivo de configuração do painel
# configs/settings.html
#}

<div class="tab-show">
    <div class="title-col">R&eacute;gua fio</div>
    <div class="msg">Edite os &iacute;cones e textos da r&eacute;gua fio de acordo com as suas necessidades.</div>
    <div class="box-section">
        <div class="title flex justify-between align-center">
            <span>Exibir R&eacute;gua Fio </span>
            <label class="check-drag">
                <input type="checkbox" name="regua_fio" value="1">
                <span class="icon"></span>
            </label>
        </div>
    </div>
    <div class="list-position large">
        <ul class="drag-list banner-info not-hidden">
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_1_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_1">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_1">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_1">
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_2_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_2">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_2">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_2">
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_3_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_3">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_3">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_3">
                        </label>
                    </div>
                </div>
            </li>
            <li>
                <div class="banner">
                    <div class="bar">
                        <input type="hidden" name="icon_4_position">
                        <div class="text"></div>
                        <div class="box-file">
                            <div class="input-group file">
                                <div class="area-file">
                                    <input type="file" class="form-control" accept="image/*" name="linha_fio_icon_4">
                                    <div class="show-upload"></div>
                                </div>
                                <a class="remove-img"></a>
                            </div>
                        </div>
                        <label class="input-area">
                            <span class="name">T&iacute;tulo principal</span>
                            <input type="text" placeholder="Digite o t&iacute;tulo" class="encode-characters">
                            <input type="hidden" name="linha_fio_title_4">
                        </label>
                        <label class="input-area">
                            <span class="name">Texto secund&aacute;rio</span>
                            <input type="text" placeholder="Digite o texto secund&aacute;rio" class="encode-characters">
                            <input type="hidden" name="linha_fio_description_4">
                        </label>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
{% endtab %} {% tab title="banner-line.html" %} ```html {# # Banner regua # elements/snippets/banner-line.html #} {% set listInfo = [] %} {% for i in 1..4 %} {% set position = attribute(settings, 'icon_'~i~'_position') %} {% set title = attribute(settings, 'linha_fio_title_'~i) %} {% set img = attribute(settings, 'linha_fio_icon_'~i) %} {% set description = attribute(settings, 'linha_fio_description_'~i) %} {% if title %} {% set listInfo = listInfo|merge([{ "position": position, "title": title, "img": img, "description": description }]) %} {% endif %} {% endfor %} ``` {% endtab %} {% tab title="CSS" %} ```css .banner-info .line { height: 52px; margin: 24px 0; display: flex; align-items: center; justify-content: center; } .banner-info .text { font-size: .75rem; line-height: 1.43; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .banner-info .text .featured { font-weight: 700; font-size: .875rem; display: block; } .banner-info .line .icon { max-width: 60px; max-height: 42px; margin-right: 20px } ``` {% endtab %} {% endtabs %} OBS: o exemplo acima permite a criação de 4 itens, caso queira exibir mais ou menos, sera necessário alteração. ### Como usar Copie o código **settings.html** acima e cole os itens dentro do arquivo `settings.html` que se encontra na pasta configs: `configs/settings.html` Copie o código **banner-line.html** acima e crie um arquivo separado, exemplo: \ `elements/snippets/banner-line.html` Faça a chamada desse arquivo onde desejar: ```twig {% element('snippets/banner-line') %} ``` Copie o código CSS e cole em sua folha de estilo.