Vyvýšení

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

Vyvýšení

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