通用/头部

Header 头部

Header 用于承载业务品牌、搜索、通知和快捷入口。

组件展示

保留当前确认正确的展示样式,统一用于组件验收和后续细节微调。

布局说明

当前页面仅展示单一确认版本,用于观察搜索框、提示条、头像组以及右侧图标的最终排布。

Room Header IM

IM 房间头部变体,包含会话信息、快捷操作按钮以及右侧工具 icon。

布局说明

该变体使用项目按钮组件和 iconfont,适用于私聊或 IM 会话场景的房间头部。

Room Header Voice

语音房头部变体,包含房间信息、邀请按钮、密码开关和右侧更多操作。

布局说明

该变体复用项目按钮、switch 密码样式和 iconfont,适用于语音房场景的房间头部。

Room Header Community Hall

社区大厅头部变体,包含大厅图标、标题和邀请按钮。

布局说明

该变体适用于社区大厅场景,保留左侧大厅信息和中部邀请按钮,右侧内容为空。

Room Header Under Community

旗下社区头部变体,包含战队图标、标题和创建战队社区按钮。

布局说明

该变体适用于旗下社区页面顶部,右侧创建入口复用项目 Button 组件。

Room Header Play With

游戏服务头部变体,包含游戏服务标题、服务入驻和联系客服操作。

布局说明

该变体适用于陪玩/游戏服务页面顶部,右侧操作复用项目 Button 组件。

API 参考

参数 说明 类型 可选值 默认值
variant Header 变体类型,支持默认头部、IM 房间头部、语音房头部、社区大厅头部、旗下社区头部和游戏服务头部 string 'default' | 'room-header-im' | 'room-header-voice' | 'room-header-community-hall' | 'room-header-under-community' | 'room-header-play-with' 'default'
width 组件宽度,支持数字或 CSS 宽度字符串 number | string - '100%'
brandName 品牌名称,仅用于 logo 图片的 alt 文本 string - 'NN.COM'
logoLightSrc 亮色模式下的 logo 图片地址 string - '../image/Header/logo-light.png'
logoDarkSrc 暗色模式下的 logo 图片地址 string - '../image/Header/logo-dark.png'
showBack 默认头部中是否显示返回区域 boolean true | false true
backText 返回区域文案;传入后返回区域显示为可点击态 string - ''
backHref 返回区域跳转链接 string - ''
onBackClick 返回区域点击回调 function - null
searchPlaceholder 默认头部搜索输入框的原生占位文案 string - '搜索社区、用户名称/ID'
searchKeywords 默认头部搜索框展示文案列表,当前仅使用第一项固定展示 string[] - ['搜索社区、用户名称/ID']
noticeText 默认头部中部消息条文案 string - '新用户进入群时默认时默认...'
showNoticeDot 默认头部消息条右上角是否显示红点徽标 boolean true | false true
avatarItems 默认头部右侧头像组数据,支持头像图、尺寸和徽标 array - []
rightIcons 默认头部右侧消息和更多图标配置 array - []
showWindowControls 默认头部是否显示最右侧系统 icon 组 boolean true | false true
nickname room-header-im 左侧用户昵称 string - "User's nickname"
metaText room-header-im 左侧辅助文案 string - '临时会话'
actions room-header-im 中部按钮列表,复用项目 button 组件 array - []
iconActions room-header-im / room-header-voice 右侧 icon 列表 array - []
roomCount room-header-voice 左侧房间计数徽标文案 string - '52'
roomTitle room-header-voice 房间标题 string - '语音房名称多少度'
infoTooltip room-header-voice 左侧整个语音房信息 box 的 tooltip 文案 string - '编辑招募信息'
roomStats room-header-voice 房间人数统计 object { current, total } { current: '12', total: '10' }
passwordSwitch room-header-voice 密码开关配置,复用 switch 组件的 password 样式 object { passwordState, passwordCode, hiddenCode } { passwordState: 'filled', passwordCode: '8538', hiddenCode: '••••' }
rightButtons room-header-voice 右侧更多 icon 前的按钮组,复用 System button 组件 array - []
hallTitle room-header-community-hall 左侧大厅标题 string - '英雄联盟社区'
hallIconClass room-header-community-hall 左侧大厅 icon 的 iconfont 类名 string - 'nicon-a-Lounge-Linexianliaodating-xianxing'
underTitle room-header-under-community 左侧标题 string - '旗下社区'
underIconClass room-header-under-community 左侧战队 icon 的 iconfont 类名 string - 'nicon-a-BattleTeam-Linezhandui-xianxing'
playTitle room-header-play-with 左侧标题 string - '游戏服务'
playIconClass room-header-play-with 左侧游戏服务 icon 的 iconfont 类名 string - 'nicon-a-GameswithPlay-Lineyouxidaiwan-xianxing'
className 自定义类名 string - ''