# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/banner-regua.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.