Componentes MUI
Orientação para estilizar elementos da UI usando React Material UI
Modelos de reação
As seções de cada layout são claramente definidas por comentários ou pelo uso de arquivos separados, simplificando a extração de partes de uma página (como uma "unidade principal" ou rodapé, por exemplo) para reutilização em outras páginas. Para exemplos de várias partes, uma tabela no README no local do código-fonte vinculado descreve a finalidade de cada arquivo.
Pontos de interrupção padrão
Cada ponto de interrupção (uma chave) corresponde a uma largura de tela fixa (um valor):
- xs , extra pequeno: 0px
- sm , pequeno: 600px
- md , médio: 900px
- LG , grande: 1200px
- xl , extragrande: 1536px
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
Vitrine
Confira esses aplicativos públicos usando Material UI para se inspirar em seu próximo projeto.
Tema
Aqui estão utilitários que podem ajudá-lo a personalizar seu tema e a capacidade de alterá-lo no navegador.
- Criar tema Material-UI - Ferramenta online para criar temas MUI por meio da Material Design Color Tool.
- Gerador de tema Material-UI - Gerador de tema/paleta Material-UI.
- Material-UI Theme Editor - Uma ferramenta para gerar temas para seus aplicativos MUI apenas selecionando as cores e tendo uma visualização ao vivo.
Projetos Relacionados
Família de projetos Material-UI Design.
- material-ui-theme-editor - Uma ferramenta para gerar temas para seus aplicativos Material UI que apresenta visualização ao vivo.
- Gerador de paleta de materiais - O gerador de paleta oficial do Material Design pode ser usado para gerar uma paleta para qualquer cor que você escolher.
- Componentes Extra - Fornece um conjunto de componentes de "molécula" construídos sobre o Material-UI, como rodapé, CookiesBanner, botão BackToTop e outros elementos complexos altamente personalizáveis para ajudar os desenvolvedores a construir as partes macro de sua UI muito rapidamente. Esses componentes são frequentemente duplicados entre sites - esta biblioteca resolve exatamente esse problema.
- React Admin - Um framework frontend para construir aplicativos administrativos rodando no navegador, em cima de APIs REST/GraphQL, usando ES6, React e Material Design.
- Material UI Snippets - extensão VSCode que fornece snippets.
- Material UI Codemorphs - extensão VSCode que fornece codemods.
- Eslint: detectar classes não utilizadas - plugin ESLint para detectar classes de estilo não utilizadas com
@mui/styles .
Componentes
Uma lista de componentes de UI criados com Material-UI Design.
- Campo Material-UI Password - Um campo de senha usando Material-UI.
- Caixa de diálogo em tela cheia - Uma caixa de diálogo em tela cheia para Material-UI.
- Upload de Material-UI - Carregue controles feitos em Material-UI usando FileAPI.
- Super Select Field - Componente suspenso de preenchimento automático de seleção múltipla para Material-UI.
- Formulário de esquema JSON de material - formulário Material-UI gerado a partir de json.
- Notistack - Snackbars fáceis para Material-UI (para que você não precise lidar com o estado aberto/fechado deles).
- Material-UI Dropzone - componente Material-UI construído sobre react-dropzone.
- Formik-Material-UI - Vinculações para usar Material-UI com formik.
- Redux-Form-Material-UI - Componentes wrapper para facilitar o uso de Material-UI com Redux Form.
- Final-Form-Material-UI - Componentes wrapper para facilitar o uso do Material-UI com o Final Form.
- Carrossel giratório automático Material-UI - Carrossel de estilo de material.
- Imagem Material-UI - Imagem de estilo de material com animação de carregamento.
- Material-UI Flat Pagination - Um componente de paginação de design plano para Material-UI.
- Dx-react-scheduler-Material-UI - Um componente de agendador/calendário para Material-UI.
- Dx-react-chart-Material-UI - Gráficos para Material-UI que visualiza dados usando uma variedade de tipos de série, incluindo barra, linha, área, dispersão, pizza e muito mais.
- Material-UI Medium Blog - Componente Material-UI Card estendido para mostrar os blogs Medium.
- React Github Repo Cards - Componente Material-UI Card estendido para mostrar os repositórios GitHub.
- Componentes da molécula React - Componentes da molécula React baseados no Material-UI.
- Material-UI NestedMenuItem - Substituição imediata do MenuItem do MUI com menus infinitamente aninhados e aberto ao passar o mouse.
- React-planet - Crie menus circulares que se parecem com planetas.
