Bạn có thể thay đổi kiểu của tiện ích tìm kiếm cho phù hợp với ứng dụng của mình. Sử dụng các lớp CSS sau để tuỳ chỉnh tiện ích.
Nội dung đề xuất
Cấu trúc DOM mẫu:
<div class="cloudsearch_suggestion_container">
<img src="..." class="cloudsearch_suggestion_suggested_query_icon">
<span class="cloudsearch_suggestion_suggested_query">...</span>
</div>
Lớp CSS | Ghi chú |
---|---|
cloudsearch_suggestion_overlay |
|
cloudsearch_suggestion_container |
|
cloudsearch_suggestion_suggested_query |
|
cloudsearch_suggestion_suggested_query_icon |
|
cloudsearch_suggestion_suggested_people_name |
|
cloudsearch_suggestion_suggested_people_profile_image |
Kết quả
Cấu trúc DOM mẫu:
<div class="cloudsearch_result_container">
<span class="cloudsearch_result_icon"></span>
<div class="cloudsearch_result_title">
<a href="...">...</a>
</div>
<div class="cloudsearch_result_metadata">...</div>
<div class="cloudsearch_result_snippet">...</div>
</div>
Lớp CSS | Ghi chú |
---|---|
cloudsearch_result_container |
|
cloudsearch_result_icon |
|
cloudsearch_result_title |
|
cloudsearch_result_snippet |
|
cloudsearch_result_metadata |
Thuộc tính
Cấu trúc DOM mẫu:
<div class="cloudsearch_facet_result_container">
<div class="cloudsearch_facet_operator_container">
<span class="cloudsearch_facet_result_operator_name">...</span>
</div>
<div class="cloudsearch_facet_bucket_container">
<input type="checkbox" value="value"
class="cloudsearch_facet_bucket_checkbox cloudsearch_facet_bucket_clickable">
<span class="cloudsearch_facet_bucket_value">...</span>
<span class="cloudsearch_facet_bucket_percentage">...</span>
</div>
</div>
Lớp CSS | Ghi chú |
---|---|
cloudsearch_facet_bucket_clickable |
Cho biết một phần tử bật/tắt chế độ lựa chọn bộ lọc |
cloudsearch_facet_bucket_selected |
Trình bày trên cloudsearch_facet_Bascontainer nếu một bộ lọc được chọn |
cloudsearch_facet_bucket_container |
|
cloudsearch_facet_result_container |
|
cloudsearch_facet_operator_container |
|
cloudsearch_facet_result_operator_name |
|
cloudsearch_facet_bucket_value |
|
cloudsearch_facet_bucket_percentage |
Phân trang
Cấu trúc DOM mẫu:
<div class="cloudsearch_pagination_container">
<div class="cloudsearch_pagination_center">
<span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_previous">
</span>
<span class="cloudsearch_pagination_text">...</span>
<span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_next">
</span>
</div>
</div>
Lớp CSS | Ghi chú |
---|---|
cloudsearch_pagination_container |
|
cloudsearch_pagination_center |
|
cloudsearch_pagination_icon |
|
cloudsearch_pagination_icon_first |
|
cloudsearch_pagination_icon_previous |
|
cloudsearch_pagination_icon_next |
|
cloudsearch_pagination_text |
Số lượng kết quả
<div class="cloudsearch_result_count_container">
<span class="cloudsearch_result_count_text">...</span>
</div>
Lớp CSS | Ghi chú |
---|---|
cloudsearch_result_count_container |
|
cloudsearch_result_count_text |
Lời nhắc đăng nhập
Cấu trúc DOM mẫu:
<div class="cloudsearch_sign_in_container">
<div class="cloudsearch_sign_in_button">...</div>
<div class="cloudsearch_sign_in_text">...</div>
</div>
Lớp CSS | Ghi chú |
---|---|
cloudsearch_sign_in_container |
|
cloudsearch_sign_in_button |
|
cloudsearch_sign_in_text |