अपने ऐप्लिकेशन से मैच करने के लिए, खोज विजेट की स्टाइल बदली जा सकती है. इस्तेमाल की जाने वाली चीज़ें विजेट को पसंद के मुताबिक बनाने के लिए, नीचे दी गई सीएसएस क्लास का इस्तेमाल करें.
सुझाव
सैंपल डीओएम स्ट्रक्चर:
<div class="cloudsearch_suggestion_container">
<img src="..." class="cloudsearch_suggestion_suggested_query_icon">
<span class="cloudsearch_suggestion_suggested_query">...</span>
</div>
सीएसएस क्लास | नोट |
---|---|
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 |
नतीजे
सैंपल डीओएम स्ट्रक्चर:
<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>
सीएसएस क्लास | नोट |
---|---|
cloudsearch_result_container |
|
cloudsearch_result_icon |
|
cloudsearch_result_title |
|
cloudsearch_result_snippet |
|
cloudsearch_result_metadata |
Facets
सैंपल डीओएम स्ट्रक्चर:
<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>
सीएसएस क्लास | नोट |
---|---|
cloudsearch_facet_bucket_clickable |
यह विकल्प ऐसे एलिमेंट के बारे में बताता है जो फ़िल्टर चुनने को टॉगल करता है |
cloudsearch_facet_bucket_selected |
अगर कोई फ़िल्टर चुना जाता है, तो cloudsearch_facet_bucket_container पर प्रज़ेंट किया जा सकता है |
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 |
पेज पर नंबर डालना
सैंपल डीओएम स्ट्रक्चर:
<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>
सीएसएस क्लास | नोट |
---|---|
cloudsearch_pagination_container |
|
cloudsearch_pagination_center |
|
cloudsearch_pagination_icon |
|
cloudsearch_pagination_icon_first |
|
cloudsearch_pagination_icon_previous |
|
cloudsearch_pagination_icon_next |
|
cloudsearch_pagination_text |
नतीजों की संख्या
<div class="cloudsearch_result_count_container">
<span class="cloudsearch_result_count_text">...</span>
</div>
सीएसएस क्लास | नोट |
---|---|
cloudsearch_result_count_container |
|
cloudsearch_result_count_text |
साइन-इन करने का अनुरोध
सैंपल डीओएम स्ट्रक्चर:
<div class="cloudsearch_sign_in_container">
<div class="cloudsearch_sign_in_button">...</div>
<div class="cloudsearch_sign_in_text">...</div>
</div>
सीएसएस क्लास | नोट |
---|---|
cloudsearch_sign_in_container |
|
cloudsearch_sign_in_button |
|
cloudsearch_sign_in_text |