Dalam artikel ini, kita mengeksplorasi peran slot di Ionic 4 dan bagaimana mereka diimplementasikan menggunakan komponen web.

Seperti yang mungkin Anda ketahui sekarang, perubahan besar di Ionic 4 adalah semua komponen Ionic menjadi komponen web. Karena komponen web adalah fitur peramban, dan bukan dari kerangka kerja tertentu, ini akan memungkinkan Ionic bekerja dengan kerangka kerja apa pun atau tanpa kerangka kerja sama sekali.

Ide dasar di balik komponen Ionic tidak berubah – Anda cukup menempatkan elemen khusus ke dalam template Anda: <ion-list></ion-list> dan Anda mendapatkan daftar gulir halus yang diformat untuk seluler langsung.

Meskipun perubahan yang dilakukan oleh tim Ionic di belakang layar cukup besar dalam skala, hasilnya pada dasarnya akan tetap sama untuk Anda. Anda dapat terus menggunakan: <ion-list></ion-list> di Ionic 4 seperti yang Anda harapkan.

Ada beberapa hal yang berubah dalam migrasi ke komponen web ini: <button ion-button> menjadi <ion-button>, kita mengucapkan selamat tinggal pada <ion-navbar> demi <ion-toolbar>, dan ada beberapa pembaruan template kecil lainnya yang diperlukan. Mungkin perubahan yang paling mencolok adalah kemunculan slot secara tiba-tiba:

Contohnya:

<ion-toolbar><br> <ion-buttons slot="end"></ion-buttons><br></ion-toolbar><br><br><ion-button><br> <ion-icon slot="icon-only" name="home"></ion-icon><br></ion-button><br><br><ion-fab slot="fixed"></ion-fab><br><br><ion-item><br> <div slot="start"></div><br> <ion-label>Item Label</ion-label><br> <div slot="end"></div><br></ion-item><br><br><ion-item><br> <ion-label>Apple</ion-label><br> <ion-radio slot="start" value="apple"></ion-radio><br></ion-item>

Ini hanya beberapa contoh, Anda akan menemukan bahwa slot digunakan hampir di mana-mana di mana atribut seperti item-left, end, start, icon-left, range-left, range-right sebelumnya digunakan.

Dalam pengertian yang luas, kita dapat melihat dengan jelas bahwa penggunaan 'slot' digunakan untuk mempengaruhi posisi atau gaya suatu elemen karena mereka menggantikan atribut-atribut ini. Saya pikir kebanyakan orang akan melihat ini sebagai perubahan yang disambut baik karena menyatukan pendekatan dan berarti lebih sedikit yang harus diingat.

Namun, saya ingin meluangkan waktu dalam artikel ini untuk menjelaskan apa sebenarnya 'slot' ini dan bagaimana cara kerjanya. Pengetahuan tentang cara kerja slot tidak diperlukan agar Anda dapat membangun aplikasi Ionic secara efektif. Anda dapat menggunakan slot yang sesuai seperti yang dijelaskan dalam dokumentasi untuk mencapai apa yang Anda inginkan. Anda hanya akan membuat implementasi sendiri menggunakan slot jika Anda membangun komponen web Anda sendiri (yang bagi kebanyakan orang tidak akan terjadi).

Meskipun demikian, saya pikir selalu berguna untuk memahami apa yang terjadi di balik layar, dan sedikit menggali kode sumber yang mendasari kerangka kerja yang Anda gunakan dapat memberdayakan.

Apa itu Slot?

Slot adalah fitur dari komponen web yang digunakan untuk membuat komponen lebih dinamis. Ini memungkinkan konten/elemen tambahan disediakan saat menggunakan komponen yang kemudian dapat ditampilkan di dalam komponen. Jika Anda terbiasa dengan proyeksi konten di Angular menggunakan <ng-content> pada dasarnya idenya sama, tetapi slot adalah untuk komponen web dan dengan demikian didukung secara asli di peramban (tidak memerlukan kerangka kerja).

Jauh lebih mudah menjelaskan konsep slot dengan kode daripada dengan kata-kata. Di dalam template komponen web (seperti <ion-toolbar>) dapat memiliki elemen <slot>:

<div>Some stuff here</div><br><slot></slot><br><p>A paragraph!</p>

Anggap ini sebagai template komponen web kustom kita yang disebut <my-useless-component>. Karena kita memiliki <slot> di template, kita dapat menyediakan konten untuknya saat menggunakan komponen. Jika kita melakukan ini:

<my-useless-component> Hello! </my-useless-component>

Maka pesan Hello! kita akan disuntikkan di mana <slot> berada, dan sisa template tetap seperti adanya. Kita juga dapat menggunakan beberapa slot dan memberi mereka nama:

<slot name="left"></slot> <slot name="right"></slot>

Dengan memberi nama slot, kita dapat menargetkan slot tertentu ke mana kita ingin konten disuntikkan. Di sinilah kita mungkin mulai menggunakan properti slot seperti ini:

<my-useless-component><br> <div slot="left">To the left!</div><br> <div slot="right">To the right!</div><br></my-useless-component>

dan ini kurang lebih sama yang terjadi pada komponen <ion-toolbar> milik Ionic. Komponen yang dapat mengambil properti 'slot' (misalnya slot="start") disebut sebagai Slottable. Elemen Slottable kemudian di-slot (disalurkan) ke dalam slot yang tersedia di komponen web.

CATATAN: Ingat bahwa ini adalah fitur dari komponen web, Anda tidak akan dapat menggunakannya secara langsung di komponen Anda sendiri dalam aplikasi Ionic/Angular. Jika Anda menggunakan Stencil untuk membangun komponen web Anda sendiri, maka Anda dapat menggunakan fitur ini.

Untuk melihat bagaimana slot digunakan di Ionic, kita akan langsung masuk ke kode sumber dan melihat. Setiap kali Anda melihat elemen yang menggunakan atribut slot (sesuatu yang Slottable) Anda dapat menyimpulkan bahwa elemen induk adalah komponen web yang menggunakan slot. Contoh pertama yang saya berikan sebelumnya adalah:

<ion-toolbar><br> <ion-buttons slot="end"></ion-buttons><br></ion-toolbar>

Kita dapat memposisikan <ion-buttons> di dalam toolbar menggunakan slot, jadi template untuk <ion-toolbar> pasti menggunakan <slot> di templatenya. Mari kita periksa dengan melihat kode sumber untuk komponen Toolbar:

render() {<br> const backgroundCss = createThemedClasses(this, this, 'toolbar-background');<br> const contentCss = createThemedClasses(this, this, 'toolbar-content');<br><br> return [<br> <div class={backgroundCss}></div>,<br> <slot name="start"></slot>,<br> <slot name="secondary"></slot>,<br> <div class={contentCss}><br> <slot></slot><br> </div>,<br> <slot name="primary"></slot>,<br> <slot name="end"></slot><br> ];<br> }

Ini adalah kode Stencil yang digunakan untuk menghasilkan komponen web. Sekali lagi, Anda tidak diharuskan menggunakan Stencil untuk menggunakan Ionic, ini hanya alat yang digunakan Ionic untuk membangun komponen web mereka sendiri (tetapi Anda dapat menggunakannya jika Anda ingin membangun komponen web sendiri).

Jika kita melihat template yang dikembalikan di dalam metode render(), kita dapat melihat berbagai slot yang digunakan. Kita memiliki <slot></slot> generik tempat semua konten di dalam <ion-toolbar> akan masuk secara default, tetapi kita juga memiliki slot tambahan dengan nama start, secondary, primary, dan end. Ini berarti jika kita menambahkan elemen di dalam <ion-toolbar> dan menetapkan salah satu slot ini, elemen tersebut akan ditempatkan di posisi tertentu.

Implementasi toolbar yang khas dalam aplikasi Ionic mungkin terlihat seperti ini:

<ion-toolbar color="success"><br> <ion-title> The Title </ion-title><br> <ion-buttons slot="end"><br> <ion-button (click)="doSomething()"><br> <ion-icon slot="icon-only" name="add-circle"></ion-icon><br> </ion-button><br> </ion-buttons><br></ion-toolbar>

Kita menyediakan toolbar dengan <ion-title> dan <ion-buttons>. <ion-title> tidak menentukan slot, jadi itu akan dimasukkan ke tempat slot generik di template. Namun, karena kita menentukan slot="end" pada komponen <ion-buttons>, maka itu akan dimasukkan secara khusus ke bagian <slot name="end"></slot> dari template toolbar.

Anda mungkin melihat bahwa dalam contoh di atas kita juga telah menggunakan <ion-icon> yang menentukan slot icon-only. Karena itu berada di dalam <ion-button>, maka itu berarti komponen <ion-button> juga menggunakan slot (dan secara khusus ada slot icon-only). Mari kita lihat kode sumber:

<span class="button-inner"><br> <slot name="icon-only"></slot><br> <slot name="start"></slot><br> <slot></slot><br> <slot name="end"></slot><br></span>

Template lengkap untuk komponen ini cukup kompleks, tetapi ini adalah bagian penting. Kita dapat melihat bahwa memang ada slot icon-only, bersama dengan slot start, end, dan slot generik. Jadi, kita dapat melihat bahwa jika kita menentukan icon-only pada ikon di dalam tombol, itu akan ditambahkan ke slot tertentu... tapi mengapa? Apa perbedaan antara menempatkannya di slot icon-only dibandingkan slot start?

Dalam kasus ini, perbedaan posisi antara start dan icon-only tidak terlalu penting, tetapi alasan kita menggunakan icon-only adalah untuk memperbesar ukuran ikon karena ditampilkan sendiri dan tidak dengan teks.

Jika kita melihat gaya yang digunakan untuk komponen ini, kita akan menemukan yang berikut:

.button ion-icon[slot='icon-only'] {<br> font-size: 1.8em;<br>}

Kita dapat melihat bahwa aturan CSS ini menargetkan ikon yang ditentukan dalam slot icon-only (selektor CSS ini menargetkan elemen ion-icon yang memiliki properti slot yang sama dengan icon-only) dan menerapkan gaya (dalam hal ini, meningkatkan ukuran font untuk membuat ikon lebih besar). Jadi, selain menggunakan fungsionalitas slot komponen web untuk memposisikan konten dalam template, Ionic juga menggunakan metode yang sama untuk menerapkan gaya tertentu.

Ringkasan

Seperti yang saya sebutkan di awal, tidak satu pun dari ini yang super penting untuk diketahui jika Anda tidak tertarik membangun komponen web Anda sendiri. Namun, menurut saya menyenangkan untuk memahami mengapa perubahan tertentu dilakukan, dan itu juga dapat memudahkan pengembangan. Jika Anda nyaman menggali kode sumber dan mencari tahu apa yang terjadi di balik layar, kemungkinan Anda akan lebih jarang mengalami kebuntuan.