n-cell 单元格
列表行原语:一行之内排开 图标(插槽)/ 标题 / 说明 / 值 / 右侧图标(插槽)/ 箭头,适合设置页、个人中心、表单信息行等成组的列表场景。
- 单元格是"行"不是"卡片":默认透明底,表面色由外层容器(页面画布或卡片)决定;需要独立表面时用
custom-style给底色与圆角- 图标一律放插槽(配合 n-icon),组件不自绘图标;
arrow的箭头是纯 CSS 形(无字体文件依赖),朝向用arrow-direction调- 禁用保留配色、整体降透明,并拦截点击(不只是视觉禁用)
open-type让整行即按钮(仅微信端):分享/客服/手机号等开放能力与事件同 n-button,其余端编译时裁掉
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| title | 左侧标题(内容复杂时改用 title 插槽) | String | "" | - |
| label | 标题下方的说明文字(次要色小字) | String | "" | - |
| value | 右侧的值(次要色、右对齐;内容复杂时改用 value 插槽) | String | "" | - |
| size | 尺寸 | String | md | lg<br/>md<br/>sm |
| arrow | 是否显示右侧箭头(导航/入口形态) | Boolean | false | - |
| arrow-direction | 箭头朝向(仅 arrow 开启时生效,常用于展开/收起行) | String | right | up<br/>down<br/>left<br/>right |
| open-type | 微信小程序开放能力,同原生 button open-type(整行即按钮;仅微信端生效,禁用时自动失效) | String | "" | contact<br/>share<br/>getPhoneNumber<br/>getRealtimePhoneNumber<br/>getUserInfo<br/>launchApp<br/>openSetting<br/>chooseAvatar<br/>agreePrivacyAuthorization<br/>feedback<br/>liveActivity |
| border | 底部分割线(全宽与按压反馈同盒:antd-mobile/Vant/FirstUI 同构;成组竖排时最后一行建议关闭) | Boolean | true | - |
| required | 标题前必填标记(功能色星号,表单行用) | Boolean | false | - |
| disabled | 禁用(保色降透明,拦截点击与按压反馈) | Boolean | false | - |
| title-style | 微调标题的行内样式,如 "font-weight:600" | String | "" | 与 css 相同 |
| label-style | 微调说明文字的行内样式 | String | "" | 与 css 相同 |
| value-style | 微调值的行内样式,如 "color:#10b981;font-weight:bold" | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击单元格时触发(禁用时不触发) | 事件对象 |
| getuserinfo | open-type=getUserInfo 时触发(微信小程序) | 事件对象 |
| contact | open-type=contact 客服会话回调(微信小程序) | 事件对象 |
| getphonenumber | open-type=getPhoneNumber 时触发(微信小程序) | 事件对象 |
| getrealtimephonenumber | open-type=getRealtimePhoneNumber 时触发(微信小程序) | 事件对象 |
| error | 开放能力发生错误时触发(微信小程序) | 事件对象 |
| opensetting | open-type=openSetting 授权页关闭后触发(微信小程序) | 事件对象 |
| launchapp | open-type=launchApp 打开 APP 成功时触发(微信小程序) | 事件对象 |
| chooseavatar | open-type=chooseAvatar 时触发(微信小程序) | 事件对象 |
| agreeprivacyauthorization | 用户同意隐私协议时触发(微信小程序) | 事件对象 |
| createliveactivity | open-type=liveActivity 订阅回调时触发(微信小程序) | 事件对象 |
插槽
| 插槽名 | 说明 |
|---|---|
| icon | 左侧图标区(配合 n-icon;与标题的间距由组件保证) |
| title | 替换标题文字(自由组合图标、徽标等) |
| value | 替换右侧值(可放任意组件:n-button 行内操作按钮、n-tag 状态标签等) |
| right-icon | 右侧图标区(位于值之后、箭头之前,可与 arrow 共存) |