Layouts no React
O layout de Body é o layout que compoe todo o sistema após o login, ele é dividido em 3 partes.
A navbar é a barra que fica no topo da página, ela serve para colocarmos algumas informações sobre o usuário, empresa ou filial.
A sidebar é aonde vamos armazenar os módulos e submódulos do sistema.
Vá no caminho layouts\body\sidebar\content\Itens
Ícones: Para os ícones, podemos usar da biblioteca MUI ou caso não achar use o icone que deseja, use o FontAwesome (Devemos usar os icones do tipo Filled):
Icones MUI
Icones FontAwesome
Módulo padrão:
Módulo com Submódulo:
O footer serve para padronizar a página e dar um "fim" a ela, pode conter informações úteis com contato da empresa, links importantes e etc.
Esse é o layout usado para construir um conteúdo padrão
Existe um padrão de conteúdo para ser criado, não quer dizer que sua tela não irá funcionar sem ele, mas para o sistema sempre seguir em uma mesma linha, foi criado um fomulário padrão para para armazenar os conteúdos dentro, pode armazenar desde fomulários de cadastros até onde sua imaginação puder chegar
O ideal é armazenar um conteúdo por ContentPage, para assim ficar mais organizado e padronizado
Segue implementação:
No ContentPage é possível criarmos um objeto para passarmos todos os parâmetros
Neste cenário estamos passando um título para o conteúdo e os botões que queremos que apareçam, neste caso só tem o save, os outros botões são default do ContentPage
Para padronizar os registros e visualizações de dados temos os seguintes layouts:
Parâmetros:
- title: Título do painel de registro
- alertPanel: Padrão de alerta em painel
- children: Conteúdo dentro do painel de registro (TextFields)
- onSave: Função executada ao clicar no botão save
- buttons: Botões personalizados que podem ser passados para o painel de registro (ButtonGroup)
- hideSaveButton: Booleano controlador para o botão save aparecer ou não
Usabilidade:
buiding...