ઉકેલાયેલ: કોણીય ફ્લેક્સ લેઆઉટ આયાત કરો

મુખ્ય પૃષ્ઠ » જાવાસ્ક્રિપ્ટ » કોણીય » ઉકેલાયેલ: કોણીય ફ્લેક્સ લેઆઉટ આયાત કરો

કોણીય ફ્લેક્સ લેઆઉટ લવચીક અને પ્રતિભાવશીલ ગ્રીડ પ્રદાન કરે છે. તે ઉચ્ચ લેઆઉટ વર્સેટિલિટી માટે CSS3 ના ફ્લેક્સબોક્સ મોડલનો ઉપયોગ કરે છે. તે બુટસ્ટ્રેપ અથવા અન્ય કોઈપણ CSS-આધારિત સોલ્યુશન્સનો ઉપયોગ કર્યા વિના વેબ પૃષ્ઠોને ડિઝાઇન કરવા માટે સારી-સંરચિત API સાથે કોણીય વિકાસકર્તાઓને પણ પ્રદાન કરે છે.

કોણીય ફ્લેક્સ લેઆઉટ એ એક શક્તિશાળી લેઆઉટ સાધન છે કારણ કે તે ઘટકોના કદ અને તેમની વચ્ચેની જગ્યાને સંચાલિત કરવામાં મદદ કરે છે, જેનાથી પ્રતિભાવશીલ વપરાશકર્તા ઇન્ટરફેસ બનાવવાનું સરળ બને છે.

જ્યારે આ શરૂઆતમાં જટિલ લાગે છે, આ લેખ તમને પ્રક્રિયામાં માર્ગદર્શન આપશે, દરેક પગલાની રૂપરેખા તમને તેને વધુ સારી રીતે સમજવામાં મદદ કરશે. ટૅગ્સ, કોડ્સ અને સોલ્યુશન્સ બધાને વિગતવાર સમજાવવામાં આવશે.

કોણીય ફ્લેક્સ લેઆઉટની આયાત અને ઉપયોગ

કોણીય ફ્લેક્સ લેઆઉટની સ્થાપના

પ્રથમ પગલું એ તમારા પ્રોજેક્ટમાં કોણીય ફ્લેક્સ લેઆઉટ ઇન્સ્ટોલ કરવાનું છે. આ કરવા માટે, તમારે નીચેનો npm આદેશ ચલાવવાની જરૂર છે:

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

ખાતરી કરો કે તમે તમારી સિસ્ટમમાં node.js ઇન્સ્ટોલ કરેલ છે, કારણ કે npm(નોડ પેકેજ મેનેજર) તેના પર નિર્ભર છે.

કોણીય ફ્લેક્સ લેઆઉટ આયાત કરી રહ્યું છે

ઇન્સ્ટોલેશન પછી, તમારે તેને તમારા પ્રોજેક્ટમાં આયાત કરવાની જરૂર છે. તમારા કોણીય પ્રોજેક્ટમાં તેને કેવી રીતે આયાત કરવું તે અહીં છે:

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

તમારા '@NgModule' આયાત વિભાગમાં FlexLayoutModule શામેલ કરો:

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

કોણીય ફ્લેક્સ લેઆઉટનો ઉપયોગ કરવો

કોણીય ફ્લેક્સ લેઆઉટને આયાત અને ગોઠવીને, તમે હવે તેનો ઉપયોગ તમારી સમગ્ર એપ્લિકેશનમાં કરી શકો છો. તે નિર્દેશોનો સમૂહ રજૂ કરે છે જેનો તમે તમારા HTML ટેમ્પલેટ્સમાં ઉપયોગ કરી શકો છો. આ નિર્દેશો પ્રતિભાવ લેઆઉટ ડિઝાઇન કરવાનું સરળ બનાવે છે.

દાખલા તરીકે, fxFlex ડાયરેક્ટિવનો ઉપયોગ કરીને, તમે આના જેવા તત્વોનું કદ સરળતાથી સેટ કરી શકો છો:

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

આ કન્ટેનરની પહોળાઈને સમાન રીતે વહેંચવા માટે બે ડિવ્સ સેટ કરે છે, તેમની વચ્ચે 20 પિક્સેલના અંતર સાથે.

કોણીય ફ્લેક્સ લેઆઉટ નિર્દેશો

કોણીયના ફ્લેક્સ લેઆઉટની ક્ષમતાઓનો સંપૂર્ણ લાભ લેવા માટે, તે પ્રદાન કરે છે તે વિવિધ નિર્દેશોથી પોતાને પરિચિત કરવું મહત્વપૂર્ણ છે.

• fxLayout - આ નિર્દેશ લેઆઉટ દિશાને વ્યાખ્યાયિત કરે છે: પંક્તિ અથવા કૉલમ.
• fxLayoutAlign - આ નિર્દેશ લેઆઉટ તત્વોનું સંરેખણ સુયોજિત કરે છે.
• fxFlex - આ નિર્દેશ લેઆઉટ તત્વોના કદને નિયંત્રિત કરે છે.
• fxLayoutGap - આ નિર્દેશ તમને લેઆઉટ ઘટકો વચ્ચેના અંતરને વ્યાખ્યાયિત કરવા દે છે.

કોણીયનું ફ્લેક્સ લેઆઉટ તમને તમારા ઇન્ટરફેસને ડિઝાઇન કરવામાં ઘણી રાહત આપે છે. તેનો વ્યાપક અને બહુમુખી સુવિધા સમૂહ તમને ગતિશીલ અને પ્રતિભાવશીલ લેઆઉટ સરળતાથી વિકસાવવા દે છે.