Back to Question Center
0

સીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટને બનાવી રહ્યું છે            સીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટ બનાવીને લગતી વિષયો: ઑડિઓ અને & વિડીયોસાસબૂટસ્ટ્રેપસીએસએસએમ સેમાલ્ટ

1 answers:
સીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટને બનાવી રહ્યું છે

આ ટ્યુટોરીયલમાં, હું ટ્રેલો બોર્ડ સ્ક્રીનના મૂળભૂત લેઆઉટના અમલીકરણ દ્વારા તમને લઈ જઈશ (અહીં ઉદાહરણ જુઓ). આ એક પ્રતિભાવશીલ, સાધારણ ઉકેલ છે, અને લેઆઉટની માત્ર માળખાકીય સુવિધાઓ વિકસાવવામાં આવશે.

પૂર્વાવલોકન માટે, અહીં અંતિમ પરિણામનું સેમલડ ડેમો છે - insurance centers for long term care inc.

સીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટને બનાવી રહ્યું છેસીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટ બનાવીને લગતી વિષયો:
ઑડિઓ અને વિડીયોસાસબૂટસ્ટ્રેપસીએસએસ સેમ્પલ

ગ્રીડ લેઆઉટ અને ફ્લેક્સબોક્સ સિવાય, ઉકેલ કૅલ્સ અને વ્યૂપોર્ટ એકમોને રોજગારી આપે છે. કોડને વધુ વાંચનીય અને કાર્યક્ષમ બનાવવા માટે, સેમલટે સસ વેરિયેબલ્સનો લાભ પણ લે છે.

કોઈ ફોલબેક્સ આપવામાં આવતાં નથી, તેથી સહાયક બ્રાઉઝરમાં કોડને ચલાવવાની ખાતરી કરો. વધુ ઉત્સુકતાને બાદબાકી, ચાલો સ્ક્રીન ઘટકોને એક પછી એકના વિકાસમાં ડૂબવું.

સ્ક્રીન લેઆઉટ

ટ્રેલો બૉર્ડની સ્ક્રીનમાં એપ બાર, બોર્ડ બાર અને કાર્ડ સૂચિ ધરાવતી એક વિભાગનો સમાવેશ થાય છે. મીમલ્ટ્ટ આ માળખું નીચેના માર્કઅપ હાડપિંજર સાથે બિલ્ડ:

      

આ લેઆઉટ એક સીએસએસ ગ્રીડ સાથે પ્રાપ્ત થશે. ખાસ કરીને, 3 × 1 ગ્રીડ (એટલે ​​કે, એક કૉલમ અને ત્રણ પંક્તિઓ). પ્રથમ પંક્તિ એપ્લિકેશન બાર માટે હશે, બોર્ડ પટ્ટી માટેનો બીજો અને માટે ત્રીજો હશે યાદીઓ તત્વ

પ્રથમ બે પંક્તિઓ પ્રત્યેક ચોક્કસ ઊંચાઇ હોય છે, જ્યારે ત્રીજી પંક્તિ બાકીની ઉપલબ્ધ વ્યૂપોર્ટની ઊંચાઈ વિસ્તારશે:

     UI {ઊંચાઈ: 100વોહ;પ્રદર્શન: ગ્રીડ;ગ્રીડ-નમૂના-પંક્તિઓ: $ appbar-height $ navbar-height 1fr;}     

વ્યૂપોર્ટ એકમો તેની ખાતરી . UI કન્ટેનર હંમેશા બ્રાઉઝરનું વ્યૂપોર્ટ જેટલું ઊંચું હશે.

એક ગ્રીડ ફોર્મેટિંગ સંદર્ભને કન્ટેનરને સોંપેલ છે, અને ઉપર નિર્દિષ્ટ ગ્રીડ પંક્તિઓ અને કૉલમ્સ વ્યાખ્યાયિત કરવામાં આવે છે. વધુ ચોક્કસ થવા માટે, ફક્ત પંક્તિઓ વ્યાખ્યાયિત કરવામાં આવે છે કારણ કે અનન્ય કૉલમ જાહેર કરવાની જરૂર નથી. આ પંક્તિઓનું માપ એ બારની ઊંચાઈ અને fr એકમની ની ઊંચાઈને વધારવા માટેના કેટલાક સસ ચલો સાથે કરવામાં આવે છે. યાદીઓ તત્વ બાકીની વ્યૂપોર્ટની ઊંચાઈ વિસ્તારતા હોય છે.

આ કાર્ડ યાદી આપે છે વિભાગ

જેમ ઉલ્લેખ કર્યો છે, સ્ક્રીન ગ્રીડની ત્રીજી પંક્તિ કાર્ડ યાદીઓ માટે કન્ટેનરની હોસ્ટ કરે છે. તેના માર્કઅપની રૂપરેખાને સેમ્યુઅલ કરો:

      

યાદીઓને ફોર્મેટ કરવા માટે હું એક સંપૂર્ણ વ્યૂપોર્ટ-પહોળાઈ મીમલ્ટ એક-લાઇન પંક્તિ કન્ટેનરનો ઉપયોગ કરી રહ્યો છું:

     યાદીઓ {પ્રદર્શન: ફ્લેક્સ;ઓવરફ્લો-એક્સ: ઓટો;> * {ફ્લેક્સ: 0 0 ઓટો; // 'કઠોર' યાદીઓમાર્જિન-ડાબે: $ ગેપ;}& :: પછી {સામગ્રી: '';ફ્લેક્સ: 0 $ $ ગેપ;}}     

ઓવરફ્લો-એક્સ પ્રોમ્પ્ટરના ઑટો વેલ્યુને અસાઇન કરે છે ત્યારે બ્રાઉઝરને સ્ક્રીનના તળિયે એક આડી સ્ક્રોલબાર પ્રદર્શિત કરવા કહે છે જ્યારે સૂચિ વ્યૂપોર્ટ દ્વારા પ્રદાન કરેલી પહોળાઈમાં ફિટ થતી નથી.

ફ્લેક્સ લહેરઆન્ડ પ્રોપર્ટીનો ઉપયોગ સૂચિ કઠોર બનાવવા માટે ફ્લેક્સ વસ્તુઓ પર થાય છે. ફ્લેક્સ-બેઝિસ માટે ઓટો વેલ્યુ (લહેરાઉપયોગમાં ઉપયોગમાં લેવાયેલ) માંથી માપ વાંચવા માટે લેઆઉટ એન્જિનને સૂચવે છે. તત્વની પહોળાઈની મિલકત, અને ફ્લેક્સ-વૃદ્ધિ અને ફ્લેક્સ-સંકોચો માટે શૂન્ય મૂલ્યો આ પહોળાઈના ફેરફારને અટકાવે છે.

આગામી હું યાદીઓ વચ્ચે આડી અલગ ઉમેરવા માટે જરૂર પડશે. આને ઠીક કરવા માટે, યાદીઓ ડાબા હાંસિયાથી અલગ પડે છે અને છેલ્લી યાદી અને જમણા વ્યૂપોર્ટની ધાર વચ્ચેની જગ્યાને :: દરેક પછીના સ્યુડો-ઘટક ઉમેરીને નિયંત્રિત કરવામાં આવે છે. યાદીઓ તત્વ ડિફૉલ્ટ ફ્લેક્સ-સંકોચાઈ: 1 અન્યથા ઓવરરાઇડ હોવું જોઈએ નહીં તો સ્યુડો-એલિમેન્ટ તમામ નકારાત્મક સ્થાનને શોષી લે છે અને તે ગુમ થઈ જાય છે.

નોંધ કરો કે ફાયરફોક્સ પર <54 સ્પષ્ટ પહોળાઈ: 100% ઓન . યોગ્ય લેઆઉટ રેન્ડરીંગને સુનિશ્ચિત કરવા માટે સૂચિ આવશ્યક છે.

કાર્ડ યાદી

દરેક કાર્ડ સૂચિ હેડર બાર, કાર્ડનો ક્રમ, અને ફૂટર બારથી બનેલો છે. નીચેના HTML સ્નિપેટ આ માળખાને મેળવે છે:

      
યાદી હેડર
  • .
  • એક કાર્ડ ઉમેરો

અહીં નિર્ણાયક કાર્ય એ છે કે કેવી રીતે યાદીની ઊંચાઈનું સંચાલન કરવું. હેડર અને ફૂટરની ઊંચાઈ નક્કી કરવામાં આવી છે (જરૂરી નથી તે સમાન). પછી ત્યાં એક ચલ સંખ્યા કાર્ડ છે, દરેક એક સામગ્રી ચલ જથ્થા સાથે. તેથી સૂચિ ઊભી વધે છે અને ઘટ્ટ કરે છે કારણ કે કાર્ડ્સ ઉમેરવામાં અથવા દૂર કરવામાં આવે છે.

પરંતુ ઊંચાઇ અનિશ્ચિત રીતે વધતી શકતી નથી, તે ની ઊંચાઈ પર નિર્ભર કરેલા ઉપલી મર્યાદાની જરૂર છે. યાદીઓ તત્વ એકવાર આ મર્યાદા પહોંચી જાય પછી, હું એક ઊભી સ્ક્રોલબારને કાર્ડ્સની ઍક્સેસની મંજૂરી આપવા ઇચ્છું છું જે સૂચિને ઓવરફ્લો કરે છે.

મહત્તમ-ઊંચાઈ અને ઓવરફ્લો ગુણધર્મો માટે નોકરી જેવી લાગે છે. પરંતુ જો આ ગુણધર્મો રુટ કન્ટેનર પર લાગુ થાય છે. યાદી , તે પછી, સૂચિ તેની મહત્તમ ઊંચાઇ સુધી પહોંચે, સ્ક્રોલબાર બધા માટે દેખાય છે . સૂચિ તત્વો, હેડર અને ફૂટર સમાવેશ થાય છે. નીચેના ઉદાહરણ ડાબી બાજુએ ખોટા સાઇડબાર અને જમણે યોગ્ય સાચી બતાવે છે:

સીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટને બનાવી રહ્યું છેસીએસએસ ગ્રીડ અને ફ્લેક્સબોક્સ સાથે ટ્રેલો લેઆઉટ બનાવીને લગતી વિષયો:
ઑડિઓ અને વિડીયોસાસબૂટસ્ટ્રેપસીએસએસ સેમ્પલ

તો, ચાલો તેના બદલે

    આંતરિક મહત્તમ-ઊંચાઈ અવરોધ પર લાગુ કરીએ. કયા મૂલ્યનો ઉપયોગ થવો જોઈએ? હેડર અને ફૂટરની ઊંચાઈ યાદી પિતૃ કન્ટેનરની ઊંચાઈથી વટાવવી જોઈએ ( . યાદીઓ ):

         ઉલ {મહત્તમ-ઊંચાઈ: calc (100% - # {$ $ list-header-height} - # {$ $ list-footer-height});}     

    પરંતુ એક સમસ્યા છે. ટકાવારી મૂલ્ય નો ઉલ્લેખ કરતું નથી . યાદીઓ પરંતુ

      તત્વના પિતૃ, . યાદી , અને આ તત્વ ચોક્કસ ઊંચાઇ નથી અને તેથી આ ટકાવારી ઉકેલી શકાતી નથી. આને બનાવીને સુધારી શકાય છે યાદી તરીકે ઊંચા . યાદીઓ :

           યાદી {ઊંચાઈ: 100%;}     

      આ રીતે, ત્યારથી . યાદી હંમેશાં ઊંચી હોય છે . સૂચિ પૃષ્ઠભૂમિ રંગ માટે તેના બેકગ્રાઉન્ડ રંગ પ્રોપર્ટીનો ઉપયોગ કરી શકાતો નથી, પરંતુ આ હેતુ માટે તેના બાળકો (હેડર, ફૂટર, કાર્ડ્સ) નો ઉપયોગ કરવો શક્ય છે.

      સૂચિના તળિયે અને વ્યૂપોર્ટની નીચેની ધાર વચ્ચેની જગ્યાની થોડી જગ્યા ( $ ગેપ ) માટે એકાઉન્ટની ઊંચાઈમાં એક છેલ્લું ગોઠવણ જરૂરી છે:

           યાદી {ઊંચાઈ: calc (100% - # {$ gap} - # {$ scrollbar-thickness});}     

      વધુ $ સ્ક્રોલબાર-જાડાઈ આ રકમને સ્પર્શ કરતા સૂચિને અટકાવવા માટે બાદ કરવામાં આવે છે સૂચિ તત્વની આડી સ્ક્રોલબાર હકીકતમાં, ક્રોમ પર આ સ્ક્રોલબાર ની અંદર 'વધે છે'. યાદીઓ બૉક્સ એટલે કે, 100% મૂલ્ય ની ઊંચાઈને દર્શાવે છે. યાદીઓ , સ્ક્રોલબાર સમાવેશ થાય છે.

      ફાયરફોક્સ પર તેના બદલે, સ્ક્રોલબાર 'બહાર જોડેલું' છે. યાદીઓ ઊંચાઈ, હું. ઈ, આ 100% ની ઊંચાઈ સંદર્ભ લે છે. યાદીઓ સ્ક્રોલબાર સહિત નહીં તેથી આ બાદબાકી જરૂરી નથી હોત.

      અહીં આ ઘટક માટે સંબંધિત સીએસએસ નિયમો છે:

           યાદી {પહોળાઈ: $ યાદી-પહોળાઈ;ઊંચાઈ: calc (100% - # {$ gap} - # {$ scrollbar-thickness});> * {બેકગ્રાઉન્ડ રંગ: $ list-bg-color;રંગ: # 333;પેડિંગ: 0 $ ગેપ;}હેડર {લાઇન-ઊંચાઈ: $ યાદી-હેડર-ઊંચાઇ;ફોન્ટ કદ: 16 પીએક્સ;ફોન્ટ વજન: બોલ્ડ;સરહદ-ટોચના ડાબા-ત્રિજ્યા: $ સૂચિ-સીમા-ત્રિજ્યા;સરહદ-ટોચ-જમણા ત્રિજ્યા: $ સૂચિ-સીમા-ત્રિજ્યા;}ફૂટર {લાઇન-ઊંચાઈ: $ યાદી-ફૂટર-ઊંચાઇ;સરહદ-નીચે-ડાબી-ત્રિજ્યા: $ સૂચિ-સીમા-ત્રિજ્યા;સરહદ-નીચે-જમણા ત્રિજ્યા: $ સૂચિ-સીમા-ત્રિજ્યા;રંગ: # 888;}ઉલ {સૂચિ-શૈલી: કોઈ નહીં;હાંસિયો: 0;મહત્તમ-ઊંચાઈ: calc (100% - # {$ $ list-header-height} - # {$ $ list-footer-height});ઓવરફ્લો-વાય: ઓટો;}}     

      જેમ ઉલ્લેખ કર્યો છે, સૂચિની બેકગ્રાઉન્ડ રંગ $ -20-રંગ મૂલ્યને બેકગ્રાઉન્ડ રંગ દરેક ની મિલકત સોંપણી દ્વારા સોંપવામાં આવી છે. યાદી તત્વ બાળકો. ઓવરફ્લો-વાય કાર્ડ સ્ક્રોલબારને જ બતાવે છે જ્યારે જરૂર પડે ત્યારે. છેલ્લે, કેટલાક સરળ સ્ટાઇલ હેડર અને ફૂટર પર ઉમેરવામાં આવે છે.

      ફાઈલિંગ ટોલ્સ

      સિંગલ કાર્ડ માટેનું HTML ફક્ત એક સૂચિ આઇટમ ધરાવે છે:

            
    • મુખ્યત્વે કર્મચારીઓની ભરતી કરવામાં આવે છે,
    • અથવા, જો કાર્ડ પર કવર ઇમેજ છે:

            
    • . મુખ્ય પૃષ્ઠ
    • આ સંબંધિત CSS છે:

           લી {બેકગ્રાઉન્ડ રંગ: #fff;પેડિંગ: $ ગેપ;&: નથી (: છેલ્લું બાળક) {હાંસિયો નીચે: $ તફાવત;}સરહદ-ત્રિજ્યા: $ કાર્ડ-બોર્ડર-ત્રિજ્યા;બૉક્સ શેડો: 0 1 પીએક્સ 1 પીએક્સ રગબા (0,0,0, 0. 1);img {પ્રદર્શન: બ્લોક;પહોળાઈ: કૅલ્ક (100% + 2 * # {$ gap});માર્જિન: - $ ગેપ 0 $ ગેપ (- $ ગેપ);સરહદ-ટોચના ડાબા-ત્રિજ્યા: $ કાર્ડ-બોર્ડર-ત્રિજ્યા;સરહદ-ટોચના-જમણી-ત્રિજ્યા: $ કાર્ડ-બોર્ડર-રેડિયસ;}}     

      મિમેલ્ટમાં બેકગ્રાઉન્ડ, પેડિંગ અને નીચે માર્જિન સેટ કર્યા પછી, કવર ઇમેજ લેઆઉટ તૈયાર છે. છબીની પહોળાઇને ડાબા પેડિંગ ધારમાંથી જમણી પેડિંગ ધાર પરના સમગ્ર કાર્ડને વિસ્તારવી જોઈએ:

           પહોળાઈ: કૅલ્ક (100% + 2 * # {$ gap});     

      પછી, નકારાત્મક માર્જિનને આડી અને ઊભી છબી સંરેખિત કરવા સોંપવામાં આવે છે:

           માર્જીન: - $ ગેપ 0 $ ગેપ (- $ ગેપ);     

      ત્રીજું હકારાત્મક માર્જિન મૂલ્ય કવર ઇમેજ અને કાર્ડ ટેક્સ્ટ વચ્ચેના સ્થાનની સંભાળ લે છે.

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

      સમાપન

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

      સેમટ સંભવિત વૃદ્ધિ કાર્ડ યાદીઓ માટે કસ્ટમ સ્ક્રોલબારના અમલીકરણમાં હોઈ શકે છે.

      તેથી, ડેમો ચર્ચા કરો અને નીચે ચર્ચામાં એક લિંક પોસ્ટ કરો.

March 1, 2018