Styleguide

Tabs 

<div class="tabs">
    <!-- tab navigation -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item"><a class="nav-link" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="false">tab 1</a></li>
        <li class="nav-item"><a class="nav-link active" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">tab 2</a></li>
    </ul>

    <!-- tab content -->
    <div class="tab-content" id="">
        <div class="tab-pane fade" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">tab 1 content</div>
        <div class="tab-pane fade show active" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">tab 2 content</div>
    </div>
</div>
 
<div class="tabs" {% if mobile_accordion == true %} data-mobile-hidden {% endif %}>
    <!-- tab navigation -->
    {% if printable == 1 %}
        <div class="nav nav-tabs" id="myTab" role="tablist">
            {% for item in items %}
                <div class="nav-tabs-print">
                    <div class="nav-item"><a class="nav-link active" id="{{ item.tab_id }}-tab" data-toggle="tab" href="#{{ item.tab_id }}" role="tab" aria-controls="{{ item.tab_id }}" aria-selected="true">{{ item.tab_title }}</a></div>
                    <div class="tab-pane fade show active" id="{{ item.tab_id }}" role="tabpanel" aria-labelledby="{{ item.tab_id }}-tab">
                        <table>
                            {{ item.tab_content }}
                        </table>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            {% for item in items %}
                {% if item.tab_active %}
                    <li class="nav-item"><a class="nav-link active" id="{{ item.tab_id }}-tab" data-toggle="tab" href="#{{ item.tab_id }}" role="tab" aria-controls="{{ item.tab_id }}" aria-selected="true">{{ item.tab_title }}</a></li>
                {% endif %}
                {% if item.tab_active == false %}
                    <li class="nav-item"><a class="nav-link" id="{{ item.tab_id }}-tab" data-toggle="tab" href="#{{ item.tab_id }}" role="tab" aria-controls="{{ item.tab_id }}" aria-selected="false">{{ item.tab_title }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>

        <!-- tab content -->
        <div class="tab-content" id="">
            {% for item in items %}
                {% if item.tab_active %}
                    <div class="tab-pane fade show active" id="{{ item.tab_id }}" role="tabpanel" aria-labelledby="{{ item.tab_id }}-tab">{{ item.tab_content }}</div>
                {% endif %}
                {% if item.tab_active == false %}
                    <div class="tab-pane fade" id="{{ item.tab_id }}" role="tabpanel" aria-labelledby="{{ item.tab_id }}-tab">{{ item.tab_content }}</div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
</div>

{% if mobile_accordion == true %}
<div class="tabs-mobile">
{% render "@components/02-components/accordion/accordion.twig" with {
    accordion_id: accordion_id,
    items: items
} %}
</div>
{% endif %}
 
{
  "printable": 0,
  "mobile_accordion": false,
  "accordion_id": "tab-list-accordion",
  "items": [
    {
      "item": null,
      "tab_id": "tab1",
      "tab_title": "tab 1",
      "tab_active": false,
      "tab_content": "tab 1 content",
      "parent": "tab-list-accordion",
      "head_id": "tab-list-accordion-head",
      "body_id": "tab-list-accordion-body",
      "active": false,
      "title": "lorem ipsum 1",
      "content": "lorem ipsum content",
      "content_mobile": ""
    },
    {
      "item": null,
      "tab_id": "tab2",
      "tab_title": "tab 2",
      "tab_active": true,
      "tab_content": "tab 2 content",
      "parent": "tab-list-accordion",
      "head_id": "tab-list-accordion-head2",
      "body_id": "tab-list-accordion-body2",
      "active": true,
      "title": "lorem ipsum 2",
      "content": "lorem ipsum content 2",
      "content_mobile": ""
    }
  ]
}
  • Content: 
    .tabs {
	margin-bottom: 6rem;

	&[data-mobile-hidden] {
		display: none;
		@include media-breakpoint-up(md) {
			display: block;
		}
	}
	.nav-tabs {
		flex-wrap: nowrap;
		.nav-item {
			flex-grow: 1;
			margin-right: 3px;
			.nav-link {
				border: none;
				background: $color-medium-grey;
				border-radius: 0;
				@extend .title-small;
				margin-bottom: 0;
				padding: 1rem 1.5rem;
				height: 100%;

				span {
					font-style: normal;
				}

				&.active {
					background: $color-light-grey;
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			background: $color-light-grey;
			padding: 3rem 1.5rem;

			> div {
				padding-top: 14px;
				padding-bottom: 14px;
				border-top: 2px solid white;
				border-bottom: 2px solid white;

				+ div {
					border-top: none;
				}
			}

			table {
				width: 100%;

				td {
					min-width: 140px;
					vertical-align: top;
					border-color: #fff;
					border-bottom-width: 1px;
				}
				th {
					border-color: #fff;
					border-bottom-width: 1px;
				}
			}

			img {
				max-width: 100%;
        height: auto;
			}
		}
	}
}

.tabs-mobile {
	@include media-breakpoint-up(md) {
		display: none;
	}
}
  • URL: /components/raw/tabs/tabs.scss
  • Filesystem Path: components/02-components/tabs/tabs.scss
  • Size: 1.2 KB

There are no notes for this item.