Web
自定义搜索组件 UI
更新时间： 2024/03/14 19:21:16
如果默认的搜索组件（search-kit）无法满足您的业务需求，您可通过本节介绍的参数进行界面自定义。
自定义参数概览
search-kit 提供的自定义参数如下：
参数 |
类型 | 说明 | 子组件 |
|---|---|---|---|
renderEmpty |
(() => Element) |
没有好友和群组时的状态展示，具体示例参见下文的自定义好友和群组为空时的内容 | Search 组件 |
renderSearchResultEmpty |
(() => Element) |
没有搜索结果时的自定义渲染，默认的展示内容参见搜索结果为空时的内容 | |
onClickChat |
(() => void) |
点击去聊天回调 | Add 组件 |
prefix |
string | 样式前缀，默认值："search" | |
commonPrefix |
string | 公共样式前缀，默认值："common" |
自定义示例
自定义好友和群组为空时的内容
-
示例代码
const renderEmpty = () => { return ( <div className='wrapper'> <img className='avatar' src="https://yx-web-nosdn.netease.im/common/3b71a381b4e6d69b226c611d44cb4f1a/没有订单.png" alt="" /> <div className='no-session'>您暂无好友哦～</div> </div> ) } <SearchContainer renderEmpty={renderEmpty} /> -
效果对比
默认自定义后
相关图例
搜索结果为空时的内容
此文档是否对你有帮助？