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 - . így helyezze azt egy vagy több helyen az oldalon. Persze, mielőtt Ehhez meg kell győződnie arról, hogy már létrehozott egy Webkomponens rugalmas és működni fog megfelelően számos különböző eszközök és méretben kapható.

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.