Estou codificando um painel de expansão próprio em Angular. Quero imitar o comportamento do Angular Material Expansion Panel (que não funcionará com meu requisito).
Então, eu tenho essencialmente 3 itens, a saber:
- um ícone inicial
- texto
- um botão para recolher/expandir.
Quando clico no ícone de expansão, o texto é exibido. O código em execução é fornecido no Stackblitz .
Quando o painel é recolhido, todos os três ícones ficam no mesmo nível
Isto se deve ao
align-items: center;
e isso parece perfeito. Assim que eu expando o painel, os ícones flutuam também para o centro do contêiner. Existe uma maneira de fixá-los no topo E centralizá-los quando collapsed?
A única ideia que tive foi envolver tudo em divs e brincar um pouco com flexbox. A principal mudança foi envolver ícone e botão em div com altura codificada. Não é perfeito, mas o resultado é o esperado (só precisa de ajustes de pixel).
pilha blitz