Ukuran dan tata letak

Sebuah <caputchin-game> bisa dirender dalam tiga tata letak (disetel dengan atribut layout): inline, modal, dan fullscreen. Cara kamu mengatur ukurannya bergantung pada tata letak, karena tata letak modal dan fullscreen menampilkan dua kotak terpisah:

• Elemen di halaman: hal yang duduk di alur halamanmu. Di inline itu adalah seluruh panel game; di modal / fullscreen itu adalah checkbox kecil yang diklik pengunjung untuk membuka game.
• Kotak game: dialog yang terbuka di atas pada modal / fullscreen, dengan game di dalamnya. (Di inline tak ada dialog terpisah: panel itulah game-nya.)

Empat atribut mengatur ukuran kedua kotak ini. Setiap nilai adalah salah satu dari auto (bawaan), full (memenuhi ruang yang tersedia), atau angka piksel positif seperti 480.

Inline

Inline punya satu kotak, jadi width / height mengatur ukuran seluruh panel. overlay-width / overlay-height tak melakukan apa pun di sini dan diabaikan (widget mencatat peringatan kalau kamu menyetelnya).

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal dan fullscreen

Di sini kedua kotak itu independen. width / height mengatur ukuran checkbox masuk di halamanmu; overlay-width / overlay-height mengatur ukuran dialog dan game yang terbuka saat pengunjung mengkliknya.

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

overlay-width="full" membuat game memenuhi dialog sepanjang sumbu itu; sebuah nilai piksel mematok game ke ukuran itu (sebuah modal membungkus ketat di sekelilingnya). Di fullscreen dialog sudah menutupi viewport, jadi overlay-* mengendalikan apakah game merentang untuk memenuhinya atau duduk di tengah pada ukurannya sendiri.

Saat kamu membiarkan kotak game tak disetel

Kalau kamu tak menyetel overlay-width / overlay-height, kotak game memakai ukuran yang dipilih penulis game untuk game itu (jejak yang ia sukai, dideklarasikan di caputchin.json game tersebut). Jadi sebagian besar waktu kamu hanya perlu width / height untuk tata letak halamanmu, dan game mengatur ukurannya sendiri dengan masuk akal. Setel overlay-* hanya saat kamu mau menimpa itu.

Nilai piksel

Sebuah angka biasa adalah piksel CSS: width="500" dan width="500px" setara. Nilai nol, negatif, dan non-numerik ditolak (atribut jatuh kembali ke bawaannya dan widget mencatat peringatan).

Lihat juga

• Elemen widget game: set atribut <caputchin-game> yang lengkap.
• Metode dan event widget: mengemudikan widget dan menanggapinya.