建站
咨詢
售后
建站咨詢
新聞中心
- search-bar 搜索框
- 屬性說明
- 示例
- 代碼示例
- 代碼示例
search-bar 搜索框
解釋：自定義搜索框，支持配置多種主題，搜索默認(rèn)文案，容器樣式等
創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為烏海海南企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站，烏海海南網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
屬性說明
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
theme |
String |
否 |
default |
搜索框主題樣式：default 為搜索框灰色填充主題，border 為搜索框描邊主題，white 為搜索框白色填充主題，transparent 為搜索框透明主題 |
placeholder |
String |
否 |
“搜索關(guān)鍵詞” |
輸入內(nèi)容默認(rèn)文案 |
placeholderStyle |
String |
否 |
輸入內(nèi)容默認(rèn)文案的樣式 | |
searchIconColor |
String |
否 |
#999 |
搜索 icon 的顏色 |
confirmType |
String |
否 |
search |
鍵盤右下角按鈕文字 |
value |
String |
否 |
搜索框內(nèi)容 | |
focus |
Boolean |
否 |
false |
聚焦，調(diào)起輸入鍵盤 |
presetWord |
String |
否 |
‘’ |
搜索預(yù)置詞，如果配置了該詞，則可默認(rèn)搜索預(yù)置詞（預(yù)置詞的展示優(yōu)先級(jí)高于 placeholder） |
containerStyle |
Object |
否 |
{‘background’: ‘#f4f5f6’, ‘opacity’: 1} |
最外層容器的樣式，但 theme 權(quán)重大于該樣式 |
contentStyle |
Object |
否 |
{‘width’: 688.41,’minWidth’: 218} |
內(nèi)層搜索容器的樣式 |
focus |
EventHandle |
否 |
光標(biāo)聚焦時(shí)觸發(fā)事件 | |
blur |
EventHandle |
否 |
輸入框失焦時(shí)觸發(fā)事件 | |
clear |
EventHandle |
否 |
清空輸入框時(shí)觸發(fā)事件 |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
代碼示例
- SWAN
- JS
- CSS
- JSON
{{item.titleBar}} searchIconColor="{{searchIconColor}}"search-bar-class="{{item.theme}}-external-container"search-bar-content-class="{{item.theme}}-external-content"search-icon-class="{{item.theme}}-external-icon"search-input-class="external-search-input"search-text-class="external-search-text"placeholder-style="{{placeholderStyle}}"theme="{{item.theme}}"/>沉浸式主題
文章題目：創(chuàng)新互聯(lián)百度小程序教程：search-bar搜索框
文章轉(zhuǎn)載：http://www.5511xx.com/article/ccoiese.html
