Vyvýšení

Vyvýšení

Využijte třetího rozměru pro vytvoření prostorové hierarchie obsahu pomocí stínu pod elementy.

Hierarchie

Vyvýšení elementu nad podkladem je určena úrovněmi od 1 do 6. Toto plně postačuje pro vytvoření prostorové hieararchie.

1
2
3
4
5
6

HTML only

<div class="elevation-1">
<div class="elevation-2">
<div class="elevation-3">
<div class="elevation-4">
<div class="elevation-5">
<div class="elevation-6">

Less only

<div class="foo foo--1">
<div class="foo foo--2">
<div class="foo foo--3">
<div class="foo foo--4">
<div class="foo foo--5">
<div class="foo foo--6">
.foo--1 {
  .elevation1;
}
...

.foo--6 {
  .elevation6;
}

Interakce

Má-li vyvýšený element být aktivním prvekm grafického rozhraní, vystoupne při najetí kurzoru o úroveň výše, při kliku naopak o úroveň klesne.

1
2
3
4
5
6

Poznámka Elevation 6 se používá pouze pro dialog, nemůže být tedy interaktivní.

HTML only

<div class="elevation-1 elevation--clickable">
<div class="elevation-2 elevation--clickable">
<div class="elevation-3 elevation--clickable">
<div class="elevation-4 elevation--clickable">
<div class="elevation-5 elevation--clickable">

Less only

<div class="foo-1">
<div class="foo-2">
<div class="foo-3">
<div class="foo-4">
<div class="foo-5">
.foo-1 {
  .elevation1Clickable;
}
...

.foo-5 {
  .elevation5Clickable;
}

Použití

Samotný princip vyvýšení bez konkrétních příkladů použití je poměrně abstraktní koncept. Prozkoumejte tedy možnosti využití hierarchie stínů.

Elevation 1
  • Card
Elevation 2
  • Button
Elevation 3
  • Vyhrazeno do budoucna
Elevation 4
  • Elevated Button Chystá se
  • Toast Chystá se
Elevation 5
  • Dropdown Menu
  • Combo Box
  • Autocomplete
Elevation 6
  • Dialog
Card
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer in sapien. Nullam sit amet magna in magna gravida vehicula. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec iaculis gravida nulla. Quisque tincidunt scelerisque libero.
Button
Elevated Button
Dropdown
Dialog
Zavřít