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

Pomocné třídy

Okraj

Tuto řadu nástrojových tříd lze použít k přidání margin a padding prvkům, výchozí hodnoty jsou všechny násobky 8 px.

Formát názvu třídy je: .mdui-{atribut}-{směr}-{velikost}

Atribut:

  • m - nastavuje margin
  • p - nastavuje padding

Směr:

  • t - nastavuje margin-top nebo padding-top
  • b - nastavuje margin-bottom nebo padding-bottom
  • l - nastavuje margin-left nebo padding-left
  • r - nastavuje margin-right nebo padding-right
  • x - nastavuje margin-left margin-right nebo padding-left padding-right
  • y - nastavuje margin-top margin-bottom nebo padding-top padding-bottom
  • a - nastavuje margin nebo padding

Velikost:

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Rychlé obtékání

  • .mdui-float-left způsobí, že se prvek bude obtékat vlevo
  • .mdui-float-right způsobí, že se prvek bude obtékat vpravo
code
Příklad
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Horizontální vycentrování

Přidáním třídy .mdui-center k libovolnému prvku jej lze vycentrovat horizontálně.

code
Příklad
<div class="mdui-center" style="width: 200px">mdui-center</div>

Vertikální vycentrování

Přidáním třídy .mdui-valign k libovolnému prvku se jeho podřízené prvky vycentrují vertikálně.

code
Příklad
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Horizontální zarovnání textu

  • .mdui-text-left Zarovná text vlevo.
  • .mdui-text-center Zarovná text na střed.
  • .mdui-text-right Zarovná text vpravo.
code
Příklad
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

Transformace textu na verzálky

  • .mdui-text-lowercase Převede text na malá písmena.
  • .mdui-text-uppercase Převede text na velká písmena.
  • .mdui-text-capitalize Převede text tak, aby začínal velkým písmenem.
code
Příklad
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Automatické zkrácení textu

.mdui-text-truncate Pokud délka textu překročí limit, lze jej automaticky zkrátit a nahradit výpustkou (třemi tečkami).

code
Příklad
<p class="mdui-text-truncate" style="max-width: 200px;">Toto je velmi velmi velmi velmi velmi velmi velmi velmi velmi velmi velmi velmi dlouhý text.</p>

Zrušení obtékání

Přidáním třídy .mdui-clearfix k nadřazenému prvku se zruší obtékání.

code
Příklad
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Skrytí obsahu

  • Třída .mdui-hidden se používá ke skrytí prvku, což odpovídá přidání stylu display: none;. Skrytý prvek nezabírá místo na stránce.
  • Třída .mdui-invisible se používá k tomu, aby prvek nebyl viditelný, ale stále bude zabírat místo na stránce, což odpovídá přidání stylu visibility: hidden;.

Responzivní nástroje

Tyto nástrojové třídy umožňují skrývat obsah pro různá zařízení pomocí mediálních dotazů. Patří mezi ně:

  • .mdui-hidden-*: Skryje prvek na zařízeních se zadanou šířkou.
  • .mdui-hidden-*-up: Skryje prvek na zařízeních se zadanou šířkou a větší.
  • .mdui-hidden-*-down: Skryje prvek na zařízeních se zadanou šířkou a menší.
Velmi malá obrazovka
<600px		Malá obrazovka
>=600px - <1024px		Střední obrazovka
>=1024px - <1440px		Velká obrazovka
>=1440px - <1920px		Velmi velká obrazovka
>=1920px
.mdui-hidden-xsViditelnýViditelnýViditelnýViditelný
.mdui-hidden-smViditelnýViditelnýViditelnýViditelný
.mdui-hidden-mdViditelnýViditelnýViditelnýViditelný
.mdui-hidden-lgViditelnýViditelnýViditelnýViditelný
.mdui-hidden-xlViditelnýViditelnýViditelnýViditelný
.mdui-hidden-xs-downViditelnýViditelnýViditelnýViditelný
.mdui-hidden-sm-downViditelnýViditelnýViditelný
.mdui-hidden-md-downViditelnýViditelný
.mdui-hidden-lg-downViditelný
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upViditelný
.mdui-hidden-md-upViditelnýViditelný
.mdui-hidden-lg-upViditelnýViditelnýViditelný
.mdui-hidden-xl-upViditelnýViditelnýViditelnýViditelný

Změňte velikost okna prohlížeče nebo si ukázku zobrazte na různých zařízeních. Tmavá část je viditelná v aktuálním okně prohlížeče.

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up
arrow_backPrevious
Média
arrow_forwardNext
Stíny