() translation by (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.
1 |
<div class="wrap"> |
2 |
|
3 |
<main>
|
4 |
|
5 |
<aside>
|
6 |
<h1>Sidebar</h1> |
7 |
<p>
|
8 |
lipsum... |
9 |
</p>
|
10 |
</aside>
|
11 |
|
12 |
<article>
|
13 |
<h1>Content</h1> |
14 |
<p>
|
15 |
lipsum... |
16 |
</p>
|
17 |
</article>
|
18 |
|
19 |
</main>
|
20 |
|
21 |
</div>
|
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.
1 |
html, body { |
2 |
height: 100%; |
3 |
}
|
4 |
|
5 |
.wrap { |
6 |
height: 100vh; |
7 |
display: flex; |
8 |
}
|
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.
1 |
main { |
2 |
flex: 1; |
3 |
display: flex; |
4 |
}
|
5 |
|
6 |
aside, article { |
7 |
overflow-y: scroll; |
8 |
padding: 2em; |
9 |
}
|
10 |
|
11 |
aside { |
12 |
flex: 1; |
13 |
}
|
14 |
|
15 |
article { |
16 |
flex: 2; |
17 |
}
|
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.
1 |
@media (max-width: 800px) { |
2 |
main { |
3 |
flex-direction: column; |
4 |
}
|
5 |
}
|
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?
