自定义搜索组件 UI
更新时间: 2023/07/21 06:56:54
如果默认的搜索组件(search-kit
)无法满足您的业务需求,您可通过本节介绍的参数进行界面自定义。
自定义参数概览
search-kit
提供的自定义参数如下:
参数 |
类型 | 说明 | 子组件 |
---|---|---|---|
renderEmpty |
(() => Element) |
没有好友和群组时的状态展示,具体示例参见下文的自定义好友和群组为空时的内容 | Search 组件 |
renderSearchResultEmpty |
(() => Element) |
没有搜索结果时的自定义渲染,默认的展示内容参见搜索结果为空时的内容 | |
onClickChat |
(() => void) |
点击去聊天回调 | Add 组件 |
prefix |
string | 样式前缀,默认值:"search" | |
commonPrefix |
string | 公共样式前缀,默认值:"common" |
自定义示例
自定义好友和群组为空时的内容
-
在
IMAppProps
传入正确的appkey
、account
和token
即可在线预览效果。 -
示例代码
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} />
-
效果对比
默认自定义后
相关图例
搜索结果为空时的内容
此文档是否对你有帮助?