search-bar 搜索框
- 属性说明
- 示例
  - 代码示例

search-bar 搜索框

解释：自定义搜索框，支持配置多种主题，搜索默认文案，容器样式等

属性说明

属性名	类型	必填	默认值	说明
theme	String	否	default	搜索框主题样式：default 为搜索框灰色填充主题，border 为搜索框描边主题，white 为搜索框白色填充主题，transparent 为搜索框透明主题
placeholder	String	否	“搜索关键词”	输入内容默认文案
placeholderStyle	String	否		输入内容默认文案的样式
searchIconColor	String	否	#999	搜索 icon 的颜色
confirmType	String	否	search	键盘右下角按钮文字
value	String	否		搜索框内容
focus	Boolean	否	false	聚焦，调起输入键盘
presetWord	String	否	‘’	搜索预置词，如果配置了该词，则可默认搜索预置词（预置词的展示优先级高于 placeholder）
containerStyle	Object	否	{‘background’: ‘#f4f5f6’, ‘opacity’: 1}	最外层容器的样式，但 theme 权重大于该样式
contentStyle	Object	否	{‘width’: 688.41,’minWidth’: 218}	内层搜索容器的样式
focus	EventHandle	否		光标聚焦时触发事件
blur	EventHandle	否		输入框失焦时触发事件
clear	EventHandle	否		清空输入框时触发事件

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

<view class="wrap {{theme}}">
    <view class="card-panel" s-for="item,index in list">
        <view class="mode-title">
            <view class="mode-title-line-left"></view>
            <view class="mode-title-text">{{item.titleBar}}</view>
            <view class="mode-title-line-right"></view>
        </view>
        <view class="smt-card-area">
            <smt-search-bar class="area-content"
                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}}"/>
        </view>
    </view>
    <view class="smt-card-config">
        <view class="item-scroll border-bottom">
            <text class="switch-text switch-text-before">沉浸式主题</text>
            <switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch>
        </view>
    </view>
</view>