menuMDUIDocs
color_lens
Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Klasy pomocnicze

Marginesy

Ta seria klas narzędziowych może dodawać margin i padding do elementów, wartości domyślne są wielokrotnościami 8px.

Format nazwy klasy to: .mdui-{atrybut}-{kierunek}-{rozmiar}

Atrybut:

  • m - ustawia margin
  • p - ustawia padding

Kierunek:

  • t - ustawia margin-top lub padding-top
  • b - ustawia margin-bottom lub padding-bottom
  • l - ustawia margin-left lub padding-left
  • r - ustawia margin-right lub padding-right
  • x - ustawia margin-left margin-right lub padding-left padding-right
  • y - ustawia margin-top margin-bottom lub padding-top padding-bottom
  • a - ustawia margin lub padding

Rozmiar:

  • 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;
}

Szybkie pływanie

  • .mdui-float-left powoduje pływanie elementu do lewej
  • .mdui-float-right powoduje pływanie elementu do prawej
code
Przykład
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Wyśrodkowanie w poziomie

Dodaj klasę .mdui-center do dowolnego elementu, aby wyśrodkować go w poziomie.

code
Przykład
<div class="mdui-center" style="width: 200px">mdui-center</div>

Wyśrodkowanie w pionie

Dodaj klasę .mdui-valign do dowolnego elementu, aby wyśrodkować jego elementy podrzędne w pionie.

code
Przykład
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Wyrównanie w poziomie

  • .mdui-text-left Wyrównuje tekst do lewej.
  • .mdui-text-center Wyśrodkowuje tekst.
  • .mdui-text-right Wyrównuje tekst do prawej.
code
Przykład
<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>

Konwersja wielkości liter tekstu

  • .mdui-text-lowercase Zmienia tekst na małe litery.
  • .mdui-text-uppercase Zmienia tekst na wielkie litery.
  • .mdui-text-capitalize Zmienia tekst tak, aby każda pierwsza litera słowa była wielka.
code
Przykład
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Automatyczne skracanie tekstu

.mdui-text-truncate Może automatycznie skracać tekst i zastępować go wielokropkiem, gdy jego długość przekroczy limit.

code
Przykład
<p class="mdui-text-truncate" style="max-width: 200px;">To jest bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo, bardzo długi tekst.</p>

Czyszczenie pływania

Dodaj klasę .mdui-clearfix do elementu nadrzędnego, aby wyczyścić pływanie.

code
Przykład
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Ukrywanie treści

  • Klasa .mdui-hidden służy do ukrywania elementów, co odpowiada dodaniu stylu display: none;; ukryte elementy nie zajmują miejsca na stronie.
  • Klasa .mdui-invisible służy do czynienia elementów niewidocznymi, ale nadal zajmują one miejsce na stronie, co odpowiada dodaniu stylu visibility: hidden;.

Narzędzia responsywne

Te klasy narzędziowe wykorzystują zapytania media (media queries) do ukrywania treści na różnych urządzeniach. Klasy te obejmują:

  • .mdui-hidden-*: Ukrywa na urządzeniach o określonej szerokości.
  • .mdui-hidden-*-up: Ukrywa na urządzeniach o określonej szerokości i większych.
  • .mdui-hidden-*-down: Ukrywa na urządzeniach o określonej szerokości i mniejszych.
Bardzo małe ekrany
<600px		Małe ekrany
>=600px - <1024px		Średnie ekrany
>=1024px - <1440px		Duże ekrany
>=1440px - <1920px		Bardzo duże ekrany
>=1920px
.mdui-hidden-xsWidocznyWidocznyWidocznyWidoczny
.mdui-hidden-smWidocznyWidocznyWidocznyWidoczny
.mdui-hidden-mdWidocznyWidocznyWidocznyWidoczny
.mdui-hidden-lgWidocznyWidocznyWidocznyWidoczny
.mdui-hidden-xlWidocznyWidocznyWidocznyWidoczny
.mdui-hidden-xs-downWidocznyWidocznyWidocznyWidoczny
.mdui-hidden-sm-downWidocznyWidocznyWidoczny
.mdui-hidden-md-downWidocznyWidoczny
.mdui-hidden-lg-downWidoczny
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upWidoczny
.mdui-hidden-md-upWidocznyWidoczny
.mdui-hidden-lg-upWidocznyWidocznyWidoczny
.mdui-hidden-xl-upWidocznyWidocznyWidocznyWidoczny

Dostosuj okno przeglądarki lub obejrzyj poniższe przykłady na różnych urządzeniach. Ciemne części oznaczają, że są one widoczne w bieżącym oknie przeglądarki.

✔ .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
Media
arrow_forwardNext
Cień