near_me
Introdução
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downEfeito rippleBotãoBotão de ação flutuanteCampo de seleçãoDivisorPainel colapsávelCampo de textoControles de seleçãoSliderListaControles de listaLista em gradeAbaBarra de ferramentasBarra de aplicativoGaveta de navegaçãoBarra de navegação inferiorCardChipTooltipSnackbarTabelaDiálogoMenuBarra de progresso
local_mall
Recursos
keyboard_arrow_downO novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.
Mídia
O mdui define algumas classes para imagens e vídeos que os tornam responsivos e com estilos predefinidos.
Leitura relacionada
Imagens
Responsivo
Adicionar a classe .mdui-img-fluid à tag img torna a imagem adaptável à largura de seu elemento pai.
Imagens com bordas arredondadas
Adicionar a classe .mdui-img-rounded à tag img dá à imagem bordas arredondadas.
Vídeo
Vídeo incorporado responsivo
Adicionar a classe .mdui-video-container ao elemento pai do vídeo incorporado o torna adaptável à largura do pai.
Exemplo
<div class="mdui-video-container">
<iframe
height="498"
width="510"
src="https://player.youku.com/embed/XNzUwOTk5MzE2"
frameborder="0"
allowfullscreen
></iframe>
</div>Vídeo HTML5 responsivo
Adicionar a classe .mdui-video-fluid à tag video torna o vídeo adaptável à largura de seu elemento pai.
Exemplo
<video class="mdui-video-fluid" controls>
<source src="video.mp4" type="video/mp4" /></video
>