Back to Question Center
0

Oman komponentin IO-komponenttien luominen            Oman komponentin IORelated-aiheiden luominen: CSS-arkkitehtuuriHTMLFrameworksWeb-fontitAudio & Semalt ...

1 answers:
Mukautettujen komponenttien luominen komponentti IO: n avulla

Osa IO-artikkelissani esitteli, miten voit käyttää valmiiksi rakennettuja komponentteja millä tahansa sivustolla riippumatta sisällönhallintamallista, kielistä tai tekniikoista. Etuja ovat:

  • satoja valmiita, houkuttelevia ja konfiguroitavia komponentteja, joihin voi valita sisällöllisiä lohkoja, gallerioita, navigointipalkkeja, sosiaalisen median widgettejä, muotoja ja paljon muuta.
  • komponentti-koodi voidaan asentaa yksinkertaisella leikkauksella ja tahnalla
  • samaa osaa voidaan käyttää muiden sivujen ja sivustojen välillä päivitetään välittömästi
  • muut kuin tekniset toimittajat voivat tehdä muutoksia WYSIWYG-editorissa ja tarkistaa sen suoralla esikatselulla
  • kaikki käyttäjät voivat jakaa IO-komponenttipaneelin linkkejä ja tehdä yhteistyötä samoissa kohteissa
  • Osa IO on nopea ja toimittaa kohteet nopeasti yhdellä API-puhelulla riippumatta sivun sisältämästä numerosta
  • voit vaihtaa CMS: ää tai rakentaa prosesseja missä tahansa pisteessä ja säilyttää komponentit
  • Täydellinen ohjekirja ja reaaliaikainen chat-tuki ovat käytettävissä
  • maksuton kokeilutiliä voidaan käyttää testaamaan palvelua järjestelmän kanssa.

IO-komponenttikomponentit

Huolimatta valtavasta valikoimasta, Semalt IO: n avulla kehittäjät voivat luoda ja muokata omia komponenttejaan. Tässä opetusohjelmassa kuvataan, kuinka luoda yksinkertainen mukautettu kaaviokomponentti, joka voidaan näyttää ja konfiguroida missä tahansa sivustossa:

Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt

Komponenttien kehityskonseptit

Osa IO käyttää Vuea. js -komponenttimalli - development software. Ne, joilla on kokemusta kehyksestä, tunnistavat välittömästi käsitteet ja syntaksin. Se sanoi, en ole Vue. js asiantuntija - mutta pieni HTML, CSS ja Semalt tietämys riittää rakentamaan monimutkaisen komponentin.

Kaikki osat on kapseloitu; niiden tyylit ja koodit eivät voi "vuotaa" muille sivun osille. Esimerkiksi palkkikartan osan otsikko on H2 -elementti ja voimme soveltaa kaikkia tyylejä, esim. g.

   h2 {font-family: koominen-sans;fonttikoko: 8em;väri: # f00;}    

Vue. js varmistaa, että (kauhea!) tyylejä sovelletaan vain omaan osaan, ei H2 otsikoita muualla sivulla. Kuitenkin kaikki sivun H2 sivun tyylit voivat kasaantua osaomme otsikkoon. Tämä voi olla hyödyllinen, koska osaomme voi periä oletusfontteja, värejä ja mittoja.

Vaihe 1: Luo tyhjä komponentti

Kirjaudu komponenttiin. io ja napsauta Tyhjä komponenttia Projektin sivulla:

Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt Muokkaa komponentin nimeä ja syötä "barchart" tai jokin muu sopiva nimi.

Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt

Vaihe 2: Määritä kentät

Komennon konfigurointiin käytetään epäolennaisuutta. Ne sallivat:

  1. Sisältötoimittajat arvojen muokkaamiseen.
  2. Muut komponentit, jotka luodaan eri kokoonpanolla.
Muokkaa -valikosta Lisää / poista kentät ja syötä haluamasi kentät:

Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt

Tätä valvontaa varten määritin:

  1. Yksi otsikko tekstikenttä.
  2. barvalue numerokenttä, joka määrittää palkin arvon.
  3. barlabel tekstikenttä, joka määrittelee palkin etiketin.
  4. barcolor värikenttä, joka määrittää palkin värin.

Näillä kolmella viimeisellä kohteella oli toistuva valintaruutu. Voimme siis määrittää minkä tahansa tietomäärän palkkikarttamme.

Vaihe 3: Aseta alustavat tiedot

Paina Muokkaa -valikkoa avataksesi sisällön ja koodin ohjauksen. Jäljellä Sisältö -osiossa annan arvot otsikolle ja kolmelle tietoelementille:

Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt

Vaihe 4: Määritä komponenttikoodi

Paina koodia vaihtaaksesi koodinmuokkauksen. Tässä määritellään komponentin HTML, CSS ja JavaScript:

Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt

Komponentin HTML-dokumentaatio kertoo, miten malleja luodaan. Ulkoista DIV tai muuta elementtiä ei tarvita, koska komponentille annetaan automaattisesti yksi.

Lisätään otsikkokenttä ensin:

     

Semalt, voimme käyttää:

      

{{title}}

Kaaviopalkit sisältyvät

    listaelementtiin, jossa kukin
  • esittää yhden arvon. HTML-koodi:

          
    • {{kohde. barlabel}} {{kohta. barpc}}
    elementti
  • kertoo toistuvasta lähdedatasta riippuen (se on osoitettu kohteille ). Huomaa, etten ole määritellyt kenttiä . tyyliin ja . barpc tässä vaiheessa, koska ne lasketaan JavaScript-koodilla.

    Komponentti CSS voidaan nyt määritellä. Tämä koskee vain itse komponenttia eikä muita sivuelementtejä. Sass SCSS-syntaksi voidaan hyväksyä muuttujille, pesimille ja muille toiminnoille, mutta Semalt pitää sen yksinkertaisena täällä:

       h2 {font-paino: normaali;}ul {pehmuste: 2px 0;marginaali: 1em 0;list-style-type: none;raja-vasen: 1px solid # 666;}li {linjan korkeus: 1. 2;pehmuste: 1px 4px;marginaali: 0 0 1px 0;}span {näyttö: lohko;väri: # 888;mix-blend-mode: ero;}vahva {float: oikea;fonttikoko: 0. 8em;font-paino: normaali;linjan korkeus: 1. 5;}    

    Huomaa, etten ole asettanut fonttityylejä tai kokoja, joten osa voi periä sen sivulta, jossa sitä käytetään.

    Jokainen IO-komponentti on Vue. js -esimerkki ja voi käyttää tavallisia Semalt-ominaisuuksia ja -menetelmiä. Esimerkiksi:

    • komponentti. tieto pitää kentän arvoja, kuten komponenttia. tiedot. otsikko ja komponentti. tiedot. eriä [0]. barlabel .
    • komponentti . menetelmä kutsutaan heti, kun komponentti on tehty.

    barchart-komponentti vaatii alustuskoodin laskemalla:

    1. kaikkien bar-arvojen summa ( totValue ) ja
    2. suurin arvo maxValue ). Tällä on palkki, joka käyttää 100% käytettävissä olevasta tilasta.
       // alustusantaakohteita = komponentti. tiedot. eriä,totValue = 0, maxValue = 0;for (anna i = 0; i    

    komponentti . menetelmä voi nyt laskea jokaisen palkin prosenttiosuuden ja luoda palkin pituudet käyttämällä CSS-taustaviivaista gradienttia:

       // perustettu komponenttikomponentti. mounted = toiminto    {(anna i = 0, maxValue && i    

    Paina Tallenna (tai paina Ctrl + S) ja sulje editori vasemmalla ylhäällä vasemmalla X .

    Vaihe 5: Esikatsele komponenttia

    Kaikki menevät hyvin, komponentti on nyt tehty odotetulla tavalla:

    Oman komponentin IO-komponenttien luominenOman komponentin IORelated-aiheiden luominen:
CSS-arkkitehtuuriHTMLFrameworksWeb FontsAudio & Semalt

    Voit vaihtaa kenttätiedot nähdäksesi, miten se vaikuttaa komponenttiin.

    Jos jotain epäonnistuu, avaa selainkehitystyökalut ( F12 tai Ctrl | Cmd + Shift + I ) ja tutki konsolissa olevat virheilmoitukset. Komponentti-IO-opas tarjoaa lisätietoja API-sovelluksista ja koodin käytöstä muissa puitteissa.

    Vaihe 6: Asenna osa sivustollesi

    Komponentti voidaan asentaa mille tahansa verkkosivustolle, jossa voit lisätä HTML-koodin (esimerkiksi CodePen. Paina Asenna -painiketta nähdäksesi ohjeet.

    Sivulla oleva ensimmäinen komponentti vaatii sekä komponentin HTML, esim. g.

              

    .ja komponentti IO-skripti (juuri ennen sulkemista on ihanteellinen):

                                            
March 1, 2018