Seção / menu suspenso da guia personalizada no celular

 < div
 class = "tabComponent {{section.settings.tab_design}} "
 estilo = "
 --tab-bg: {{section.settings.tab_bg}} ;
 --tab-hover: {{section.settings.tab_hover}} ;
 preenchimento superior: {{ section.settings.padding_top | append: 'px' }} ;
 preenchimento inferior: {{ section.settings.padding_bottom | append: 'px' }}
 "
 > 
< div class = "tabContainer" >
 { % para bloco na seção. blocos % }
 < entrada
 classe = "inputTab"
 nome = "tabComponent"
 tipo = "rádio" 
id = "tab-- {{ forloop.index }} "
 { % se forloop. primeiro % }
 verificado = "verificado"
 { % fim se % }
 > 
< label class = "labelTab" for = "tab-- {{ forloop.index }} " style = "background: {{block.settings.label_bg}} ;" >
 <h2> { { bloco . configurações . tab_title } } </ h2 > 
</ rótulo >
 < div class = "infoTab" >
 < div class = "infoTab-container" >
 { % se bloco. configurações . info_title != em branco % } 
< h1 class = "infoTitle" > { { bloco. configurações . info_title } } </ h1 >
 { % fim se % } 
{ % se bloco. configurações . info_descrição != em branco % } 
< div class = "infoDescription" > { { bloco. configurações . info_descrição } } </ div >
 { % fim se % } 
< div class = "pageContainer" > { { bloco. configurações . página . conteúdo } } </ div >
 </div> _ _
 </div> _ _ 
{ % fim para % }
 </div> _ _
 < div class = "guia dobrável" >
 { %- para bloco na seção. blocos -% } 
< div class = "acordeão-collapsible-tab" { { bloco. shopify_attributes } } >
 < detalhes
 class = "detalhes-guia dobrável" 
{ % se seção. configurações . open_first_collapsible_row e forloop. primeiro % }
 abrir
 { % fim se % }
 >
 < classe de resumo = "guia recolhível de resumo" > 
< h2 class = "acordeão-collapsible-tab__title h2" >
 { { bloquear. configurações . tab_title | padrão : bloco. configurações . página . título } }
 </ h2 >
 < svg 
xmlns = "http://www.w3.org/2000/svg"
 class = "ícone ícone-caret"
 largura = "24"
 altura = "24"
 viewBox = "0 0 24 24"
 preencher = "nenhum"
 curso = "#000000"
 traço - largura = "2" 
traço - linecap = "redondo"
 acidente vascular cerebral - linejoin = "redondo"
 >
 < caminho d = "M9 18l6-6-6-6" />
 </svg> _
 </ resumo >
 < div
 class = "acordeão-collapsible-tab__content rte" 
função = "região"
 aria - labelledby = "summary-collapsible-tab- {{ block.id }} - {{ section.id }} "
 >
 { % se bloco. configurações . info_title != em branco % } 
<h3> { { bloco . configurações . info_title } } </ h3 >
 { % fim se % }
 { % se bloco. configurações . info_descrição != em branco % } 
{ { bloquear. configurações . info_descrição } }
 { % fim se % } 
< div class = "pageContainer" > { { bloco. configurações . página . conteúdo } } </ div >
 </div> _ _
 </ detalhes > 
</div> _ _
 { %- fim para -% }
 </div> _ _
 </div> _ _
 <estilo> _
 .. tabComponent {
 exibição : flexível ;
 flex - direction : coluna ; 
dimensionamento da caixa : caixa de borda ;
 posição : relativa ;
 - webkit - tap - destaque - cor : transparente ;
 }
 . tabContainer {
 exibição : flexível ;
 flex - wrap : wrap ;
 largura máxima : 1080px ; 
largura : 100 %;
 margem : automática ;
 }
 . entradaTab {
 posição : absoluta ;
 opacidade : 0 ;
 plano de fundo : var ( -tab - bg ) ;
 }
 . etiquetaTab { 
margem : 0 ;
 preenchimento - direita : 5rem ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 lacuna : 2 %;
 altura da linha : 1,2 ;
 cursor : ponteiro ; 
intensidade da fonte : Negrito ;
 tamanho da fonte : clamp ( 12px , 1,5vw , 24px ) ;
 transição : todos 0,3s ;
 alinhamento de texto : centro ;
 espaço em branco : nowrap ;
 estouro : oculto ;
 }
 . etiquetaTab img { 
largura : braçadeira ( 20px , 2,5vw , 50px ) ;
 proporção de aspecto : 1 ;
 }
 . etiquetaTab h2 {
 tamanho da fonte : clamp ( 14px , 1,5vw , 25px ) ;
 display : bloco embutido ; 
alinhamento vertical : topo ;
 margem : 0 0 2rem ;
 }
 . infoTab {
 Mostrar nenhum ;
 posição : relativa ;
 largura : 100 %;
 preenchimento : 5 % 0 ; 
ordem : 999 ;
 plano de fundo : var ( -tab - bg ) ;
 }
 . infoTab : antes de {
 contente : "" ;
 posição : absoluta ;
 largura : 100vw ;
 altura : 100 %; 
plano de fundo : var ( -tab - bg ) ;
 topo : 0 ;
 esquerda : 50 %;
 z - índice : -1 ;
 transformar : traduzirX ( -50 % ) ;
 } 
. inputTab : verificado + . etiquetaTab + . infoTab {
 exibição : bloco ;
 }
 . inputTab : verificado + . labelTab > h2 : depois de {
 transformar : escalaX ( 1 ) ;
 } 
. labelTab > h2 : depois de {
 exibição : bloco ;
 contente : "" ;
 largura : 100 %;
 margem - topo : 5px ;
 altura : 2px ;
 plano de fundo : var ( -tab - hover ) ; 
transformar : escalaX ( 0 ) ;
 transição : transforma 300 ms de facilidade de entrada e saída ;
 }
 . labelTab > h2 : pairar : depois de {
 transformar : escalaX ( 1 ) ;
 }
 . infoTítulo { 
tamanho da fonte : clamp ( 16px , 2vw , 24px ) ;
 }
 . infoDescrição > * {
 tamanho da fonte : clamp ( 13px , 1,7vw , 20px ) ;
 }
 . dobrável - aba { 
Mostrar nenhum ;
 }
 . acordeão - aba dobrável . resumo - recolhível - tab__title + . ícone - cursor {
 altura : calc ( var ( -font - heading - scale ) * 0.6rem ) ; 
}
 . acordeão - dobrável - guia + . acordeão - dobrável - aba {
 margem - topo : 0 ;
 border - top : nenhum ;
 }
 . acordeão - dobrável - aba { 
margem superior : 2,5rem ;
 margem - inferior : 0 ;
 borda superior : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,08 ) ; 
borda inferior : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,08 ) ;
 }
 . acordeão - dobrável - tab__title {
 display : bloco embutido ; 
largura máxima : calc ( 100 % -6rem ) ;
 margem : automático 0 ;
 quebra de palavra : quebra de palavra ;
 }
 . acordeão - aba dobrável . ícone - acordeão { 
alinhar - self : centro ;
 fill : rgb ( var ( -color - foreground ) ) ;
 altura : calc ( var ( -font - heading - scale ) * 2rem ) ; 
margem - direita : calc ( var ( -font - heading - scale ) * 1rem ) ;
 largura : calc ( var ( -font - heading - scale ) * 2rem ) ;
 } 
. detalhes da aba acordeão - collapsible [ abrir ] > resumo. ícone - cursor {
 transformar : girar ( 90 graus ) ;
 }
 . acordeão - recolhível - resumo da guia > . ícone - cursor { 
transformar : girar ( 0 graus ) ;
 transição : transformação com facilidade de 0,5s ;
 posição : absoluta ;
 altura : 1,8rem ;
 direita : 1,5rem ;
 topo : calc ( 50 % - 0,8rem ) ;
 } 
. acordeão - dobrável - tab__content {
 quebra de palavra : quebra de palavra ;
 estouro -x : automático ;
 preenchimento : 0rem 1,6rem 2rem ;
 }
 . acordeão - dobrável - tab__content img {
 máx - largura : 100 %; 
}
 . resumo - recolhível - guia {
 altura : 50px ;
 exibição : flexível ;
 alinhar - conteúdo : centro ;
 }
 : raiz {
 - acordeão - min - altura : 56px ; 
- acordeon - max - height : 300px ;
 }
 . detalhes - recolhível - guia {
 preenchimento : 0 2rem ;
 margem : 0 automático 0,5rem ;
 raio da borda : 4px ;
 estouro : oculto ; 
nome da animação : acordeão - fechar ;
 animação - duração : 0,4s ;
 função de temporização de animação : facilidade de entrada e saída ;
 transformação - origem : topo ;
 }
 . detalhes - recolhível - aba [ abrir ] { 
nome da animação : acordeon - master ;
 animação - duração : 0,3s ;
 função de temporização de animação : facilidade de entrada e saída ;
 transformação - origem : topo ;
 }
 @keyframes acordeão - mestre {
 de { 
altura máxima : var ( -acordeão - min - altura ) ;
 }
 para {
 altura máxima : var ( -acordeão - altura máxima ) ;
 }
 }
 @keyframes acordeão - fechar {
 de { 
altura mínima : var ( -acordeão - altura máxima ) ;
 }
 para {
 altura mínima : var ( -acordeão - altura mínima ) ;
 }
 } 
. detalhes - recolhível - resumo da guia ::- webkit - detalhes - marcador {
 Mostrar nenhum ;
 }
 . detalhes - recolhível - guia > . acordeão - dobrável - tab__content {
 preenchimento - inferior : 1rem ; 
margem - inferior : 0 ;
 opacidade : 0 ;
 transição : 0,3s ;
 altura : 0 ;
 margem - topo : 0 ;
 preenchimento - topo : 1rem ; 
nome da animação : acordeão - conteúdo - fechar ;
 animação - duração : 0,3s ;
 função de temporização de animação : facilidade de entrada e saída ;
 } 
. detalhes - colapsible - tab [ abrir ] > . acordeão - dobrável - tab__content {
 opacidade : 1 ;
 altura : automático ;
 nome da animação : acordeão ;
 animação - duração : 0,3s ; 
função de temporização de animação : facilidade de entrada e saída ;
 transformação - origem : topo ;
 }
 @keyframes acordeão {
 de {
 transformar : escalaY ( 0 ) ;
 opacidade : 0 ;
 }
 para { 
transformar : escalaY ( 1 ) ;
 opacidade : 1 ;
 }
 }
 @keyframes acordeão - conteúdo - fechar {
 de {
 margem - topo : 0 ;
 }
 para { 
margem - topo : -300px ;
 }
 }
 @keyframes acordeão - conteúdo {
 de {
 opacidade : 0 ;
 }
 para {
 opacidade : 1 ;
 }
 }
 . pageContainer ,
 . pageContainer img , 
. pageContainer > * {
 largura : 100 %;
 }
 @media ( largura máxima : 1019px ) {
 . dobrável - aba {
 exibição : bloco ;
 }
 . tabComponent { 
margem : 0 ;
 }
 . tabContainer {
 Mostrar nenhum ;
 }
 . infoTítulo {
 preenchimento : 0 1rem ;
 }
 . pageContainer {
 preenchimento : 1 % 5 %;
 }
 } 
</ estilo >
 { % esquema % }
 {
 "nome" : "Componente da guia" ,
 "configurações" : [
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" , 
"min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" ,
 "label" : "Preenchimento superior" ,
 "padrão" : 36 
} ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 , 
"unidade" : "px" ,
 "label" : "Preenchimento inferior" ,
 "padrão" : 36
 } ,
 {
 "tipo" : "cor" ,
 "id" : "tab_bg" , 
"label" : "Fundo da seção" ,
 "padrão" : "#e5e5e5"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "tab_hover" ,
 "label" : "Guia flutuante" , 
"padrão" : "#2eb8c0"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "open_first_collapsible_row" ,
 "padrão" : falso ,
 "label" : "Abrir a primeira aba recolhível" , 
"info" : "Isso se aplica apenas à visualização móvel"
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "guia" ,
 "nome" : "Aba" ,
 "configurações" : [
 { 
"tipo" : "cor" ,
 "id" : "label_bg" ,
 "label" : "Cor de fundo da etiqueta" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "texto" , 
"id" : "tab_title" ,
 "label" : "Título da guia"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "info_title" ,
 "label" : "Título da informação"
 } , 
{
 "type" : "richtext" ,
 "id" : "info_descrição" ,
 "rótulo" : "Descrição" ,
 "default" : "<p>Escreva mais informações aqui!</p>"
 } ,
 { 
"tipo" : "página" ,
 "id" : "página" ,
 "label" : "Página a mostrar"
 }
 ]
 }
 ] ,
 "max_blocks" : 10 ,
 "predefinições" : [ 
{
 "name" : "Componente da guia"
 }
 ]
 }
 { % termina o esquema % }