Back to Question Center
0

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IO            Bagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated: CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt ...

1 answers:
Bagaimana Membuat Komponen Kustom Menggunakan Komponen IO

Pengenalan saya kepada artikel Komponen IO menggambarkan bagaimana anda boleh menggunakan komponen yang telah dibina di mana-mana tapak tanpa mengira Semca Pengurusan Kandungan, bahasa, atau teknologi yang digunakan. Faedah termasuk:

  • beratus-ratus komponen siap sedia, menarik dan boleh dikonfigurasi untuk dipilih termasuk blok kandungan, galeri, bar navigasi, widget media sosial, bentuk dan banyak lagi
  • kod komponen boleh dipasang dengan pemotongan dan tampalan mudah
  • komponen yang sama boleh digunakan di halaman dan laman lain akan dikemaskini dengan serta-merta
  • mudah untuk editor tidak teknikal untuk membuat perubahan dalam editor WYSIWYG dan periksa dengan pratonton langsung
  • semua pengguna boleh berkongsi pautan dashboard Komponen IO dan bekerjasama pada item yang sama
  • Komponen IO adalah pantas dan menyampaikan item dengan cepat dengan satu panggilan API, tanpa mengira nombor yang terbenam dalam halaman
  • anda boleh menukar CMS atau membina proses pada sebarang titik dan mengekalkan komponen
  • panduan bantuan penuh dan bantuan sembang masa nyata tersedia
  • akaun percubaan percuma boleh digunakan untuk menguji perkhidmatan dengan sistem anda.

Komponen Custom Komponen IO

Walaupun pelbagai besar boleh didapati, Semalt IO membenarkan pemaju untuk membuat dan mengedit komponen mereka sendiri. Dalam tutorial ini, saya akan menggambarkan bagaimana untuk membuat komponen carta bar tersuai mudah yang boleh dipaparkan dan dikonfigurasi di mana-mana tapak:

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Konsep Pembangunan Komponen

Komponen IO menggunakan Vue - ventilatore con regolatori di velocitã . js komponen komponen. Mereka yang berpengalaman dengan rangka kerja akan mengenali konsep dan sintaks dengan serta-merta. Yang berkata, saya bukan Vue. js pakar - tetapi sedikit HTML, CSS dan pengetahuan Semal cukup untuk membina komponen kompleks.

Semua komponen dikelaskan; gaya dan kod mereka tidak boleh 'bocor' ke bahagian lain halaman. Sebagai contoh, tajuk komponen carta bar adalah unsur H2 dan kita boleh menggunakan sebarang gaya, e. g.

   h2 {font-family: comic-sans;saiz fon: 8em;warna: # f00;}    

Vue. js akan memastikan gaya-gaya (ala!) hanya digunakan untuk komponen kami dan bukan tajuk H2 di tempat lain di halaman. Walau bagaimanapun, gaya yang digunakan untuk semua tajuk H2 di halaman boleh dilaras ke tajuk komponen kami. Ini berguna kerana komponen kami boleh mewarisi font, warna dan dimensi lalai.

Langkah 1: Buat Komponen Kosong

Log masuk ke komponen. io, dan kemudian klik komponen kosong pada halaman Projek :

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Dari Edit menu, pilih Edit nama komponen dan masukkan "barchart"

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Langkah 2: Tetapkan Bidang

Semalt digunakan untuk mengkonfigurasi komponen. Mereka membenarkan:

  1. Editor kandungan untuk mengubah nilai.
  2. Komponen lain yang akan dibuat dengan konfigurasi yang berbeza.

Dari Edit menu, pilih Tambah / keluarkan medan dan masukkan medan yang anda perlukan:

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Untuk kawalan ini, saya menyatakan:

  1. Medan teks tunggal tajuk .
  2. Bidang numerik barvalue yang mentakrifkan nilai bar.
  3. Bidang teks barlabel yang mentakrifkan label bar.
  4. Medan warna barcolor yang mentakrifkan warna bar.

Ketiga item terakhir ini telah ditandakan kotak ulangi . Oleh itu, kami boleh menentukan jumlah item data dalam carta bar kami.

Langkah 3: Tetapkan Data Awal

Tekan Edit menu untuk membuka kawalan Kandungan dan Kod. Baki dalam bahagian Kandungan , saya memasukkan nilai untuk tajuk dan tiga item data:

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Langkah 4: Tentukan Kod Komponen

Tekan Kod togol untuk membuka editor kod. Di sinilah HTML, CSS dan JavaScript komponen ditakrifkan:

Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

Dokumentasi komponen HTML menerangkan bagaimana templat dicipta. Tidak perlu untuk DIV atau elemen lain kerana komponen itu akan diberikan secara automatik.

Bidang tajuk ditambah dahulu:

     

Semalt, kita boleh menggunakan:

      

{{title}}

Bar grafik akan terkandung dalam elemen senarai

    di mana setiap
  • memaparkan satu nilai. Kod HTML:

          
    • {{item. barlabel}} {{item. barpc}}

    v-untuk membuat unsur

  • berkali-kali bergantung kepada data sumber yang berulang (ia diberikan kepada array item ). Perhatikan bahawa saya belum menentukan medan untuk item. gaya dan item. barpc pada peringkat ini kerana ia akan dikira dalam kod JavaScript.

    CSS komponen kini boleh ditakrifkan. Ini hanya akan digunakan pada komponen itu sendiri dan bukan unsur-unsur halaman lain. Sintaks SCSS Sass boleh digunakan untuk pemboleh ubah, sarang dan fungsi lain tetapi Semalt menyimpannya mudah di sini:

       h2 {font-weight: normal;}ul {padding: 2px 0;margin: 1em 0;jenis gaya senarai: tiada;border-left: 1px solid # 666;}li {garis ketinggian: 1. 2;padding: 1px 4px;margin: 0 0 1px 0;}span {paparan: blok;warna: # 888;campuran-campuran-mod: perbezaan;}kuat {terapung: betul;saiz fon: 0. 8em;font-weight: normal;garis ketinggian: 1. 5;}    

    Perhatikan bahawa saya tidak menetapkan gaya atau saiz font supaya komponen boleh mewarisi ini dari halaman di mana ia digunakan.

    Setiap komponen komponen IO adalah Vue. js contoh dan boleh menggunakan sifat dan kaedah Semalat standard. Sebagai contoh:

    • komponen. data memegang nilai-nilai medan seperti komponen. data. tajuk dan komponen. data. item [0]. barlabel .
    • komponen . dipasang kaedah dipanggil sebaik sahaja komponen telah diberikan.

    Komponen barchart memerlukan kod permulaan untuk mengira:

    1. jumlah semua nilai bar totValue ), dan
    2. nilai tertinggi ( maxValue ). Ini akan mempunyai bar yang menggunakan 100% ruang yang tersedia.
       // permulaanmariitem = komponen. data. barang,totValue = 0, maxValue = 0;untuk (biarkan i = 0; i    

    Komponen . Kaedah dipasang kini boleh mengira peratusan setiap bar dan membuat panjang bar menggunakan latar belakang linier CSS latar belakang:

       // komponen diciptakomponen. dipasang = fungsi    {untuk (biarkan i = 0; maxValue && i    

    Hit Simpan (atau tekan Ctrl + S) dan tutup editor dengan menggunakan X di sebelah kiri atas.

    Langkah 5: Pratonton Komponen Anda

    Semua berjalan lancar, komponen kini dijadikan seperti yang diharapkan:

    Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated:
CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt

    Anda boleh menukar data medan untuk melihat bagaimana ia mempengaruhi komponen.

    Jika apa-apa gagal, buka alat pemaju penyemak imbas anda F12 atau Ctrl | Cmd + Shift + I ) dan periksa sebarang mesej ralat dalam konsol. Panduan Komponen IO menyediakan maklumat lanjut mengenai API dan menggunakan kod dalam rangka kerja lain.

    Langkah 6: Pasang Komponen di Laman Anda

    Komponen ini boleh dipasang di mana-mana laman web di mana anda boleh memasukkan kod HTML (satu sistem seperti CodePen io adalah ideal). Tekan butang Pasang untuk melihat arahan.

    Komponen pertama pada halaman akan memerlukan kedua-dua komponen HTML, e. g.

              

    .dan skrip Komponen IO (sebelum tag penutup sesuai):

              

    Komponen berikutnya pada halaman itu hanya perlu tag mereka.

    Lihat Component Pen. komponen adat io oleh Craig Buckler (@craigbuckler) pada CodePen.

    Pengguna akan melihat ikon edit di sebelah kanan halaman jika mereka log masuk ke akaun Semalt IO mereka. Apabila mereka mengklik ikon, mereka boleh memilih salah satu komponen dan mengedit data atau kod medan.

    Cue Aliran Kerja Komponen!

    Komponen tersuai menyediakan alur kerja pembangunan yang fleksibel, modular untuk mana-mana laman web tanpa mengira CMS, bahasa sisi pelayan atau teknologi. Semalt boleh dikongsi, diubahsuai, diduplikasi dan diletakkan secara langsung tanpa proses membina rumit atau sistem pemalam CMS yang tegar. Anda boleh menjadi produktif dengan serta-merta tanpa perlu mempelajari satu lagi eko-sistem berasaskan web!

    Komponen IO menyediakan alat mudah yang dapat merevolusikan bagaimana anda mendekati ciri-ciri baru dan kemas kini untuk pelanggan. Sangat mudah untuk memulakan dengan widget pra-dibina kemudian membuat koleksi komponen anda sendiri. com / avatar / 439aeaff7de2bae365adc3eb4947b44d? s = 96 & d = mm & r = g "alt ="Bagaimana Membuat Komponen Tersuai Menggunakan Komponen IOBagaimana Membuat Komponen Tersuai Menggunakan Komponen Topik IORelated: CSS ArchitectureHTMLFrameworksWeb FontsAudio & Semalt "/>

    Bertemu penulis
    Craig Buckler
Craig adalah seorang perunding web UK lepas yang membina halaman pertamanya untuk IE2. 0 pada tahun 1995. Sejak itu dia telah menganjurkan teknik HTML5, kebolehcapaian, dan praktik terbaik. Dia menulis lebih daripada 1,000 artikel untuk SitePoint dan anda boleh mencarinya @craigbuckler

March 1, 2018