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