Hogyan lehet használni érzékeny webösszetevőkön ma
Pár évvel ezelőtt, hallottam először az interneten elemek (Web Components). Eleinte nagyon érdekel ez, de amint a hype körülöttük elcsendesedtek, azonnal repült ki a fejemből. De, mint kiderült, a közelmúltban elfogadott egy érdekes lépés, és támogatja ezt a technológiát jelentősen megnőtt. Érzékeny web alkatrészek, különösen a célja, hogy egyszerűsítse a megközelítés reagáló design. Hogy ígéretesnek hangzik!
Íme négy pont, amelyet érdemes olvasmány minden fejlesztő Mielőtt elkezdené alkalmazni ezt a technológiát:
- technológia támogatása;
- Határon böngésző munkát;
- Képes alkalmazkodni a környezethez, a konkrét projekt
- A moduláris megközelítés.
Ebben a cikkben megnézzük mindegyik pontot külön-külön.
Mi az a Web Components?
Tény, hogy ez a technológia a W3 specifikáció, amely lehetővé teszi, hogy a saját HTML-elemeket. Ha csak még nem hallottam róla semmit, akkor tanácsos elolvasni ezt a cikket. mivel egyes kifejezéseket fogom használni, szükség legalább egy alapvető ismereteket.
Miért akarnék használni őket?
Web Components lehetővé teszi, hogy hozzon létre egy egyszer UI-elemet, majd használni bárhol. Ideális projektek, mint például élő stílus kalauz (vagy Styleguide), ahol szeretné, hogy hozzon létre egy könyvtárat egyetlen forrása az igazság minden komponens (ahol valamennyi összetevő esik, csak a saját egyedi magatartási szabályok és a kijelzőt). Ez a megközelítés olyan rövidebb, minimalista kódot, valamint a rendelkezésre álló kész UI-komponensek, linkeket, amelyek Ön vagy a csapat könnyed hozzá a jelenlegi felület.
A másik nagy előnye, hogy a Web komponensek - ez egy lehetőség, hogy töltse meg a készüléket, és ossza meg a többi fejlesztő / tulajdonos a telek. Tény, hogy a felhasználó csak az maradt hátra, hogy adjunk az import utasítást a honlapján:
És majd az egyéni tag elem, amely úgy definiálható egy adott Webkomponens. Így a felhasználó hozzáadhat a weboldalt, mint egyéni web rész, ahogy akar. Például a jegyzési ív, akkor a tag -
Mozgó elmélettől a gyakorlatig
Úgy vélem, hogy a legjobb módja annak, hogy semmit megmagyarázni -, hogy megmutassa a példamutatás. Szóval folytatom a történet lesz a munkaköri leírás a fenti jegyzési íven. Ez egy kiváló példa a felhasználói felület, amely nem sokat változott a különböző helyszínek és megvalósítások.
Például, hogy olyan formában, hogy azt korábban létrehozott:
Bent a sablont hoztam létre néhány alapvető elrendezés a formában:
Saját jelölés és stílusok rejtve web komponens felhasználásával által kínált lehetőségeket árnyék DOM specifikáció. Ez a módszer a szervező valamilyen beágyazás, ami alkalmat ad arra, hogy használja a címkét és a bemeneti szelektor szabadon, félelem nélkül befolyásolja a stílus szülői honlapján.
Az egyértelműség és a rövidség kedvéért nem írjuk le az írási stílusok eltérő I megjelenítéséhez használt jelölésekkel. Régebben egy kombinációja a tulajdonságai float: left és a kijelző: táblázat ezt a felületet, és a törés elkerülése érdekében minden szélessége.
Ennek során a lecke, fogom használni screenshotok, hogy bemutassa a munka:
Most, hogy kész vagyunk, nézzük meg néhány technikát, hogy elérjék az alkalmazkodóképesség.
média kérdéseire
A klasszikus megközelítés, amelyet mindannyian ismerünk és szeretünk, ahogy a jó cselekedetek és érzékeny webösszetevőkön. Használhatja médialekérdezések a sablon, ha azt szeretné, hogy bármilyen alapértelmezett töréspont. Másrészt, akkor használja a „horog” (például, ami osztályok), és alkalmazza őket a szülő konténer, miáltal a felhasználó számára, hogy saját döntést. A mi esetünkben, minden amire szükségünk van -, hogy hozzon létre egy referenciapontot, elérve, hogy megszünteti a float tulajdonság a gyermekek és kérte őket, hogy a szélessége 100% -os.
Azonban néhány médialekérdezések nem lesz elég.
Ez azért van, mert a kijelző nem látja a saját határain - fogalma sincs összefüggésben.
De állj! Az egész pont kijelzők a baj, hogy illessze be, hogy bármely helyen a helyszínen, ahol lesz könnyű együtt dolgozni? Nos, nyilvánvaló, hogy a web komponens hoztuk létre korábban, így nem fog csinálni, de van néhány technikát, hogy tudjuk használni, hogy e cél elérése érdekében.
Flexbox-hack
Ismét az alábbi kódot tartalmaz csak a stílusokat, hogy megjelenítéséhez használt jelölésekkel.
Beállítása szülőtároló kijelző: flex és flex-pakolás: csomagolja. leányvállalatok .form__item vystroyutsya egy-egy, a blokk-blokk, de még meg kell határozni néhány szabályt, így ha a tartály túl kicsi, a gyerekek leugranak egymás alatt.
Belül .form__item szoktuk rövid a felsorolt tulajdonságok - flex: 1 0 320. amely bővíthető, mint: flex-nőnek: 1. Flex-zsugorodó: 0. Flex-alapon: 320. Telepítése flex-pakolás: csomagolja. megállapítottuk, hogy a szélessége mi elem kevesebb, mint amennyit a 320, miközben pontosítja a flex tulajdon. engedjük, hogy a tag növekszik, és elfoglalják a maradék helyet a sorban.
Ugyanezt a megközelítést használtam bemenet és címke elemek. Az összérték eléri, hogy a flex 320, ami azt jelenti, hogy nem lesznek megfelelő módon jelenik meg, és egy kisebb tároló.
Lássuk, mi okozta a változásokat, amelyeket minket:
Sokkal jobb! Azonban nem ez az egyetlen módja annak, hogy megoldja ezt a problémát, akkor számtalan.
Lekérdezések kapcsolatos webes elemek
Az az elképzelés, a lekérdezések vonatkozó egyes elemeit - ez az, ami lehetővé teszi, hogy versenyez a funkcionalitás médialekérdezéseiben az interneten elem szint - ami nagyon kényelmes, ha olyan érzékeny webösszetevőkön. Egyszerűen fogalmazva, képzeld el, ha lehetősége volt, hogy írjon valamit a hasonlóság ezen a css:
Ez nagyon közel van ahhoz, amit tehetünk ezzel a technológiával. Elég ígéretes, nem?
Azonban, elkerülve végtelen hurkok, ez a technológia nem áll rendelkezésre natívan a böngésző. De még mindig elég érdekes plugins ezekre a célokra.
A kombinált egy ilyen plug-in egy kis részlet CSS-kódot, elértük ugyanazt az eredményt, mint a flexbox.
Az egyik csodálatos dolog is kínálunk ügyfeleink reagáló web komponens - egy API tulajdonít az elem. Például beállíthat egy attribútum nevezett elrendezés. méreteit meghatározó összetevő ebben az összefüggésben :. „kis” és „nagy” És akkor lehet használni, a következők szerint:
Így alkotunk egy horog, amely meghatározza a további CSS-tulajdonságok.
Árnyékban DOM leírás tartályt tartalmaz, amely egy elem, meghatározása a következő: host. Egy példa nézne ki:
A fent említett közelítések lehet használni, hogy bármilyen webes felhasználói felület, de különösen jó létrehozására reagáló webösszetevőkön.
Ha még nem próbálta használni webösszetevőkön, én nagyon ajánlom ezt. Sajnos az összes lehetőséget a ez a technológia jelenleg csak a Chrome és az Opera, de más böngészőt gyártók nem ül tétlen, és széles körű támogatást ez a technológia nem messze.