Oma koodi komponentissa

Kun Advanced on päällä, voit kirjoittaa komponentille omaa HTML:ää, CSS:ää ja JS:ää.

Missä: Customize with code komponenttipaneelin alalaidassa ja New component välilehdellä Components. Molemmat vaativat Advanced-tilan.

Mallin syntaksi, muuttujat ja actions ovat sivulla Malliviite. Koukut ja CSS:n rajaus ovat sivulla Koukut ja CSS-viite.

#Kolme tapaa tehdä komponentista oma

Kun Own HTML on Off, et muuta HTML:ää. CSS:si ja JS:si tulevat alustan HTML:n päälle. Komponentin valinnat, värit ja sisältö toimivat kuten ennenkin. Kun Own HTML on On, HTML on sinun ja ylläpidät sitä. Start from the standard markup täyttää kentän vakioulkoasun HTML:llä ja kytkee kytkimen päälle.

Tyyli tallentuu teemaluonnokseen ja uusi komponentti sivulle. Molemmat julkaistaan, kun julkaiset. Kauppa ja työtila piirtävät saman koodin.

#Uusi komponentti

New component on välilehden Components alalaidassa. Kun Advanced on pois päältä, siinä on teksti, jonka mukaan painike vaatii Advanced-tilan.

1. Kytke Advanced päälle.
2. Valitse osio, jonka jälkeen uusi tulee. Ilman valintaa se tulee viimeiseksi.
3. Paina New component.
4. Täytä Name.
5. Kirjoita koodi välilehdille HTML, CSS ja JS ja kentät välilehdelle Fields.

BunStack lisää osion Custom component sivulle, valitsee sen ja avaa tarkastelijan. Sama osio on osiokirjastossa. Sitä siirretään, monistetaan ja piilotetaan kuten muita osioita, katso Osiot ja sivut.

Mitä malli tai CSS ei päästä läpi, näkyy punaisena koodin alla kirjoittaessasi. Kun Advanced on pois päältä, tarkastelija näyttää nimen, kentät, kohdat Width, Show on ja Background sekä tekstin Edit in Advanced mode. Osio piirretään kaupassa tavalliseen tapaan.

#Kentät

Kenttien avulla kuka tahansa voi muuttaa komponentin tekstejä, värejä ja tuotteita ilman koodia. Kirjoitat kentät JSON-muodossa välilehdelle Fields. Arvoja muutetaan tarkastelijassa kohdassa WORDS & PICTURES, myös kun Advanced on pois päältä.

[
  { "key": "heading", "type": "text", "label": "Heading" },
  { "key": "items", "type": "list", "label": "Items", "fields": [
    { "key": "name", "type": "text", "label": "Name" },
    { "key": "text", "type": "richtext", "label": "Text" },
    { "key": "colour", "type": "colour", "label": "Colour" },
    { "key": "product", "type": "product", "label": "Product" }
  ] }
]

key on nimi, jonka malli lukee: kirjaimia, numeroita ja _, ensin kirjain. label on nimi tarkastelijassa.

<h2>{{fields.heading}}</h2>
{{#each fields.items}}
<article style="border-top: 3px solid {{colour}}">
  <h3>{{name}}</h3>
  <div data-bs-field-html="items.{{@index}}.text"></div>
  {{#if product}}<a href="{{product.url}}">{{product.title}}</a>{{/if}}
</article>
{{/each}}

• Enintään 20 kenttää, 12 listassa ja 24 kohdetta listassa.
• JSONin virheet näkyvät punaisena kentän alla.
• Save to Your components tallentaa kentät arvoineen. Sivulle lisätty kopio saa arvot.
• Osion Width, Show on ja Background ovat tarkastelijassa kuten jokaisessa osiossa, kohdissa LAYOUT ja LOOK. Katso Leveys ja Tausta.

#Omat komponenttisi

Tarkastelijan alalaidan Save to Your components tallentaa osion workspacen kirjastoon: nimen, HTML:n, CSS:n, JS:n ja kentät. Ilmoituksessa lukee esimerkiksi Saved "Hero video" to Your components. Osio kytketään kirjaston riviin, ja painikkeet vaihtuvat:

• Update "Hero video" korvaa rivin osion sisällöllä. Myöhemmin lisättävät kopiot saavat uuden. Sivuilla jo olevat kopiot eivät muutu.
• Save as new tallentaa uuden rivin. Osio kytketään uuteen riviin.
• Remove from Your components poistaa rivin kirjastosta.

Poista tallennettu komponentti:

1. Paina Remove from Your components.
2. Lue Remove "Hero video" from Your components? Copies already on pages stay. Paina Continue, tai Keep keskeyttääksesi.
3. Kirjoita nimi kenttään, jonka yllä lukee Type Hero video to confirm. Isoilla ja pienillä kirjaimilla ei ole väliä.
4. Paina Remove "Hero video".

Rivi katoaa kirjastosta kaikissa workspacen kaupoissa. Toimintoa ei voi kumota. Sivulla oleva kopio säilyy. Jos joku muu on jo poistanut rivin, kun painat Update, tarkastelijassa kerrotaan siitä, ja yhteys poistetaan. Tallenna silloin uutena.

Tallennettu komponentti näkyy kaikissa workspacen kaupoissa:

• osiokirjastossa rivinä Your components kategorian ALL alla
• välilehdellä Library omana ryhmänään
• ⌘K-paletissa komentona Add "Hero video"

Haku löytää sen nimellä. Sanat your ja components näyttävät kaikki. Napsautus lisää kopion sivulle. Kopio lisätään myös, kun Advanced on pois päältä, mutta koodia voi muuttaa vain Advanced-tilassa.

#Juuri on kaupan

Komponentilla on juuri, jonka kauppa piirtää. Mallisi on juuren sisältö. Ylätunnisteen juuri on [data-bs-header]. Kauppa asettaa juureen tilat [data-bs-transparent], [data-bs-scrolled] ja [data-bs-sticky], myös kun ylätunniste on omaa HTML:ääsi.

Älä kirjoita malliin omaa <header>-elementtiä. Aloita siitä, mitä sen sisään tulee. CSS:si rajataan juureen, ja JS:si saa juuren nimellä root. Kaikki juuret ovat sivulla Koukut ja CSS-viite.

#JS

• JS ajetaan kerran sivun latauksessa, kun sivu on latautunut.
• Se ajetaan jokaisella sivulla, jolla komponentti on, ja komponentin juuri on root.
• Valikkopaneelin juuri on olemassa vain, kun paneeli on auki. Sen JS ajetaan aina, kun paneeli avataan. Sido kuuntelijat juureen root, ei document-objektiin.
• Tuotekortti on sivulla useita kertoja. root on ensimmäinen. Käytä kaikille document.querySelectorAll('[data-bs-card]').
• Virhe kirjataan selaimen konsoliin tyylin nimellä. Virhe ei pysäytä sivua eikä muiden komponenttien JS:ää.
• Kytke JS-kentän yläpuolella oleva Run JS in the builder pois, niin JS:si keskeytyy työtilassa istunnon ajaksi. Kauppa ja Preview (⌘P) ajavat sen silti.

root.querySelectorAll('[data-bs-header-icons] a').forEach((a) => {
  a.addEventListener('mouseenter', () => a.classList.add('is-hot'));
});

Paneelin Code sivukohtainen JS ajetaan samalla tavalla ilman root-juurta. Collection-sivun JS koskee kaikkia kategoriasivuja.

#Rajat

Pidempi koodi katkaistaan varoituksella, joka kertoo kohdan. Virheet ja varoitukset kuvataan sivulla Malliviite.

#Esimerkki: läpinäkyvä ylätunniste ja kuvakkeet

Tavoitteena on täysleveä ylätunniste. Se on läpinäkyvä hero-kuvan päällä valkoisella logolla ja valkoisilla kuvakkeilla. 24 px vierityksen jälkeen se muuttuu yhtenäiseksi. Oikealla on 4 kuvaketta kooltaan 30 px: haku, toivelista, ostoskori ja valikko.

Tee näin komponentin Header komponenttipaneelissa:

1. Lisää etusivulle ensimmäiseksi Image banner, jossa Width on Full ja tumma kuva.
2. Look: valitse Icons + panel.
3. Options: kytke Sticky ja Transparent over hero päälle. Kytke Menu label ja Announcement bar pois.
4. Content: valitse tumma logo kohtaan Logo, korkeus 40. Valitse valkoinen kohtaan Light logo.
5. Tarkista, että Theme › Colours › Header text over hero on valkoinen.
6. Valitse fontit ja peruskoko kohdassa Theme › Typography.

Advanced päälle, Customize with code, Code › CSS:

[data-bs-header] { padding: 16px; }
@media (min-width: 768px) { [data-bs-header] { padding: 32px; } }
[data-bs-header-inner] { max-width: none; }
[data-bs-header-icons] { gap: 16px; }
[data-bs-header-icons] a, [data-bs-header-icons] button { opacity: 1; }
[data-bs-header-icons] svg { width: 30px; height: 30px; stroke-width: 1.6; }

Paina Save as new style ja anna nimeksi "Oma navbar". Se on nyt kohdassa Your header styles kaikissa workspacen kaupoissa. Tyylissä ovat ulkoasu, valinnat, välilehti Design ja CSS. Logot kuuluvat teemaan, ja ne asetetaan kohdassa Content jokaisessa kaupassa.

Sama ylätunniste omana HTML:nä on sivulla Malliviite.