<div class="tabComponent {{section.settings.tab_design}}"> {% if section.settings.section_title != blank %} <h1 class="infoTitle">{{section.settings.section_title}}</h1> {% endif %} <div class="tabContainer"> {% for block in section.blocks %} <input class="inputTab" name="tabComponent" type="radio" id="tab--{{ forloop.index }}" {% if forloop.first %} checked="checked"{% endif %}> <label class="labelTab" for="tab--{{ forloop.index }}" style="background: {{block.settings.label_bg}};"> {% if block.settings.img_icon != blank %} <img src="{{block.settings.img_icon | img_url: '50x50'}}" alt="{{block.settings.img_icon.alt}}"> {% endif %} <h4> {{block.settings.tab_title}}</h4> </label> <div class="infoTab"> {% if block.settings.info_title != blank %} <h1 class="infoTitle">{{block.settings.info_title}}</h1> {% endif %} {% if block.settings.info_title != blank %} <div class="infoDescription">{{block.settings.info_description}}</div> {% endif %} <div >{{block.settings.page.content}}</div> </div> {% endfor %} </div> </div> <style> :root { --tab-bg: {{section.settings.tab_bg}}; --tab-active: {{section.settings.tab_active}}; --tab-hover: {{section.settings.tab_hover}}; --border-color: {{section.settings.border_color}}; }
.tabComponent { display: flex; flex-direction: column; margin: 5%; box-sizing: border-box; position: relative; }
.tabContainer { display: flex; flex-wrap: wrap; }
.inputTab { position: absolute; opacity: 0; background: var(--tab-bg); }
.labelTab { width: calc(100% / {{ section.blocks.size}} ) ; height: clamp(30px, 4vw, 100px); margin: auto; padding: .5%; display: flex; justify-content: center; align-items: center; gap: 2%; line-height: 1.2; cursor: pointer; font-weight: bold; font-size: clamp(12px, 1.5vw, 24px); transition: all .3s; text-align: center; white-space: nowrap; overflow: hidden; }
.labelTab img { width: clamp(20px, 2.5vw, 50px); aspect-ratio: 1; } .labelTab h4 { font-size: clamp(14px, 1.5vw, 25px); margin: auto; display: inline-block; vertical-align: top; }
.infoTab { display: none; width: 100%; padding: 4%; order: 999; background: var(--tab-bg); }
.inputTab:checked + .labelTab + .infoTab { display: block; }
.infoTitle { font-size: clamp(16px, 2vw, 24px); }
.infoDescription > *{ font-size: clamp(13px, 1.7vw, 20px); }
/*==== tab design ====*/ .bordered .labelTab { border-radius: 10px 10px 0 0; padding: 1%; }
.bordered .labelTab:hover { background: var(--tab-hover) !important; }
.bordered .inputTab:checked + .labelTab { background: var(--tab-bg) !important; border-top: solid 2px var(--border-color); border-left: solid 2px var(--border-color); border-right: solid 2px var(--border-color); border-bottom: none; } .bordered .infoTab { background: var(--tab-bg); border-bottom: solid 2px var(--border-color); border-left: solid 2px var(--border-color); border-right: solid 2px var(--border-color); }
.no-border .labelTab { border-bottom: solid 2px #e6e6e6; }
.no-border .labelTab:active { border-bottom: solid 4px var(--border-color); background: var(--tab-active) !important; } .no-border .labelTab:hover { background: var(--tab-hover) !important; } .no-border .inputTab:checked + .labelTab { border-bottom: solid 4px var(--border-color); background: var(--tab-active) !important; }
@media (min-width: 600px) { .bordered .labelTab { border-radius: 10px 10px 0 0; border-bottom: solid 2px var(--border-color); } }
@media (max-width: 600px) { .labelTab { display: inline-block; margin: auto; width: max-content; } .bordered .labelTab { border-radius: 5px; } .inputTab:checked + .labelTab + .infoTab { border: solid 2px var(--border-color); }
.bordered .inputTab:checked + .labelTab { background: var(--tab-bg); color: var(--border-color); border: solid 2px var(--border-color); } }
</style> {% schema %} { "name": "Tab Component", "settings": [ { "type": "text", "id": "section_title", "label": "Section Title" }, { "type": "select", "id": "tab_design", "default": "bordered", "label": "Tab component design", "options": [ { "value": "bordered", "label": "bordered" }, { "value": "no-border", "label": "no-border" } ] }, { "type": "color", "id": "tab_bg", "label": "Section Background", "default": "#e5e5e5" }, { "type": "color", "id": "tab_hover", "label": "Tab hover", "default": "#d8d8d8" }, { "type": "color", "id": "border_color", "label": "Border Color", "default": "transparent" }, { "type": "color", "id": "tab_active", "label": "Tab Active(no-border only)", "default": "#ccc" } ], "blocks": [ { "type": "tab", "name": "Tab", "settings": [ { "type": "color", "id": "label_bg", "label": "Label background color", "default": "#fff" }, { "type": "image_picker", "id": "img_icon", "label": "Image Icon" }, { "type": "text", "id": "tab_title", "label": "Tab Title" }, { "type": "text", "id": "info_title", "label": "Info Title" }, { "type": "richtext", "id": "info_description", "label": "Tab Title", "default": "<p>Write more info here!</p>" }, { "type": "page", "id": "page", "label": "Page to show" } ] } ], "max_blocks": 10, "presets": [ { "name": "Tab Component" } ] } {% endschema %}
|