A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Média

Az mdui definiál néhány osztályt a képekhez és videókhoz, amelyek lehetővé teszik a responzivitást és az előre definiált stílusokat.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Stílus – Képek

Kép

Responzív

A .mdui-img-fluid osztály hozzáadása az img taghez lehetővé teszi, hogy a kép alkalmazkodjon a szülőelem szélességéhez.

Példa

<img class="mdui-img-fluid" src="image.png" />

Lekerekített kép

A .mdui-img-rounded osztály hozzáadása az img taghez lekerekíti a kép sarkait.

Példa

<img class="mdui-img-rounded" src="image.png" />

Kör alakú kép

A .mdui-img-circle osztály hozzáadása az img taghez kör alakúvá teszi a képet.

Példa

<img class="mdui-img-circle" src="image.png" />

Videó

Responzív beágyazott videó

A .mdui-video-container osztály hozzáadása a beágyazott videó szülőeleméhez lehetővé teszi, hogy a videó alkalmazkodjon a szülőelem szélességéhez.

Példa

<div class="mdui-video-container">
  <iframe
    height="498"
    width="510"
    src="https://player.youku.com/embed/XNzUwOTk5MzE2"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Responzív HTML5 videó

A .mdui-video-fluid osztály hozzáadása a video taghez lehetővé teszi, hogy a videó alkalmazkodjon a szülőelem szélességéhez.

Példa

<video class="mdui-video-fluid" controls>
  <source src="video.mp4" type="video/mp4" /></video
>

CSS osztályok listája

Osztálynév	Leírás
`.mdui-img-fluid`	Responzív kép
`.mdui-img-rounded`	Lekerekített kép
`.mdui-img-circle`	Kör alakú kép
`.mdui-video-container`	Responzív beágyazott videó
`.mdui-video-fluid`	Responzív HTML5 videó

Ikon

Segédosztályok