Cum să utilizați pictogramele personalizate în material unghiular

Dacă doriți să utilizați pictograme personalizate în Angular Material, trebuie să faceți câțiva pași. În primul rând, va trebui să vă creați propriul set de pictograme. Angular Material vine cu un set încorporat de pictograme, dar le puteți crea și pe ale dvs. Odată ce aveți pictogramele dvs., va trebui să le înregistrați cu Angular Material. Acest lucru se poate face în fișierul modul al aplicației dvs. Odată ce pictogramele sunt înregistrate, le puteți utiliza la fel ca pictogramele încorporate. Le puteți folosi în markup sau le puteți accesa programatic. Asta este tot ce trebuie să folosești pictograme personalizate în Angular Material! Urmând acești pași, puteți adăuga cu ușurință propriile pictograme la Angular Material pentru a le utiliza în aplicațiile dvs.

În acest tutorial, vom folosi componenta >mat-icon> pentru a crea fontul Material Icons. Componenta va fi utilizată în plus față de suportul unei pictograme sva personalizată. Pe GitHub, puteți găsi codul de lucru complet. Această postare este pentru cei care învață doar Angular v4.2+. Materialul Angular pentru acest tutorial a fost scris inițial în Angular 5.2 și Angular 10.1. Pictograma pe care o vom folosi în acest tutorial (care seamănă cu o față cu un zâmbet) este pictograma de dispoziție. Pe lângă o listă cuprinzătoare de pictograme Material, site-ul web Material Design oferă o varietate de stiluri de pictograme care pot fi folosite singure.

Acum putem folosi pictograma mouse-ului pentru a afișa SVG-uri. Introducând o etichetă în proprietatea de intrare a unui fișier .html, puteți utiliza eticheta pictogramei pentru a specifica ce pictogramă este accesată. Adresa URL ar trebui să fie https://app.html. Să aruncăm o privire la ceea ce este disponibil în prezent. Când vă uitați la aplicația în browser, veți observa că pictograma personalizată este stilată în Material. Mutarea MatIconRegistry într-o clasă de servicii îl va ajuta să mențină codul mai curat.

Cum folosesc pictogramele Svg în Angular 12?

Pentru a utiliza pictogramele SVG în Angular 12, va trebui să instalați pachetele @angular/material și @angular/material-extensions. Apoi puteți utiliza serviciul matIconRegistry pentru a înregistra pictogramele și a le adăuga la componentele dvs.

Puteți gestiona codul în Angular2 utilizând fișierul Icon.svg ca separat. În plus, modulul ng-inline-svg (sau, dacă este posibil, alte abordări similare) poate fi folosit pentru a face acest lucru. Ca rezultat, este în esență ceva la mijloc – veți avea fișiere separate pentru fiecare tip de imagine, imaginile fiind în linie atunci când pagina se încarcă, astfel încât să le puteți manipula folosind JS/CSS.

Utilizarea aria-describedby ca parte a SVG-ului dvs. va permite utilizatorilor cu dizabilități să aibă o experiență mai bună atunci când vă folosesc site-ul. Ca urmare, atunci când descrieți pictogramele dvs. cu aria-descrisă de, vă veți putea asigura că utilizatorii cu dizabilități pot înțelege ce reprezintă.

Dezbaterea Png vs. Pictograme SVG

Pe de altă parte, un canal alfa poate fi adăugat și la un fișier SVG. Cu alte cuvinte, deoarece pot fi incluse în zone transparente păstrând în același timp un pic de culoare, pictogramele SVG sunt mai versatile decât pictogramele PNG . Alegerea fișierului de utilizat pentru pictogramele dvs. se reduce la proiectul dvs. specific și nevoile acestuia.

Cum folosesc pictogramele Svg personalizate în HTML?

Pentru a utiliza pictograme SVG personalizate în HTML, trebuie să includeți calea fișierului pictogramei în atributul href al elementului pictogramei. Calea fișierului ar trebui să fie relativă la directorul rădăcină al paginii. De exemplu, dacă pictograma se află într-un folder numit „icoane” în directorul rădăcină, calea fișierului ar fi „icons/icon.svg”.

De la introducerea instrumentelor online precum Icomoon și Fontello, fonturile web au devenit mult mai ușor de creat. Cu HTML5, avem acces la o gamă mult mai largă de pictograme, datorită graficelor vectoriale scalabile. Dacă doriți să oferiți asistență tehnică pentru Explorer 8, există câteva opțiuni simple de rezervă. Identificatorul unui fragment este o proprietate SVG încorporată. Putem face referire la un fragment dacă dorim să folosim o specificație de vizualizare SVG sau să adresăm o matrice. Acest element este un element SVG bazat pe ID-ul >vizualizării>. Pentru a arăta doar calul negru din acest sprite de piesă de șah (de la Wikipedia Commons), trebuie să detectați valori așa cum ați face în schema de mai jos.

Folosind eticheta img pentru a defini imaginea, tehnica funcționează bine cu Firefox, Chrome, Safari (desktop) și Opera. Alternativ, puteți utiliza un fișier SVG extern pentru a crea sprite-uri CSS, așa cum se arată în imaginea de mai jos. Aceasta este o tehnică de producție fiabilă, gata de utilizare. L-am testat într-o varietate de browsere majore (inclusiv IE8) și a funcționat perfect. Pictogramele apar pe ecran ca etichetă. Încă o dată, Icomoon poate fi folosit pentru a crea manual o colecție de etichete de simbol, sau puteți utiliza un plugin Grunt (google pentru Grunt SVG merge) pentru a face acest lucru. Cu excepția IE9, această metodă poate fi utilizată cu toate browserele majore. Chiar și soluția lui Jonathan Neal, SVG4everybody, poate fi folosită pentru a rezolva această problemă.

Cu excepția cazului în care codul sursă specifică atributul de lățime dorit, o imagine sva nu este afișată în browserul Chrome. Dacă SVG-ul nu are acest atribut, browserul va face imaginea mai mare sau mai mică.

Cum să utilizați imaginile Svg pe pagina dvs. web

Puteți insera imagini SVG direct în HTML utilizând eticheta svg> /svg>. Imaginea SVG poate fi accesată în codul VS sau IDE-ul dvs. preferat prin copierea codului și lipirea acestuia în elementul body al documentului dvs. HTML. Dacă totul ar decurge fără probleme, pagina dvs. web ar arăta exact ca cea afișată aici.
Pictogramele pot fi create cu imagini SVG prin simpla introducere a numelui lor într-un browser web. HTML poate fi încorporat în ele, iar versiunile în cache ale acestora pot fi instalate. Dovezile sunt promițătoare și pentru viitor. Pictogramele trebuie create cu PNG-uri sau cu interfețe grafice scalabile (SVG).

Lista de pictograme Svg Material unghiular

Biblioteca Angular Material oferă un set de componente UI reutilizabile, bine testate și accesibile, bazate pe specificația Google Material Design. Una dintre caracteristicile bibliotecii este capacitatea de a utiliza pictograme SVG ca pictograme Material. Setul de pictograme Material unghiular include o mare varietate de pictograme, inclusiv pictograme pentru rețelele sociale, pictograme tip fișier și săgeți. Puteți răsfoi lista completă a pictogramelor Material Angular pe site-ul Pictograme Material.

Pictogramele pot fi afișate folosind componenta Mat-Icoana din Angular Material. Caracteristica principală a acestei componente este capacitatea de a afișa imagini folosind fonturi web, cum ar fi Font-awesome, care necesită pur și simplu numele imaginii de care aveți nevoie. Ce se întâmplă cu pictogramele care nu aparțin fonturilor web? În pictogramă, doriți să faceți modificări (de exemplu, culoarea de la trecerea cursorului sau starea butonului într-o anumită locație) în timpul rulării? Următoarea eroare apare după ce deschideți secțiunea consolei browserului. Când utilizați contextul URL al resursei, este utilizată valoarea unsafe. Definirea URL-ului ca parametru este folosită pentru a ocoli SecurityTrustResourceUrl, care împiedică un atacator să injecteze o adresă URL rău intenționată, cum ar fi aceasta, consultați documentația oficială DomSanitizer.

Ne vom uita la o metodă mai bună mai târziu, dar chiar acum, le vom pune pur și simplu pe pagina app.html. Adăugați o clasă în eticheta HTML mat-icone așa cum este descris mai sus. Când un utilizator trece cu mouse-ul peste pictogramă, culoarea imaginii se schimbă ca urmare a SCSS. Pictogramele ar trebui să-și schimbe acum culorile atunci când treceți cu mouse-ul peste ele. Ca parte a unei postări viitoare, vom analiza îmbunătățirea acesteia și refactorizarea pentru a permite încărcarea pictogramelor folosind un serviciu.

Cum să utilizați pictogramele de material unghiular

Unde pot găsi pictograme de material unghiular?
Singurul lucru pe care trebuie să-l faceți este să utilizați următoarele fonturi web Google CSS în codul dvs. HTML. Pictogramele materiale pot fi găsite într-un singur fișier (42KB) și variază în dimensiune de la mare la mic. Pictogramele sunt împărțite în zece categorii diferite pe care le puteți vedea în depozitul Git. Pictogramele pot fi găzduite și pe propriul server.
Care sunt unele dintre site-urile bune pentru a vedea pictogramele materiale?
Am compilat pictogramele Material într-un depozit Git, care include toate formatele în care le punem la dispoziție.
Care este cel mai bun mod de a-mi personaliza pictograma?
Elementul de clasă trebuie adăugat la eticheta HTML cu pictogramă mat, așa cum se arată mai sus. Adăugarea SCSS la clasă schimbă culoarea pictogramei ori de câte ori un utilizator trece cu mouse-ul peste ea. Când treceți cu mouse-ul peste icoane, acestea ar trebui să-și schimbe culorile.

Cum să utilizați pictogramele de material unghiular

Pictogramele Material Angular sunt SVG-uri care pot fi folosite în aplicația dvs. Angular. Pentru a utiliza o pictogramă, pur și simplu adăugați clasa de pictograme la un element. De exemplu, pentru a utiliza pictograma cerc-cont, ați adăuga clasa mat-icoana-cerc-cont la un element.

Avem biblioteci de materiale în unghi care pot fi folosite pentru a proiecta rapid aplicația noastră și pentru a avea etichetele în construcție atribuite acesteia. Biblioteca de materiale conține o pictogramă mat, care este necesară pentru a ne afișa pictogramele. În secțiunile următoare, vom afla cum să instalăm bibliotecile necesare și cum să implementăm acest lucru pentru a afișa pictograme în aplicația noastră. Primul nostru serviciu este MatIconRegistry, care este un registru care ne permite să identificăm și să definim aliasuri pentru pictograme folosind un serviciu care este injectabil. Pictograma este foarte simplu de utilizat, dar necesită ca această directivă să fie importată în proiectul sau modulul rădăcină unde intenționăm să o afișam. Porniți comanda menționată mai sus pe linia de comandă pentru a crea un nou proiect unghiular. Vă rugăm să încercați una dintre comenzile enumerate mai jos pentru a vă asigura că toate bibliotecile necesare sunt instalate în proiectul nostru. Acest lucru este valabil mai ales pentru dezvoltatori, care pot folosi biblioteca și modulul direct în aplicația noastră, fără a fi nevoiți să se ocupe de pașii de adăugare a bibliotecii și a modulului la modulul rădăcină.

Mat-icoana Svg

Un svg cu pictogramă mat este o grafică vectorială simplă care poate fi folosită pentru a reprezenta o pictogramă sau un logo. Graficul poate fi redimensionat fără a pierde calitatea și poate fi editat sau modificat cu ușurință.

Folosind componenta materiale unghiulare mat-ion, putem genera SVG-uri locale. Injectăm serviciul MatIconRegistry, precum și DomSanitizer în constructor. Funcția registerIcons() include parametrii load și URL, precum și o funcție privată numită load. Dacă folosim această variantă, va trebui doar să adăugăm numele fișierului imagine. Dacă utilizați un șir, funcția de încărcare icon.service este ușor diferită. Numele imaginii va fi generat utilizând indexul ca cheie pentru numele imaginii în funcția de încărcare. Acest serviciu trebuie să fie acum activat când aplicația începe să se încarce. Este mult mai ușor de citit și de întreținut codul, deoarece este mult mai lizibil. Am împărțit imaginile în secțiuni separate și a fost implementat un serviciu mai simplu.