搜索 Search

适用于搜索场景

使用

API

用法示例

基础用法

• index.html
• index.js

code

<ti-search id="ti-search"></ti-search>

window.onload = function(){
  var tiSearch = document.getElementById("ti-search");
  tiSearch.addEventListener('search', function (e) {
    tiSearch.value = e.detail.value;
  }, false);
};

居中模式

<ti-search center></ti-search>

搜索按钮状态

属性含义：

1. animation 设置关闭搜索按钮动画。
2. always-show-search 设置一直显示搜索按钮。
3. use-search-button 设置不使用组件自带的搜索按钮。

• index.html
• index.js

code

<ti-search id="ti-search1"></ti-search>
<ti-search id="ti-search2"></ti-search>
<ti-search id="ti-search3"></ti-search>

window.onload = function(){
  var tiSearch1 = document.getElementById("ti-search1");
  tiSearch1.animation = false;
  var tiSearch2 = document.getElementById("ti-search2");
  tiSearch2.alwaysShowSearch = true;
  var tiSearch3 = document.getElementById("ti-search3");
  tiSearch3.useSearchButton = false;
};

使用插槽

包括4个插槽，整体组件前后位置插槽，以及输入框左右插槽

<ti-search>
  <div slot="prefix">
    <span>请选择</span>
    <ti-icon name="arrow-down" size="32"></ti-icon>
  </div>
  <ti-icon slot="right-icon" name="scan" size="32"></ti-icon>
</ti-search>
<ti-search>
  <div slot="prefix">
    <ti-icon name="category" size="32"></ti-icon>
  </div>
  <div slot="suffix">
    <ti-icon name="arrange" size="32"></ti-icon>
  </div>
</ti-search>

键盘确认按钮文字

<ti-search confirm-type="done" value="完成"></ti-search>
<ti-search confirm-type="send" value="发送"></ti-search>
<ti-search confirm-type="search" value="搜索"></ti-search>
<ti-search confirm-type="next" value="下一项"></ti-search>
<ti-search confirm-type="go" value="前往"></ti-search>

ti-search API

属性 Properties

名称	类型	必填	默认值	说明	备注
value	string	否	-	当前输入的值	-
center	boolean	否	false	输入框内容对齐方式，采用居中模式	-
placeholder	string	否	-	输入框为空时占位符	-
focus	boolean	否	false	获取焦点	-
disabled	boolean	否	false	输入框禁用	-
read-only	boolean	否	false	输入框只读	-
confirm-type	string	否	search	设置键盘右下角按钮的文字，仅在type='text'时生效	-
clearable	boolean	否	true	是否启用清除控件	-
left-icon	string	否	search	左侧搜索图标，不启用传none	-
ext-style	string | Record<string, string>	否	-	根节点样式	-
animation	boolean	否	true	是否启用搜索按钮动画	-
always-show-search	boolean	否	false	是否常显搜索按钮，默认在聚焦状态下隐藏	-
always-show-prefix	boolean	否	false	是否常显前置插槽，默认在聚焦状态下隐藏	-
always-show-suffix	boolean	否	false	是否常显后置插槽，默认在聚焦状态下隐藏	-
always-show-right-icon	boolean	否	false	是否常显右侧图标插槽，默认在聚焦状态下隐藏	-
use-search-button	boolean	否	true	是否启用组件搜索按钮	-

事件 Events

名称	参数列表	描述	备注
focus	(e: CustomEvent) => void	输入框聚焦时触发	-
blur	(e: CustomEvent) => void	输入框失焦时触发	-
search	(e: CustomEvent) => void	确定搜索时触发	-
change	(e: CustomEvent) => void	输入值变化时触发	-
clear	(e: CustomEvent) => void	清除时触发	-
click-input	(e: CustomEvent) => void	点击输入框是触发	-

插槽 Slots

名称	说明	备注
prefix	输入框外部左侧插槽	-
left-icon	输入框内部左侧插槽	-
right-icon	输入框内部右侧插槽	-
suffix	输入框外部右侧插槽	-

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-
search-button-class	搜索按钮样式类	如果不需要按钮动画，可使用 transition: none;覆盖
search-inner-class	搜索框容器样式类
input-class	input 样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--search-font-size	theme.fontSize.t5	搜索文字字号	-
--search-out-background	theme.color.gray.background.default	搜索框整体背景色	-
--search-out-padding-v	theme.spacing.vertical.v5	搜索框整体垂直方向内边距	-
--search-out-padding-h	theme.spacing.horizontal.h7	搜索框整体水平方向内边距	-
--search-inner-background	theme.color.gray.background.40	搜索框内部输入区域背景色	-
--search-inner-padding-v	theme.spacing.vertical.v4	搜索框内部输入区域垂直方向内边距	-
--search-inner-padding-h	theme.spacing.horizontal.h7	搜索框内部输入区域水平方向内边距	-
--search-radius	theme.borderRadius.r2	搜索框容器圆角	-
--search-font-size	theme.fontSize.t5	文字字号	-
--search-line-height	theme.lineHeight.multiline.t3	文字行高	-
--search-icon-size	theme.fontSize.t10	搜索图标尺寸	-
--search-icon-color	theme.color.gray.texticon.900	搜索图标颜色	-
--search-left-icon-gap	theme.spacing.gap.g4	搜索图标的右侧间距	-
--search-button-padding-h	theme.spacing.horizontal.g7	搜索按钮的水平间距	-