Uniwersalne makro: multi_columns(items, cols)

Opublikowano przez

Zawartość pliku z makrem macros.html

{% macro multi_columns(items, cols) %}
    {% set total = items|length %}
    {% set size = (total // cols) + (1 if total % cols > 0 else 0) %}

    <div style="display: flex; gap: 20px;">

        {% for col in range(cols) %}
            <div style="flex: 1;">
                {% set start = col * size %}
                {% set end = start + size %}
                {% for item in items[start:end] %}
                    <div class="row">{{ item }}</div>
                {% endfor %}
            </div>
        {% endfor %}

    </div>
{% endmacro %}

Przykład użycia

{% import "macros.html" as ui %} 
{{ ui.multi_columns(dane, 3) }}

Jeśli elementy to obiekty wystarczy zmienic {{item}} na oczekiwana zawartość np.

<div> 
    <strong>{{ item.nazwa }}</strong> 
    <span>{{ item.opis }}</span> 
    <span>Wartość: {{ item.wartosc }}</span> 
</div>

Opcja zaawansowana

Opcja bardziej zaawansowana pozwalająca na uniwersalna funkcję która może użyć funkcji formatującej item.
Dzięki caller() możesz przekazać własny sposób renderowania elementu.

{% macro multi_columns(items, cols, caller=None) %}
    {% set total = items|length %}
    {% set size = (total // cols) + (1 if total % cols > 0 else 0) %}

    <div style="display: flex; gap: 20px;">

        {% for col in range(cols) %}
            <div style="flex: 1;">
                {% set start = col * size %}
                {% set end = start + size %}
                {% for item in items[start:end] %}
                    {% if caller %}
                        {{ caller(item) }}
                    {% else %}
                        <div class="row">{{ item }}</div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endfor %}

    </div>
{% endmacro %}

Jak używać makra

Proste dane (stringi)

{% import "macros.html" as ui %}
{{ ui.multi_columns(dane, 3) }}

Dane obiektowe (np. nazwa, opis, stan)

{% import "macros.html" as ui %}

{% call(item) ui.multi_columns(dane, 3) %}
    <div class="row">
        <strong>{{ item.nazwa }}</strong><br>
        {{ item.opis }}<br>
        Stan lodowy: {{ item.stan }}
    </div>
{% endcall %}

https://copilot.microsoft.com/chats/gnSGcTQzBLGZVzAuYFkXk