集成搜索组件

更新时间: 2023/07/21 06:56:54

IM UIKit 提供搜索组件(search-kit),搜索组件由搜索功能组件(Search)和添加功能组件(Add )组成。

界面效果

Web搜索组件930.png

界面集成

在您的 React 项目中导入搜索功能组件和添加功能组件,并设置搜索界面的位置和尺寸,即可集成 IM UIKit 默认的搜索界面。

示例代码如下:

import React from 'react'
import { AddContainer, SearchContainer } from '@xkit-yx/im-kit-ui'

import '@xkit-yx/im-kit-ui/es/style'

const Page = () => {
  const goChat = () => {
    // 点击去聊天,可以在此做路由跳转等操作
  }

  return (
    <div
      style={{
        display: 'flex',
        width: 800,
        alignItems: 'center',
      }}
    >
      <SearchContainer onClickChat={goChat} />
      <div style={{ marginLeft: 20 }}>
        <AddContainer onClickChat={goChat} />
      </div>
    </div>
  )
}

IM UIKit 默认的搜索组件,支持如下功能:

  • 搜索好友或群组
  • 添加好友
  • 创建群组
  • 加入群组

相关信息

如果默认搜索界面无法满足您的业务需求,您可参考自定义搜索组件 UI 自定义。

此文档是否对你有帮助?
有帮助
去反馈
  • 界面效果
  • 界面集成
  • 相关信息