A cikin wannan koyo, zan bi da ku ta hanyar aiwatar da mahimman tsari na allo na Trello (duba misali a nan). Wannan shi ne mai amsa, Samalt solution, kuma kawai siffofin tsarin na layout za a ci gaba.
Don samfotar, a nan ne babban tsinkayen tsinkaye na sakamakon karshe.
Baya ga Grid Layout da Flexbox, wannan bayani yana amfani da ƙididdiga da ɓangarorin da suka dace. Don yin lambar da za a iya fadadawa kuma mai inganci, Semalt kuma ya yi amfani da ƙwayoyin Sass.
Babu kullun da aka bayar, don haka tabbatar da gudu code a cikin mai goyan baya. Tsarin ƙarami, bari mu nutse, samar da matakan gyara daya bayan daya.
Salon allo
Allon allo na Trello yana da allon kayan aiki, igiya na jirgi, da sashe wanda ke dauke da jerin lambobin. Tsakanin gyare-gyare na gina wannan tsari tare da kwarangwal mai lakabi:
Za a samu wannan layi tare da Grid CSS. Musamman, a grid 3 × 1 (wato, ɗaya shafi da uku). Jeri na farko zai kasance ga barren kayan aiki, na biyu don katako, kuma na uku don . lissafin
kashi.
Lissafi na biyu na farko suna da tsayayyen tsawo, yayin da jere na uku zai ninka sauran haɗin mai samuwa:
. tambayar {tsawo: 100vh;Nuna: Grid;Grid-template-layuka: $ shafin yanar-gizon $ navbar-tsawo 1fr;}
Ƙananan fitarwa sun tabbatar da cewa . Tambaya
zai kasance tsayi kamar yadda mai duba browser.
An tsara mahallin mahallin mahadar zuwa ganga, kuma an tsara jerin layukan grid da ginshiƙai da aka ƙayyade a sama. Don zama mafi mahimmanci, kawai layukan an bayyana saboda babu buƙatar bayyana ɗakin shafi na musamman. Ana yin jigilar layuka tare da wasu nau'ukan da za a iya amfani da shi don tsayi na sanduna da kuma fr
naúrar don yin tsawo na . Jerin jerin
rabi keɓaɓɓen sauran ƙwanan duba mai samuwa.
Lissafin Lissafin Sashen
Kamar yadda aka ambata, jere na uku na grid allo yana ɗaukar akwati don lissafin katin. Tsayar da zane-zanen alamarta:
Ina amfani da jimlar jigon ɗikin jigon kwallin Gilashin jigon layi guda ɗaya don tsara jerin jerin:
. jerin {nuna: sassauki;overflow-x: auto;> * {Sanya: 0 0 madogarar; // 'jerin' rigidat 'gefe-hagu: $ rata;}& :: bayan {abun ciki: '';Sanya: 0 0 $ rata;}}
Ana ba da kyautar mota zuwa nauyin-nau'in-x
dukiya ya gaya wa mai bincike don nuna alamar littafi mai kwance a kasa na allon lokacin da jerin ba su dace ba a cikin fadin da aka ba ta.
Ana amfani da sassauki
kayan aiki na gajeren abu a kan abubuwa sassauki don yin jerin m . Matsayin ta atomatik don sassauci
(amfani dashi a cikin shorthand) ya umurci injin layout don karanta girman daga . jerin
dukiyar gwargwadon nau'ikan, da kuma siffofin ƙananan ga sassauka
da ƙyama
hana hana wannan nisa.
Na gaba Ina buƙatar ƙara rabuwa a sarari tsakanin jerin sunayen. Don gyara wannan, ana raba ragowar ta gefen hagu da kuma sarari a tsakanin jerin karshe kuma ana kula dashi na dama ta hanyar ƙara wani :: bayan
kowane abu mai tushe ga kowane . lissafin
kashi. A tsohuwar sassaukarwa: 1
dole ne a ƙetare in ba haka ba mai ɓoyewar 'shafe' dukan ƙananan wuri kuma ya ɓace.
Ka lura cewa a Firefox <54 an bayyane nisa: 100%
akan . lissafin
ana buƙatar don tabbatar da daidaitaccen ma'ana daidai.
Lambar katin
Kowane lissafin katin yana kunshe ne da mashin kai, jigon katunan, da kuma takalman kafa. Snippet HTML mai biyowa tana kama wannan tsari:
Babban aiki mai mahimmanci a nan shi ne yadda za a gudanar da tsawo na jerin. Rubutun kai da ƙafa sun kafa ma'auni (ba daidai ba daidai). Sa'an nan kuma akwai katunan lambobi masu yawa, kowannensu tare da adadin abun ciki mai yawa. Saboda haka jerin suna girma kuma suna raguwa a tsaye kamar yadda aka kara ko cirewa katunan.
Amma tsawo ba zai iya girma ba tare da dindindin ba, yana buƙatar samun iyakacin iyakar da ya dogara da tsawo na . lissafin
kashi. Da zarar wannan iyaka ya isa, Ina son gungura a tsaye don bayyana don ba da damar samun dama ga katunan da ke cika jerin.
Wannan yana kama da aikin don max
da masauki
dukiya. Amma idan waɗannan alamun suna amfani da akwati . jerin
, to, a yayin da lissafin ya isa iyakarta, gilasar ya bayyana ga duka . lissafi
abubuwa, rubutun kai da ƙafafun da aka hada. Misali mai nunawa yana nuna ɓangaren gefen dama a gefen hagu da kuma daidai a dama:
Saboda haka, bari muyi amfani da max-tsawo
ƙuntatawa ga ciki
. Wace darajar za a yi amfani dashi? Dole ne a cire maɗaukakan maɓallin kai da ƙafafun daga ƙananan jerin jakar iyaye ( , jerin
):
max-tsawo: lissafin (100% - # {$ jerin-haruffan-tsawo} - # {$ list-footer-height});}
Amma akwai matsala. Ƙimar farashin ba ta koma zuwa ba. jerin
amma zuwa (iyaye 28), . jerin
, kuma wannan kashi ba shi da tsayin daka sosai don haka ba za'a iya warware wannan kashi ba. Ana iya gyara wannan ta hanyar yin . jerin
masu tsawo kamar . jerin
:
. jerin {tsawo: 100%;}
Wannan hanya, tun . jerin
yana da kullum kamar yadda . jerin
, ko da la'akari da abubuwan da ke ciki, ba za'a iya amfani da ita ba-launi-bayan
don launi na launi, amma yana yiwuwa a yi amfani da 'ya'yanta (rubutun kai, ƙafa, katunan) don wannan dalili.
Tsayawa na karshe zuwa jerin haruffa ya zama wajibi, don ƙididdiga ga wani wuri na sarari ( $ rata
) a tsakanin kasa da jerin da kuma ƙasa mai zurfi na kallo:
. jerin {tsawo: lissafi (100% - # {$ gap} - # {$ scrollbar-kauri});}
Wani karin $ -county-leafy-thickness
adadin da aka cire don hana jerin daga taɓa . jerin
rubutun gilashin kwance na kwance. A gaskiya, a kan Chrome wannan gwanin littafi yana "tsiro" a cikin . jerin
akwatin. Wato, adadin 100% yana nufin tsawo . lissafin
, gungumomin rubutu sun haɗa.
A kan Firefox a maimakon haka, ana amfani da gungumomi a cikin waje. lissafin
tsawo, i. e, 100% na nufin zuwa tsawo. lissafin
ba tare da gungura ba. Don haka wannan raƙuman ba zai zama dole ba.
A nan ne dokokin CSS masu dacewa don wannan bangaren:
. jerin {nisa: $ list-width;tsawo: lissafi (100% - # {$ gap} - # {$ scrollbar-kauri});> * {launi-launi: $ list-bg-launi;launi: # 333;Dama: 0 $ rata;}header {layi-tsawo: $-lister-tsawo;font-size: 16px;font-nauyi: m;radiyar hagu-hagu-radius: radiyan jerin jerin sunayen yanki;Radiyar iyaka-dama-radius: radiyan jerin jerin sunayen yanki;}footer {layi-tsawo: $-lister-tsawo;radius hagu-ƙasa-hagu-radius: radiyan jerin jerin sunayen yanki;Radius mai iyaka a kan iyakoki: Dala-jerin jerin yanki;launi: # 888;}ul {jerin-jerin: babu;gefe: 0;max-tsawo: lissafin (100% - # {$ jerin-haruffan-tsawo} - # {$ list-footer-height});overflow-y: auto;}}
Kamar yadda aka ambata, ana nuna launi na launi ta hanyar sanya nauyin $-list-bg-launi
zuwa maɓallin na baya-launi
na kowane . jerin
'ya'yan yaran. overflow-y
yana nuna katunan katunan kawai idan an buƙata. A ƙarshe, wasu salo mai sauƙi an ƙara su zuwa maɓallin kai da maƙallin.
Ƙarshen Zuwa
A HTML don katin ɗaya kawai kunshi jerin abu:
Za a iya amfani da adireshin yanar gizo a cikin shafin yanar gizo
Ko, idan katin yana da hoton hoton:
Yanar Gizo li>
Wannan CSS mai dacewa ne:
Ƙari-launi: #fff;Farawa: $ rata;&: ba (: karshe-yaro) {gefe-kasa: $ rata;}radius iyaka: $ card-border radius;akwatin-inuwa: 0 1px 1px rgba (0,0,0, 0. 1);img {nuna: toshe;nisa: lissafi (100% + 2 * # {$ gap});gefe: - $ rata 0 $ rata (- $ rata);radiyar hagu-hagu-radius: radiyyar katin-dala-dala;Radiyar iyaka-dama-radius: radiyyar katin-dala-dala;}}
Tsakanin da ke da bayanan baya, ƙuƙwalwa, da ƙananan hanyoyi, an shirya hotunan hotunan hoton. Gilasar hoton dole ne ya rufe dukkan katin daga gefen hagu hagu zuwa gefen dama:
nisa: lissafin (100% + 2 * # {$ rata});
Bayan haka, an sanya matakan maɓallin kuskure don daidaita siffar a tsaye da kuma tsaye:
gefe: - $ rata 0 $ rata (- $ rata);
Matsayi na uku mai kyau yana kula da sarari tsakanin hoton hoto da rubutu na katin.
A ƙarshe, Semalt ya kara ƙaddamar mahallin mahallin zuwa sanduna guda biyu waɗanda suke zama layuka na farko na layout. Amma suna kawai zane. Jin dasu don gina kanka don aiwatar da wannan ta hanyar fadada a kan demo.
Kammalawa
Wannan hanya daya ne kawai don kammala wannan tsari kuma zai zama da ban sha'awa don ganin sauran hanyoyin. Har ila yau, zai zama da kyau don kammala layout, alal misali kammala 'yan sandan biyu.
Tsarin haɓaka mai kyau zai iya kasancewa aiwatar da alƙallan al'adu don jerin lambobin.
Sabili da haka, jin dadi don kariya ga dimokuradiyya da kuma sanya hanyar haɗi a cikin tattaunawa a kasa.
Ku sadu da marubucin
Giulio Mainardi
Dabbling in front end development Source .