1

Estou trabalhando em uma app rails. No momento estou mexendo no front-end. Tenho uma tabela de como ela se comporta em telas grandes.

|Tabela atual

porém ao reduzir a tela (tamanho de celular) gostaria q ela ficasse no estilo acordion com dropdown somente pele thead Nome.

Todos os outros campos ("email, telefone, origem, status e codigo") ficariam escondidos e só mostraria quando o usuário clicasse no Nome que ele quisesse, daí faria um dropdown no resto das informaçoes, mostrando uma embaixo da outra.

Alguém sabe como fazer? Não sei quase nada de JS, e acho q terá q fazer boa parte nele né...

3
  • Na verdade não precisa de JS, vc pode ter um dropdown "escondido" que só aparece quando a tela for pequena. Então ao mesmo passo que vc mostra o Dropdown em telas pequenas vc tb pode esconder a tabela nessas telas. Tudo com @media e CSS, se quiser eu monto um exemplo simples pra vc.
    – hugocsl
    26/03/2018 às 19:53
  • Se for possível montar o exemplo agradeceria! Obrigado 26/03/2018 às 19:56
  • Postei um exemplo, ele apenas alterna os valores do display no CSS quando a tela é menor. Pra vc testar copie o código no seu projeto e faça um teste diminuindo e aumentando a janela do Browser
    – hugocsl
    26/03/2018 às 20:28

1 Resposta 1

1

Conforme dito no comentário usei apenas @media only screen and (max-width: 576px) que é o menor breacking point oficial do Bootstrap para setar display na tabela e no collapse. Sendo assim, quando a tela for menor que 576px eu escondo a tabela e mostro o collapse, e quando for mair escondo o collapse e mostro a tabela.

Veja abaixo o exemplo: (vc precisa colocar a tela em 576px para ver mudar a tabela pelo collapse ok)

#accordion {
    display: none;
}
.table {
    display: table;
}
@media only screen and (max-width: 576px) {
    #accordion {
    display: block;
    }
    .table {
        display: none;
    }
}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    
<table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        </tr>
        <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        </tr>
        <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        </tr>
    </tbody>
</table>

<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                First
            </button>
        </h5>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
            <ul>
                <li>Mark</li>
                <li>Otto</li>
                <li>@mdo</li>
            </ul>
        </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Last
            </button>
        </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
            <ul>
                <li>Jacob</li>
                <li>Thornton</li>
                <li>@fat</li>
            </ul>
        </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Handle
            </button>
        </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
            <ul>
                <li>Larry</li>
                <li>the Bird</li>
                <li>@twitter</li>
            </ul>
        </div>
        </div>
    </div>
</div>

OBS: Usei exemplos de código retirador diretamente da Documentação oficial

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .