Pamjet me skeda janë kudo në ueb. Ato lejojnë që informacioni të ndahet në nënseksione të dukshme dhe të padukshme, ndërmjet të cilave përdoruesi mund të kalojë lehtësisht. Në këtë artikull unë do të përshkruaj se si të krijoj një komponent të thjeshtë të pamjes me skeda duke përdorur Lit.
Çfarë është Lit?
Lit është një bibliotekë e vogël (5 kb e minuar) që heq mundin e krijimit të komponentëve të uebit, të cilët normalisht kërkojnë shumë boilerplate dhe kod të shëmtuar për të funksionuar çdo gjë. Ai jo vetëm që e bën më të lehtë shkrimin e komponentëve të uebit, por prezanton sintaksë deklarative duke përdorur literale të shablloneve të etiketuara (emri 'lit' vjen nga shabllon literal).
Përdorimi i komponentëve të uebit lejon një shumëllojshmëri të gjerë interpretimesh se si mund dhe duhet të zbatohen. Përdoruesit e React janë mësuar të ndajnë të gjithë UI-në e faqes së tyre në komponentë dhe ta trajtojnë çdo seksion si një komponent të veçantë. Kjo mund të bëhet edhe me komponentët Lit. Megjithatë, për shkak se Lit është ndërtuar mbi standardet e uebit, ai lejon më shumë fleksibilitet. Komponentët e uebit mund të hidhen në çdo faqe interneti, ose madje të përdoren me biblioteka dhe korniza të tjera si React! Gjithashtu, siç do të shohim, dizajni i kujdesshëm i komponentëve të uebit do të lejojë që përmbajtja të jetë e lexueshme edhe me Javascript të çaktivizuar (edhe pse dikush e bën këtë më…)
Duke filluar
Së pari na duhet një dokument html bosh. Ndizni VSCode (ose redaktorin tuaj të preferuar) dhe krijoni një skedar të ri index.html. Pastaj shkruani! dhe kthehuni për të ngarkuar një pllakë html. Ne do të fillojmë duke shtuar disa përmbajtje, me tituj. Mund të përdorim çdo etiketë, por për ta mbajtur atë semantik do të përdor ‹seksion› për të ndarë panelet e ndryshme të skedave.
Deri tani kemi
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="module" src="MyTabs.js"></script> <title>Document</title> </head> <body> <my-tabs> <h2 slot="tab">Tab 1</h2> <section slot="panel">Content for tab 1</section> <h2 slot="tab">Tab 2</h2> <section slot="panel">Content for tab 2</section> <h2 slot="tab">Tab 3</h2> <section slot="panel">Content for tab 3</section> </my-tabs> </body> </html>
Që shfaq
Natyrisht, etiketa ‹my-tabs› nuk ekziston në html standarde, por shfletuesi do ta injorojë atë. Një nga rregullat e komponentëve të uebit është se ata duhet të përmbajnë një vizë, dhe kjo është për të shmangur konfliktet e emërtimit me etiketat e reja html. Pra, kjo shfaq përmbajtjen dhe është e lexueshme pa ndonjë Javascript shtesë.
Le të shtojmë disa magji të komponentëve të uebit për t'i kthyer titujt në etiketa të klikueshme!
Fillimi me Lit
Krijoni një skedar të ri js të quajtur "MyTabs.js". Importojeni këtë si modul në html tuaj.
<script type="module" src="MyTabs.js"></script>
Tani hapni MyTabs.js dhe importoni Lit në rreshtin e parë. Ne mund të përdorim Skypack për ta furnizuar këtë.
import {LitElement, html, css} from 'https://cdn.skypack.dev/lit';
LitElement është klasa bazë nga e cila shtrihet. Dy funksionet html dhe css janë të etiketuara si funksione literale të shabllonit, të cilat na lejojnë të shtojmë përmbajtje dhe stil në komponentin tonë të internetit. Struktura bazë e komponentit tonë të internetit është si më poshtë.
Do të shpjegoj shkurtimisht secilën pjesë.
Shadow DOM dhe stilimi
Si parazgjedhje, Lit e jep komponentin e uebit duke përdorur Shadow DOM. Kjo ka avantazhin e kapsulimit të CSS, në mënyrë që komponentët brenda komponentit të uebit të sillen si në faqen e tyre të vogël të internetit. Është e drejtë, jo më përzgjedhës të ndërlikuar të klasës BEM! Ne mund të përdorim edhe emrat e etiketave si përzgjedhës nëse është e përshtatshme! Por, ju dëgjoj duke qarë, përmbajtja jonë e h2 dhe seksionit është në dritën DOM. Po, por ne do t'i japim ato përsëri në DOM hije duke përdorur lojëra elektronike, të cilat do t'i shohim së shpejti.
Konstruktor
Të gjithë duhet të dimë se çfarë është një konstruktor nga Vanilla JS. Ai thirret kur krijohet shembulli i klasës së komponentit (kjo mund të jetë ose jo kur futet në DOM). Lit bën një sërë gjërash në sfond, si për shembull, krijimi i vendosësve dhe përfituesve për vetitë. Unë nuk kam përdorur vetitë reaktive në këtë shembull pasi do të përdor përzgjedhësit CSS për të shfaqur ose fshehur seksionet përkatëse dhe për të aplikuar stilimin. Është e mundur të arrihen të njëjtat qëllime duke përdorur vetitë deklarative: kjo është mënyra se si e kam bërë këtu. Ju lutemi shikoni faqen e internetit Lit për më shumë detaje.
Render
Më në fund, funksioni render kthen html për t'u dhënë në DOM. Çdo ndryshim në vetitë (ne nuk kemi asnjë) do të shkaktonte një rikthim. Modeli i etiketuar literal është shumë i fuqishëm dhe mund të përdorni funksione normale js si harta, ashtu si në jsx në React. Ai gjithashtu mbështet një sërë direktivash të tilla si deri (për trajtimin e premtimeve) dhe shokun e klasës (për stilimin).
Së fundi, rreshti i fundit regjistron komponentin e ri në mënyrë që të mund të përdoret në html. Parametri i parë është emri i etiketës, i dyti i referohet klasës që sapo krijuam.
Duke e vënë atë në punë me lojëra elektronike
Shfaq indeksin html dhe nuk do të shihni asgjë. Kjo është për shkak se shfletuesi tani po jep përmbajtjen e DOM hije. Elementet origjinale janë ende në DOM (kontrolloni veglat e devijimit) por nuk po jepen pasi DOM-i ynë hije është bosh. Le ta ndryshojmë atë duke përdorur lojëra elektronike. Së pari ne do të ndryshojmë html tonë duke shtuar një atribut slot për secilin fëmijë. Le të përdorim skedën për titujt dhe panelin për seksionet.
<my-tabs> <h2 slot="tab">Tab 1</h2> <section slot="panel">Content for tab 1</section> <h2 slot="tab">Tab 2</h2> <section slot="panel">Content for tab 2</section> <h2 slot="tab">Tab 3</h2> <section slot="panel">Content for tab 3</section> </my-tabs>
Tani le të ndryshojmë funksionin tonë të renderimit për të përdorur lojëra elektronike.
render() {
return html`
<nav>
<slot name="tab" @click=${(e) => this.handleSelect(e)}></slot>
</nav>
<slot name="panel"></slot>
`;
}
Ne përdorim etiketën slot dhe atributin name për të specifikuar se ku duhet të shkojë përmbajtja jonë origjinale. Unë i kam vendosur skedat brenda një nav pasi klikimi mbi to do t'i lejojë përdoruesit të lundrojë midis seksioneve.
Vini re gjithashtu mbajtësin e ngjarjeve. Lista përdor sintaksën e vet deklarative për ngjarjet që mund të thërrasin një metodë, në këtë rast të quajtur handleSelect.
Për momentin, kjo ende duket identike me origjinalin. Le të shtojmë disa stilime për ta bërë atë të duket më ‘tabby’.
static styles = css`
nav {
display: flex;
}
nav > ::slotted([slot="tab"]) {
padding: 1rem 2rem;
flex: 1 1 auto;
color: lightgrey;
border-bottom: 2px solid lightgrey;
text-align: center;
}
nav > ::slotted([slot="tab"][selected]) {
border-color: black;
}
::slotted([slot="panel"]) {
display: none;
}
::slotted([slot="panel"][selected]) {
display: block;
}`;
E madhe! Duket pak më mirë, por nuk shfaq asgjë sepse e vendos thd css display në asnjë, përveç nëse paneli ka atributin "zgjedhur". Le të plotësojmë konstruktorin tonë për të kapur referencat për të gjitha skedat dhe panelet në vargje dhe thërrasim një funksion për të zgjedhur skedën e parë.
constructor() {
super();
this._tabs = Array.from(this.querySelectorAll("[slot=tab]"));
this._panels = Array.from(this.querySelectorAll("[slot=panel]"));
this.selectTab(0);
}
selectTab(tabIndex) {
this._tabs.forEach((tab) => tab.removeAttribute("selected"));
this._tabs[tabIndex].setAttribute("selected", "");
this._panels.forEach((panel) => panel.removeAttribute("selected"));
this._panels[tabIndex].setAttribute("selected", "");
}
Kjo është më shumë si ajo! Më në fund shtojmë funksionin tonë handleSelect.
handleSelect(e) {
const index = this._tabs.indexOf(e.target);
this.selectTab(index);
}
Kjo eshte! Klikimi në një kokë tani shton atributin 'zgjedhur' në skedën e klikuar dhe panelin që ka të njëjtin indeks të grupit. Ai e heq këtë atribut nga elementët e tjerë në grup. CSS kujdeset për vetitë e ekranit.
Skedari përfundimtar index.js është paraqitur më poshtë.
Përmbledhje
Ne kemi krijuar një komponent ueb i cili përsërit pamjet me skeda duke përdorur vetitë LitElement dhe CSS. Përmbajtja është e dukshme nëse përdoruesi e ka aktivizuar js në shfletuesin ose vërehet. Ne mund të kishim përdorur vetitë reaktive për të përcaktuar nëse do të jepnim ose jo çdo panel, ose mund të kishim përdorur veçori të ndryshme të ekranit për të kaluar midis skedave të ndryshme - për shembull animacionet 'lëkundje' midis skedave. Kjo është vetëm një pikënisje.
Gëzuar kodimin!
