near_me
Rozpoczęcie
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zasoby
keyboard_arrow_downNowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.
Separator
Separator służy do zarządzania i oddzielania treści w listach i układach stron, aby zapewnić lepsze efekty wizualne i poczucie przestrzeni.
Sposób użycia
Separator jest napisany w czystym CSS, wystarczy napisać kod HTML, aby zaczął działać.
Kolory
- Ciemny separator dla jasnego tła
- Jasny separator dla ciemnego tła
- Separator automatycznie dostosowujący kolor, zmieni się na ciemny lub jasny w zależności od motywu strony
Powiązane artykuły
Wytyczne projektowe Material Design: Komponenty - Separatory
Styl
Separator o szerokości ekranu
Separator o szerokości ekranu zajmuje 100% szerokości. Dostępne klasy to:
mdui-divider: ciemny w motywie domyślnym, jasny w motywie ciemnym.mdui-divider-light: jasny separator, używany na ciemnym tle.mdui-divider-dark: ciemny separator, używany na jasnym tle.
Separator wcięty
Separator wcięty ma 72px odstępu od lewej strony, często używany w listach z awatarami lub ikonami. Dostępne klasy to:
mdui-divider-inset: ciemny w motywie domyślnym, jasny w motywie ciemnym.mdui-divider-inset-light: jasny wcięty separator, używany na ciemnym tle.mdui-divider-inset-dark: ciemny wcięty separator, używany na jasnym tle.
Lista klas CSS
| Nazwa klasy | Opis |
|---|---|
.mdui-divider | Definiuje separator. Ciemny w motywie domyślnym, jasny w motywie ciemnym. |
.mdui-divider-light | Definiuje jasny separator dla ciemnego tła. |
.mdui-divider-dark | Definiuje ciemny separator dla jasnego tła. |
.mdui-divider-inset | Definiuje wcięty separator. Ciemny w motywie domyślnym, jasny w motywie ciemnym. |
.mdui-divider-inset-light | Definiuje jasny wcięty separator dla ciemnego tła. |
.mdui-divider-inset-dark | Definiuje ciemny wcięty separator dla jasnego tła. |