LizardByte.github.io/_includes/tabs.html at 8e012e25652c5529b26501c4fcf09c4b176a4d5a · LizardByte/LizardByte.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="tabs">
    <div class="nav nav-underline" role="tablist">
        {% for tab in include.tabs %}
        <div class="nav-item">
            <button
                    class="nav-link {% if forloop.first %}active{% endif %}"
                    id="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-pane"
                    type="button"
                    role="tab"
                    aria-controls="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-pane"
                    aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
            >{{ tab.name }}</button>
        </div>
        {% endfor %}
    </div>
    <div class="tab-content">
        {% for tab in include.tabs %}
        <div
                class="tab-pane fade {% if forloop.first %}show active{% endif %}"
                id="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-pane"
                role="tabpanel"
                aria-labelledby="{{ tab.name | slugify }}{% if include.index and include.index >= 0 %}-{{ include.index }}{% endif %}-tab"
        >
            {% if include.index and include.index >= 0 %}
                {{ tab.content[include.index] | markdownify }}
            {% else %}
                {{ tab.content | markdownify }}
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>