Materiale de design pentru învățare Lite Meniul

În această tranșă a seriei noastre de Materiale de Design Lite (MDL), vom examina meniulcomponentă. Aceasta este o componentă pe care ocazional trebuie să o oferiți unui meniu contextual al acțiunilor disponibile.

În Facebook, de exemplu, puteți vedea un meniu contextual implementat în bara laterală unde este afișată o listă de prieteni online și offline. Meniul se află în partea de jos, în linie cu formularul de căutare, ilustrat cu a Angrenaj icoană.

Meniul contextual al bara laterală a Facebook.

Există un alt exemplu bun în Gmail. Puteți găsi acest meniu contextual în linie cu Inbox tab, sub Compune buton. Oferă acțiuni pentru sortarea mesajelor primite în Inbox pentru o mai bună gestionare a e-mailurilor.

În acest tutorial, vom vedea cum să implementăm un meniu contextual utilizând componenta de meniu MDL. Cu toate acestea, înainte de a face un început, adăugați bibliotecile MDL - foile de stil și JavaScript - la cap din documentul dvs..

Odată ce ați terminat, să mergem!

Merge!

Să presupunem că avem un site web pentru afacerea noastră, iar afacerea are acum mai multe filiale în diferite țări. Acum avem nevoie ca site-ul să fie prezentat în mai multe limbi. Acesta este un scenariu bun în care putem folosi componenta de meniu din site-ul nostru: pentru a comuta limba.

Pentru a construi acest meniu de comutare a limbajului, începem prin crearea unui element cu buton de pictograme cu un id așa că putem să-l conectăm la meniu. Vom folosi pictograma de design material.

 limba 

Simțiți-vă liber să alegeți un buton plat, dacă îl considerați mai potrivit pentru designul general al site-ului dvs., de exemplu:

Limbile

Lista

Apoi, vom adăuga lista limbilor. Înainte de a face acest lucru, trebuie să decidem unde să apară meniul în funcție de poziția butonului. În funcție de aspectul site-ului, comutatorul de limbă ar putea fi afișat în navigație. Putem adăuga, de asemenea, oriunde în partea de jos, în secțiunea subsol.

Dacă găsim poziția în colțul din dreapta jos al site-ului, vom adăuga meniul folosind clasa Modifier: mdl-meniu - dreapta sus. Meniul, așa cum presupune numele clasei, va apărea în partea de sus, din stânga butonului. Înlocuiți clasa cu una din următoarele clase pentru a poziționa meniul în mod diferit:

• mdl-meniu - dreapta jos
• mdl-meniu - bottom-stânga: aceasta este implicită dacă nu este asociată nici o altă clasă cu meniul. Meniul va apărea în partea de jos, aliniat la stânga.
• mdl-meniu - stânga sus

Am putea adăuga meniul oriunde. Dar este mai bine să o păstrați aproape, în același recipient ca și butonul.

 limba  
 
Engleză
 
日本語
 
한국어
 
 

pentru

Lucrul pe care trebuie să-l țineți minte pentru marcarea meniului este pentru atribut. După cum puteți vedea mai sus, pentru valoarea atributului trebuie să se potrivească cu valoarea id a butonului.

Dacă butonul este poziționat în partea de sus a site-ului web, meniul ar trebui să apară în partea de jos, adăugând mdl-meniu - dreapta jos clasă.

Mai multe exemple

O altă posibilă aplicare a componentei de meniu este îmbunătățirea cărții noastre de postări de blog din tutorialul anterior. Acolo avem postul cu un buton de partajare; am putea utiliza componenta de meniu pentru a oferi opțiuni pentru selectarea rețelelor sociale:

Înfășurarea în sus

Componenta din meniul MDL este ușor de implementat. După cum am învățat aici, este nevoie de un element de listă neordonat cu câteva clase, iar apoi avem meniul gata să mergem - la fel de simplu.

În următorul tutorial, vom vedea cum să personalizăm toate componentele pe care le-am utilizat până acum. Ne vedem acolo!