Gaya

Panel Gaya memungkinkan Anda menyesuaikan tampilan dan nuansa aplikasi. Anda dapat menetapkan tema, memilih di antara variasi widget, dan bahkan membuat gaya Anda sendiri.

Gaya Global: mengatur gaya beberapa widget sekaligus

Menetapkan gaya di seluruh aplikasi dengan tema

Pemilih tema di bagian atas tab Gaya mengontrol tampilan default widget di aplikasi. App Maker saat ini memiliki dua tema:

  • Material: Tema yang menerapkan Desain Material, gaya visual standar Google. Gunakan tema ini untuk membuat aplikasi yang terlihat seperti aplikasi favorit Google, misalnya Inbox atau Keep.

  • Biasa: Tema sederhana yang memberikan tampilan dan nuansa generik. Buat tema biasa untuk mengembangkan gaya visual unik Anda sendiri.

Menyesuaikan widget dengan CSS

Jika Anda ingin mengubah widget Material atau merapikan tema Biasa, Anda dapat menyesuaikan widget dengan menulis Cascading Style Sheets atau CSS Anda sendiri.

Widget App Maker dan subkomponennya memiliki class CSS bawaan dengan app- sebagai awalan, diikuti oleh namanya. Untuk mengubah tampilan widget, tambahkan CSS Anda ke class tersebut menggunakan area teks di bawah pemilih tema. Contoh:

/* Adds rounded corners to button widgets */
.app-Button {
  border-radius: 10px;
}

/* Sets font size for rows in list panels */
.app-ListPanelRow {
  font-size: 1.2em;
}

Anda juga dapat menggunakan berbagai pemilih CSS lengkap untuk mengatur gaya aplikasi:

/* Turns off link underlines. */
.app-Link:link {
  text-decoration: none;
}

/* Changes color of disabled buttons. */
.app-Button[disabled] {
  background-image: none;
  background-color: white;
}

Gaya untuk ukuran layar yang berbeda

Pengguna mungkin mengakses aplikasi dari perangkat dengan layar besar atau kecil. Anda dapat meningkatkan pengalaman pengguna terhadap aplikasi dengan menyertakan desain responsif, yang mengubah tata letak bergantung pada ukuran layar (juga disebut resolusi layar).

Untuk menyesuaikan tata letak ukuran layar yang berbeda secara otomatis, gunakan kueri media di CSS global Anda. Untuk mengetahui pengantar tentang desain responsif, lihat Dasar-dasar Desain Web Responsif. Sebagai contoh, lihat Petak tata letak responsif.

Menguji gaya dengan ukuran tertentu di editor halaman

Untuk menguji gaya, Anda dapat mengubah ukuran kanvas secara manual atau menerapkan resolusi layar tertentu. Mengubah resolusi di editor halaman tidak memengaruhi aplikasi yang Anda publikasikan dan developer lain tidak akan melihat perubahannya. Anda dapat me-refresh halaman untuk menampilkan kanvas ke ukuran kustom aslinya.

Untuk memilih resolusi layar tertentu, klik Resolusi perangkat di bagian atas editor halaman.

Anda dapat melihat ukuran layar kanvas di pojok kanan atas, kecuali Anda memilih resolusi Kustom, dalam hal ini ukuran kustom di editor properti tertera dalam nilai dimensi.

Mengelola resolusi layar

Untuk menambahkan resolusi layar, klik Resolusi perangkat lalu klik Tambah resolusi. Atau, Anda dapat mengklik Setelan Setelan Aplikasi Tambah Resolusi.

Untuk mengedit dan menghapus resolusi layar, buka Setelan Setelan Aplikasi dan buka bagian Resolusi area pandang. Arahkan ke resolusi yang ingin diedit atau dihapus, lalu klik Edit atau Hapus .

Gaya Widget: mengatur gaya suatu widget

Tema widget

Gunakan pemilih tema untuk menerapkan gaya ke widget dengan mudah. Pilih widget lalu pilih dari daftar tema pada menu drop-down di panel tindakan.

Pemilih tema

Tema Material dilengkapi dengan beberapa variasi untuk sebagian besar widget. Misalnya, widget panel memiliki variasi Paper yang terlihat seperti selembar kertas putih, varisi Transparent yang menunjukkan widget di bawah panel, dan banyak lagi.

CSS khusus widget

Tab Gaya memiliki area teks untuk memasukkan CSS kustom, sehingga Anda dapat mengubah gaya widget yang dipilih dengan spesifikasi yang tepat. Gaya widget juga memiliki awalan .app- yang diikuti oleh nama halaman lokasi widget kemudian nama widget itu sendiri. Ketika dipilih, widget akan muncul di bagian atas pop-up pelengkapan otomatis.

Contoh:

/* Changes color of SampleButton1 to yellow */
.app-NewPage-SampleButton1 {
  background-image: none;
  background-color: yellow;
}

/* Sets font in SampleListPanel1's rows to bold */
.app-NewPage-SampleListPanel1Row {
  font-weight: bold;
}

Variasi kustom

App Maker juga memungkinkan Anda membuat variasi sendiri. Untuk membuat variasi, gunakan bagian CSS pada tab Gaya, lalu buat class dengan nama dalam format app-[WidgetType]--[VariantName]. Contoh:

.app-Button--RedButton {
  background-image: none;
  background-color: red;
}

Setelah Anda membuat class dengan nama yang sesuai, variasi Anda akan muncul di drop-down Variasi pada panel tindakan saat widget dipilih.

Gaya tambahan dengan properti gaya

Anda dapat menambahkan gaya pada widget di luar panel Gaya menggunakan properti styles pada bagian Display di Editor Properti. Tentukan sebuah class pada bagian Gaya, lalu tambahkan ke properti. Gaya yang ditetapkan dengan cara ini tidak memerlukan awalan app- yang biasa digunakan. Contoh:

.specialSubmitButton {
  background-image: none;
  background-color: red;
}