跳到主要内容

搜索 Search

适用于搜索场景

API

安装使用​

import { TiSearch } from '@titian-design/mobile-react'

用法示例​

基础用法​

const App: React.FC = () => {
  return (
    <>
      <TiSearch value={ value } onSearch={onSearch} />
    </>
  )
}

居中模式​

const App: React.FC = () => {
  return (
    <>
      <TiSearch center />
    </>
  )
}

搜索按钮状态​

属性含义：
  1. animation 设置关闭搜索按钮动画。
  2. alwaysShowSearch 设置一直显示搜索按钮。
  3. useSearchButton 设置不使用组件自带的搜索按钮。
const App: React.FC = () => {
  return (
    <>
      <TiSearch animation={false} />
      <TiSearch alwaysShowSearch />
      <TiSearch useSearchButton={false} />
    </>
  )
}

使用插槽​

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

const App: React.FC = () => {
  return (
    <>
      <TiSearch>
        <div slot="prefix">
          <span>请选择</span>
          <TiIcon name="arrow-down" size="32" />
        </div>
        <TiIcon slot="right-icon" name="scan" size="32" />
      <TiSearch />
      <TiSearch>
        <div slot="prefix">
          <TiIcon name="category" size="42" />
        </div>
        <div slot="suffix">
          <TiIcon name="arrange" size="42" />
        </div>
      <TiSearch />
    </>
  )
}

键盘确认按钮文字​

const App: React.FC = () => {
  return (
    <>
      <TiSearch confirmType="done" value="完成" />
      <TiSearch confirmType="send" value="发送" />
      <TiSearch confirmType="search" value="搜索" />
      <TiSearch confirmType="next" value="下一项" />
      <TiSearch confirmType="go" value="前往" />
    </>
  )
}

TiSearch API​

属性 Properties​

名称类型必填默认值说明备注
valuestring否-当前输入的值-
centerboolean否false输入框内容对齐方式，采用居中模式-
placeholderstring否-输入框为空时占位符-
autofocusboolean否false获取焦点-
disabledboolean否false输入框禁用-
readOnlyboolean否false输入框只读-
confirmTypestring否search设置键盘右下角按钮的文字，仅在type='text'时生效-
clearableboolean否true是否启用清除控件-
leftIconstring否search左侧搜索图标，不启用传none-
extStylestring | Record<string, string>否-根节点样式-
animationboolean否true是否启用搜索按钮动画-
alwaysShowSearchboolean否false是否常显搜索按钮，默认在聚焦状态下隐藏-
alwaysShowPrefixboolean否false是否常显前置插槽，默认在聚焦状态下隐藏-
alwaysShowSuffixboolean否false是否常显后置插槽，默认在聚焦状态下隐藏-
alwaysShowRightIconboolean否false是否常显右侧图标插槽，默认在聚焦状态下隐藏-
useSearchButtonboolean否true是否启用组件搜索按钮-

事件 Events​

名称参数列表描述备注
onFocus(e: CustomEvent) => void输入框聚焦时触发-
onBlur(e: CustomEvent) => void输入框失焦时触发-
onSearch(e: CustomEvent<{value: string}>) => void确定搜索时触发-
onChange(e: CustomEvent<{value: string}>) => void输入值变化时触发-
onClear(e: CustomEvent) => void清除时触发-
onClickInput(e: CustomEvent) => void点击输入框是触发-

插槽 Slots​

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

外部样式类 External Classes​

名称说明备注
extClass根节点样式类-
searchButtonClass搜索按钮样式类如果不需要按钮动画，可使用 transition: none;覆盖
searchInnerClass搜索框容器样式类
inputClassinput 样式类-

CSS 变量 CSS Variable​

变量默认值说明备注
--search-font-size28px搜索文字字号-
--search-out-height108px搜索框整体高度-
--search-out-background#fff搜索框整体背景色-
--search-out-padding-v0px搜索框整体垂直方向内边距-
--search-out-padding-h28px搜索框整体水平方向内边距-
--search-inner-height72px搜索框内部输入区域高度-
--search-inner-background#f5f5f5搜索框内部输入区域背景色-
--search-inner-padding-v0px搜索框内部输入区域垂直方向内边距-
--search-inner-padding-h28px搜索框内部输入区域水平方向内边距-
--search-radiuscalc(var(--capsule-radius-size, 0px) + 12px)搜索框容器圆角-
--capsule-radius-size0px全局圆角增量，控制图标风格。在项目根节点统一设置-
--search-icon-color#212121搜索图标颜色-