Yakagadziriswa: pinza angular flex marongero

Angular Flex Layout inopa inoshanduka uye inopindura grid. Inoshandisa CSS3's flexbox modhi yemhando yepamusoro dhizaini. Inopawo vagadziri veAngular vane API yakanyatsogadziriswa yekugadzira mapeji ewebhu pasina kushandisa bootstrap kana chero imwe CSS-based solutions.

Angular Flex Layout chishandiso chine simba chekumisikidza nekuti chinobatsira kubata saizi yezvinhu uye nzvimbo iri pakati pazvo, zvichiita kuti zvive nyore kugadzira inopindura mushandisi interface.

Kunyange izvi zvingaite sezvakaoma pakutanga, chinyorwa ichi chinokutungamira mukuita, ichitsanangura nhanho imwe neimwe kuti ikubatsire kuinzwisisa zvirinani. Iwo ma tag, macode, uye mhinduro zvese zvichatsanangurwa zvakadzama.

Kupinza uye Kushandisa Angular Flex Layout

Kuiswa kweAngular Flex Layout

Nhanho yekutanga ndeyekuisa iyo Angular Flex Layout kune purojekiti yako. Kuti uite izvi, unofanirwa kuita inotevera npm kuraira:

npm install @angular/flex-layout @angular/cdk

Ita shuwa kuti une node.js yakaiswa muhurongwa hwako, sezvo npm(node โ€‹โ€‹package maneja) zvinoenderana nazvo.

Kupinza Angular Flex Layout

Mushure mekuisirwa, unofanirwa kuipinza mupurojekiti yako. Heino nzira yekuipinza nayo muAngular purojekiti yako:

import { FlexLayoutModule } from '@angular/flex-layout';

Batanidza FlexLayoutModule mune yako '@NgModule' chikamu chekunze:

@NgModule({
  ......
  imports: [
    ......
    FlexLayoutModule
  ],
  ......
})

Kushandisa Angular Flex Layout

Nekupinza uye kugadzirisa Angular Flex Layout, unogona ikozvino kuishandisa mukati meapp yako. Inosuma seti yemirairo yaunogona kushandisa mune yako HTML matemplate. Aya mairairi anoita kuti zvive nyore kugadzira marongero anoteerera.

Semuenzaniso, uchishandisa iyo fxFlex kuraira, unogona kuseta nyore saizi yezvinhu seizvi:

<div fxLayout="row" fxLayoutGap="20px">
  <div fxFlex="50%">Content 1</div>
  <div fxFlex="50%">Content 2</div>
</div>

Izvi zvinogadzira maviri div kuti agoverane hupamhi hwemudziyo, paine gap remakumi maviri pixels pakati pavo.

Angular Flex Layout Directives

Kuti ukwidze zvizere kugona kweAngular's Flex Layout, zvakakosha kuti uzvizive iwe neyakasiyana mirairo yainopa.

  • fxLayout -Iyi dhairekitori inotsanangura iyo dhizaini dhizaini: mutsara kana koramu.
  • fxLayoutAlign -Iyi dhairekitori inomisikidza kurongeka kwezvinhu zvekugadzirisa.
  • fxFlex -Iyi dhairekitori inodzora saizi yezvinhu zvekurongeka.
  • fxLayoutGap -Iyi dhairekitori inoita kuti iwe utsanangure mukaha pakati pezvimiro.

Angular's Flex Layout inokupa iwe hukuru hwekuchinjika mukugadzira yako interfaces. Yayo yakazara uye yakasiyana-siyana seti seti inobvumidza iwe kukudziridza ane simba uye anopindura marongero zviri nyore.

Related posts:

Leave a Comment