Framework7 - Chủ đề màu sắc
Sự miêu tả
Framework7 cung cấp các chủ đề màu sắc khác nhau cho các ứng dụng của bạn.
Chủ đề màu cung cấp các loại màu chủ đề khác nhau được sử dụng để hoạt động trơn tru với các ứng dụng như được chỉ định trong bảng bên dưới -
| S. không | Loại chủ đề & Mô tả |
|---|---|
| 1 | Màu chủ đề iOS Bạn có thể sử dụng 10 chủ đề màu iOS mặc định khác nhau cho ứng dụng. |
| 2 | Màu sắc chủ đề vật liệu Framework7 cung cấp 22 chủ đề màu vật liệu mặc định khác nhau cho ứng dụng. |
Áp dụng chủ đề màu sắc
Framework7 cho phép bạn áp dụng các chủ đề màu trên các phần tử khác nhau như trang, khối danh sách, thanh điều hướng, hàng nút, v.v. bằng cách sử dụng lớp theme- [color] cho phần tử mẹ.
Thí dụ
...
</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>Chủ đề bố cục
Bạn có thể sử dụng chủ đề bố cục mặc định cho ứng dụng của mình bằng cách sử dụng hai chủ đề trắng và tối . Các chủ đề có thể được áp dụng bằng cách sử dụng lớp layout- [theme] cho phần tử cha.
Thí dụ
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>Lớp người trợ giúp
Framework7 cung cấp các lớp trợ giúp bổ sung, có thể được sử dụng bên ngoài hoặc không có các chủ đề như được liệt kê bên dưới -
color-[color] - Nó có thể được sử dụng để thay đổi màu văn bản của khối hoặc màu của nút, liên kết, biểu tượng, v.v.
bg-[color] - Nó đặt màu nền được xác định trước trên khối hoặc phần tử.
border-[color] - Nó đặt màu viền được xác định trước trên khối hoặc phần tử.