Tantalum UI

SearchBar 搜索栏

注：

  • 该组件本身没有固定顶部功能，可以配合 Sticky 组件实现置顶功能。
import {
  TaSearchBar,
  TaGroup,
  showToast,
  SearchBarOnFieldClick,
  SearchBarOnInput,
  SearchBarOnSearch
} from '@/index'
import { placeholders } from './data'

export default function ExpSearchBar() {
  const onInput: SearchBarOnInput = (text, fn) => {
    fn(
      text
        ? 'ABCD'.split('').map(v => {
            return {
              text: `${text} ${v}`,
              tags: ['tag1', 'tag2']
            }
          })
        : []
    )
  }

  const onInput2: SearchBarOnInput = (text, fn) => {
    showToast(`输入了 ${text}`)

    onInput(text, fn)
  }

  const onSearch: SearchBarOnSearch = res => {
    console.log('onSearch', res)
    showToast(`搜索了 ${res.text}`)
  }

  const onClick: SearchBarOnFieldClick = res => {
    console.log('onFieldClick', res)
    showToast(`搜索词 ${res.text}`)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaSearchBar />
      </TaGroup>
      <TaGroup title="搜索建议">
        <TaSearchBar onInput={onInput} />
      </TaGroup>
      <TaGroup title="显示取消按钮">
        <TaSearchBar showCancel />
      </TaGroup>
      <TaGroup title="设置候选项">
        <TaSearchBar placeholders={placeholders} />
      </TaGroup>
      <TaGroup title="深色适配">
        <TaSearchBar className="exp-searchBar-dark-style" showCancel ghost />
      </TaGroup>
      <TaGroup title="只读（readonly=true）">
        <TaSearchBar readonly placeholders={placeholders} />
      </TaGroup>
      <TaGroup title="onInput/onFocus/onBlur/onCancelClick/onSearch">
        <TaSearchBar
          showCancel
          placeholders={placeholders}
          onInput={onInput2}
          onFocus={() => showToast('focus')}
          onBlur={() => showToast('blur')}
          onCancelClick={() => {
            showToast('取消按钮点击')
          }}
          onSearch={onSearch}
        />
      </TaGroup>
      <TaGroup title="onFieldClick & readonly=true">
        <TaSearchBar
          readonly
          placeholders={placeholders}
          onFieldClick={onClick}
        />
      </TaGroup>
    </>
  )
}

Import 

import { TaSearchBar } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type {
  SearchBarSetSuggestList,
  SearchBarOnFocus,
  SearchBarOnBlur,
  SearchBarOnInput,
  SearchBarOnSearch,
  SearchBarOnFieldClick
} from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
placeholdersstring/string[]否设置候选值列表，多个时轮询显示
placeholderIntervalnumber5000否placeholder 切换时间，placeholders 有多个时生效
ghostbooleanfalse否是否开启反色模式，开始后适用于深色底色，通过 CSS 设置背景色
readonlybooleanfalse否是否只读模式，开启后主要用于搜索入口场景
maxlengthnumber100否最大长度
focusbooleanfalse否加载时是否获取焦点
showCancelbooleanfalse否是否展示取消按钮

Events

事件描述回调函数参数TypeScript 函数
onInput输入值改变时触发，包括 clear 的( text: string, setSuggestList: SearchBarSetSuggestList )SearchBarOnInput
onFocus输入框获取焦点时触发( text: string, setSuggestList: SearchBarSetSuggestList )SearchBarOnFocus
onBlur输入框移出焦点时触发( text: string, setSuggestList: SearchBarSetSuggestList )SearchBarOnBlur
onCancelClick取消按钮点击e: Event
onFieldClick输入框点击，配合 readonly 使用，获取到当前候选值payload: { text: string }SearchBarOnFieldClick
onSearch触发搜索时payload: { text: string, source: string }SearchBarOnSearch

SearchBarSetSuggestList 

type SearchBarSetSuggestList = (
  res: (
    | string
    | number
    | {
        text: string | number
        tags?: string[]
      }
  )[]
) => void

const suggestList = ['suggest A', 'suggest B']
// Or
const suggestList = [
  {
    text: '油烟机',
    tags: ['厨房', '电器']
  }
]