Framework7 - Tema Warna

Deskripsi

Framework7 menyediakan tema warna yang berbeda untuk aplikasi Anda.

Tema warna menyediakan berbagai jenis warna tema yang digunakan untuk bekerja dengan aplikasi dengan lancar seperti yang ditentukan dalam tabel di bawah -

S.No Jenis & Deskripsi Tema
1 Warna Tema iOS

Anda dapat menggunakan 10 tema warna iOS default yang berbeda untuk aplikasi tersebut.

2 Warna Tema Material

Framework7 menyediakan 22 tema warna material default yang berbeda untuk aplikasi.

Menerapkan Tema Warna

Framework7 memungkinkan Anda untuk menerapkan tema warna pada elemen yang berbeda seperti halaman, blok daftar, navbar, tombol-baris dll dengan menggunakan kelas tema- [warna] ke elemen induk.

Contoh

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

Tema Tata Letak

Anda dapat menggunakan tema tata letak default untuk aplikasi Anda dengan menggunakan dua tema putih dan gelap . Tema dapat diterapkan dengan menggunakan kelas layout- [theme] ke elemen induk.

Contoh

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Kelas Helper

Framework7 menyediakan kelas pembantu tambahan, yang dapat digunakan di luar atau tanpa tema seperti yang tercantum di bawah ini -

  • color-[color] - Dapat digunakan untuk mengubah warna teks blok atau warna tombol, tautan, ikon, dll.

  • bg-[color] - Ini mengatur warna latar belakang yang telah ditentukan pada blok atau elemen.

  • border-[color] - Ini mengatur warna perbatasan yang telah ditentukan pada blok atau elemen.