Dashboard - com HTML CSS PURO

Programação
#1

Sei que poderia estar usando o bootstrap e tudo mais(como sei usar) mas como estou aprendendo PHP prefiro fazer assim, html e css na unha, enfim… o problema:
Vejo em algumas aplicações que o dashboard - quando clica no menu lateral, ele recarrega só aquela parte em destaque vermelho, sei que pode-se usar um include via php só com a estrutura da página e exibir apenas o conteúdo naquele ambiente, mas em JS como se faz, qual a estrutura que deve ser dentro dessa parte vermelha? uma div? um article??

image
image.png1430×767 15 KB
Da

#2

fiz usando um div - mas como funcionaria para clicar no botão e só modificar esta parte azul…

image
image.png1439×765 6.43 KB

LINK DO DASH
cursoemvideo.php (1,4 KB)

#3

Uma das formas de fazer é a seguinte:


<div class="sidebar">
...
</div>

<div class="conteudo-principal">

</div>
function desenharCadastroCliente() {

    return '<div class="painel-cadastro-cliente">
                ...
            </div>' 
}


Quando você clicar no menu você chama o código abaixo através 
de um listener ou onclick no proprio componente

O código abaixo pega um componente que tenha a classe conteudo-principal 
e insere dentro da tag o retorno da função desenharCadastroCliente

$('.conteudo-principal').html(desenharCadastroCliente());

EDIT:
Uma coisa legal para o aprendizado, é tentar reproduzir o que as classes do bootstrap geram, ou seja, ao invés de você digitar apenas o nome da classe, você copia os atributos css para uma outra classe sua para fixar a combinação de estilos

Exemplo:
A classe btn-primary do bootstrap gera isso:

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

Você pode copiar ou modificar algo e colocar numa classe sua. O aprendizado de css vem bem rápido

.botao-confirmacao {
  color: #fff;
  background-color: #2eb1e7;
  border-color: #2eb1e7;
}
<button class="botao-confirmacao" ... >

E também você pratica os seletores, tais como: hover, focus, nth, last, first, >, +, etc

1 curtida