I-Angular Flex Layout inikeza igridi eguquguqukayo nesabelayo. Isebenzisa imodeli ye-flexbox ye-CSS3 ukuze kube nokuguquguquka okuphezulu kwesakhiwo. Iphinde inikeze abathuthukisi be-Angular nge-API ehlelwe kahle yokuklama amakhasi ewebhu ngaphandle kokusebenzisa i-bootstrap noma ezinye izixazululo ezisekelwe ku-CSS.
I-Angular Flex Layout iyithuluzi lesakhiwo elinamandla ngoba lisiza ukuphatha usayizi wezakhi kanye nesikhala phakathi kwazo, okwenza kube lula ukudala isixhumi esibonakalayo somsebenzisi esiphendulayo.
Nakuba lokhu kungase kubonakale kuyinkimbinkimbi ekuqaleni, lesi sihloko sizokuqondisa kunqubo, sichaze isinyathelo ngasinye ukuze sikusize usiqonde kangcono. Amathegi, amakhodi, nezixazululo konke kuzochazwa ngokuningiliziwe.
Ukungenisa kanye nokusebenzisa i-Angular Flex Layout
Ukufakwa kwe-Angular Flex Layout
Isinyathelo sokuqala ukufaka i-Angular Flex Layout kuphrojekthi yakho. Ukuze wenze lokhu, udinga ukwenza umyalo olandelayo we-npm:
npm install @angular/flex-layout @angular/cdk
Qiniseka ukuthi une-node.js efakiwe ohlelweni lwakho, njengoba i-npm(umphathi wephakheji ye-node) incike kuyo.
Ingenisa I-Angular Flex Layout
Ngemva kokufaka, udinga ukukungenisa kuphrojekthi yakho. Nansi indlela yokuyingenisa kuphrojekthi yakho ye-Angular:
import { FlexLayoutModule } from '@angular/flex-layout';
Faka i-FlexLayoutModule esigabeni sakho sokungenisa ngaphandle kwe-'@NgModule':
@NgModule({ ...... imports: [ ...... FlexLayoutModule ], ...... })
Ukusebenzisa i-Angular Flex Layout
Ngokungenisa nokulungiselela i-Angular Flex Layout, manje ungayisebenzisa kulo lonke uhlelo lwakho lokusebenza. Yethula isethi yeziqondiso ongazisebenzisa kuzifanekiso zakho ze-HTML. Lezi ziqondiso zenza kube lula ukuklama izakhiwo eziphendulayo.
Isibonelo, usebenzisa umyalo we-fxFlex, ungasetha kalula usayizi wezinto ezinjengalezi:
<div fxLayout="row" fxLayoutGap="20px"> <div fxFlex="50%">Content 1</div> <div fxFlex="50%">Content 2</div> </div>
Lokhu kusetha ama-div amabili ukuze abelane ngokulinganayo ububanzi besiqukathi, kube negebe lamaphikseli angu-20 phakathi kwawo.
I-Angular Flex Layout Directives
Ukuze usebenzise ngokugcwele amandla e-Angular's Flex Layout, kubalulekile ukuzijwayeza ngeziqondiso ezihlukahlukene ezinikezayo.
- fxLayout - Lo myalelo uchaza isiqondiso sesakhiwo: irowu noma ikholomu.
- fxLayoutAlign - Lo myalelo uhlela ukuqondanisa kwezakhi zesakhiwo.
- fxFlex - Lo myalelo ulawula usayizi wezakhi zesakhiwo.
- I-fxLayoutGap - Lesi siqondiso sikuvumela ukuthi uchaze igebe phakathi kwezinto zesakhiwo.
I-Angular's Flex Layout ikunikeza ukuguquguquka okukhulu ekuklameni i-interface yakho. Isethi yayo yesici ebanzi futhi ehlukahlukene ikuvumela ukuthi uthuthukise izakhiwo eziguqukayo neziphendulayo kalula.