Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Hogyan készíts fogékony, görgethető paneleket Flexboxszal

by
Difficulty:IntermediateLength:ShortLanguages:

Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)

Ha kitartottál a ZURB munkával amit az Alapok az Alkalmazásaidhoz-zal csináltál, talán észrevetted, hogy a legtöbb demo sablonuknak nagyon csinos, görgethető panelük van.

Ezek valójában nagyon hihetetlenek-különösen hibrid alkalmazásokhoz. Emlékezz, hogy milyen praktikus kerek voltak, mielőtt kimentek a divatból? Hát, most visszahozhatod ezt a funkcionalitást, de egy fogékony módon.

Némi bóklás után, képes voltam kinyomni az alap funkcionalitásait ezeknek a paneleknek és ez az amit meg fogunk tanulni, hogyan csináljuk újra ma.

1. Kezdjük az elején

Néhány nagyon alap jelöléssel fogunk kezdeni. A legfontosabb rész egy csomagoló konténer, hogy becsomagoljuk az egész oldaladat.

2. CSS

A dolgok érdekessé válnak a CSS-ben nagyon gyorsan. Először, akarjuk a html és body kiválasztóinkat, hogy legyenek height:100%. Azért csináljuk ezt, hogy beállítsuk a .wrap elemet amit be fogunk állítani height: 100vh-ra. A vh egységgel azt mondjuk, hogy a néztablak teljes magasságára akarjuk felvinni az alkalmazást , szóval a tartalmazott elemekkel rá lesz erőltetve, hogy gördüljön.

Továbbá beállítjuk a .wrapet, hogy legyen display:flex , szóval hozzáadhatunk gyerek elemeket egy flex ingatlanhoz.

Megjegyzés: A számos szintaxisokra való emlékezés helyett a Flexboxhoz az évek során, próbáld ki az Autoprefixer használatát. Ezután szükséged lesz a W3C speciális szintaxis használatára és ez meg fogja csinálni a támogatás maradék részét annyi böngésző felé amennyi lehetséges.

3. Rugalmassá válás

Most itt van nekünk ez a "héj" beállítás amibe elkezdhetünk stílizálni nagyon alapvető, rugalmas elemeket. Az egyetlen trükk, hogy megbizonyosodj ezek a gyerek elemek beállításáról overflow-y: scroll-ra, hogy érvényesítesz egy görgetősávot.

4. Fogékonnyá válás

Kerüljünk egy lépéssel közelebb és tegyük az oldalunkat fogékonnyá az oldalsáv felhalmozásával a tartalom terület tetején kisebb eszközöknek. Ez olyan könnyű, mint egy CSS szabály hozzáadása egy média lekérdezésen belül.

Következtetés

Ezeknek a lépéseknek elégnek kell lenniük, hogy elindítsanak ennek a technikának a használatán a weboldalaidon keresztül. Most már tudom hogyan kell csinálni, megkeresem az összes fajtáját a helyeknek betenni ezeket a görgethető paneleket.

Hogy lásd ezt akcióban működni, nézd meg a demót Codepenen. Továbbá, nézz rá a nem hivatalos Stylus újratervezésre amit építettem ennek a technikának a használatával.

Hogy látod a használatát?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.