Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Mřížkové rozvržení

mdui poskytuje 24 různých hloubek stínů, které mohou splnit jakýkoli scénář v Material Designu.

Související čtení

Designové zásady Material Design: Elevation a stín

Přidat stín

Zesílí stín při přejetí myší.

Otevře tooltip.

<body>
  <div class="mdui-container">
    ...
  </div>
</body>

Umožňuje předat konfigurační parametry pro změnu obsahu při každém otevření, například open({ content: 'nový obsah' }). Seznam viz parametry výše.

<body>
  <div class="mdui-container-fluid">
    ...
  </div>
</body>

Zesílí stín při přejetí myší.

Zavře tooltip.

Přepne stav tooltipu.

Vrátí stav tooltipu. Možné stavy jsou <code>opening</code>, <code>opened</code>, <code>closing</code>, <code>closed</code>.

Příklad

<div class="mdui-row">
  <div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>

Stačí k prvku přidat třídu <code>.mdui-shadow-[1-24]</code> a prvek získá stín odpovídající hloubky. Přidáním třídy <code>.mdui-shadow-0</code> lze stín odstranit.

.mdui-col-xs-[1-12] Událost bude spuštěna při zahájení animace otevírání.
.mdui-col-sm-[1-12] <code>event._detail.inst</code>: instance
.mdui-col-md-[1-12] Událost bude spuštěna po dokončení animace otevírání.
.mdui-col-lg-[1-12] Událost bude spuštěna při zahájení animace zavírání.
.mdui-col-xl-[1-12] Událost bude spuštěna po dokončení animace zavírání.

<code>center</code>: Menu je svisle vycentrované v okně.

<code>auto</code>: Automatické určení polohy. Priorita: <code>bottom</code> > <code>top</code> > <code>center</code>.

class	Způsob zarovnání menu s prvkem, který ho spouští.	<code>left</code>: Menu je zarovnané vlevo s prvkem, který ho spouští.
`.mdui-col-xs-[1-12]`	> 0px	<code>right</code>: Menu je zarovnané vpravo s prvkem, který ho spouští.
`.mdui-col-sm-[1-12]`	> 600px
`.mdui-col-md-[1-12]`	> 1024px
`.mdui-col-lg-[1-12]`	> 1440px
`.mdui-col-xl-[1-12]`	> 1920px

Příklad

<!-- <code>center</code>: Menu je vodorovně vycentrované v okně. -->
<div class="mdui-row">
  <div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- <code>auto</code>: Automatické určení polohy, priorita: <code>left</code> > <code>right</code> > <code>center</code>. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Minimální mezera mezi menu a okrajem okna v px. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>

Přetáhněte posuvník níže a pozorujte změny stínu v různých hloubkách.

Způsob pozicování menu

Příklad

<div class="mdui-row mdui-row-gapless">
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>

Přidáním třídy <code>.mdui-hoverable</code> k jakémukoli prvku dosáhnete zesílení stínu při přejetí myší.

true: Menu používá fixní pozicování (fixed). Při rolování stránky zůstane menu na fixní pozici v okně a nebude se posouvat s obsahem.

Příklad

<div class="mdui-row">
  <div class="mdui-col-md-4">.mdui-col-md-4</div>
  <div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>

Odebere stín.

false: Menu používá absolutní pozicování (absolute). Při rolování stránky se menu posouvá spolu se stránkou.

Příklad

<div class="mdui-row">
  <div class="mdui-col-xs-9">
    Level 1: .col-xs-9
    <div class="mdui-row">
      <div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

Přidá stín o různé hloubce.

Zda menu překrývá prvek, který ho spouští.

Příklad

<div class="mdui-row-xs-5">
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
</div>

true: Menu překrývá prvek, který ho spouští.

Seznam CSS tříd

Název třídy	Popis
`.mdui-container`	<code>false</code>: Menu nepřekrývá prvek, který ho spouští.
`.mdui-container-fluid`	<code>auto</code>: Jednoduché menu překrývá prvek, který ho spouští. Kaskádové menu ho nepřekrývá.
`.mdui-row`	Způsob spouštění podnabídky.
`.mdui-col-[xs\|sm\|md\|lg\|xl]-[1-12]`	<code>click</code>: Podnabídka se otevře při kliknutí.
`.mdui-row-gapless`	<code>hover</code>: Podnabídka se otevře při přejetí myší.
`.mdui-col-offset-[xs\|sm\|md\|lg\|xl]-[1-12]`	Zpoždění spuštění podnabídky (v milisekundách). Tento parametr je účinný pouze pokud je subMenuTrigger: hover.
`.mdui-row-[xs\|sm\|md\|lg\|xl]-[1-12]`	Otevře menu.

Písmo Roboto

Typografie