n-gap 间距块

用于内容之间留白、带背景的区块分隔，以及包裹内容时的左右留白。无需 CSS gap，不自行固定位置。

实现说明

参考机制	组件做法	融合说明
定高空白与三档尺寸	size 提供 small/default/large；height 可独立覆盖	默认高度为 4/8/12px，沿用库的 px 数字约定；显式 0 表示零高度
左右留白容器	默认插槽承载内容，gap 控制左右内边距	三档内边距为 8/12/16px；包裹内容时显式 height="auto"，不增加另一套模式开关
上下外间距、背景和圆角	marginTop/marginBottom、bgColor、radius	背景支持实色与方向关键词渐变；默认透明，圆角同时裁剪内容
点击	点击根节点触发 click，无参数	插槽冒泡自然触发一次；业务按钮可自行阻止冒泡
背景更新	独立背景层，渐变值参与背景键	连续修改渐变可刷新背景，插槽实例不重建
根样式定制	customClass/customStyle 与主题令牌	几何由属性和尺寸令牌管理，外观样式不能覆盖高度、内边距、外边距、圆角或伸缩

基础用法

<n-gap />
<n-gap size="large" />
<n-gap :height="24" bg-color="#f2f3f5" />
<n-gap height="auto" :gap="16" :radius="8">
  <view style="height:48px"><text>两侧留白的内容</text></view>
</n-gap>

数字和数字字符串按 px；也支持 px/rpx 字符串。height 可传 auto；高度百分比需父容器有确定高度。height/gap 留空跟随 size，0 是有效覆盖。上下外间距允许负数，其余负值按 0；非有限数值或不支持的长度写法按 0 处理。组件不提供水平排列容器，不会替插槽设置项目间距。

属性

属性	类型	默认值	说明
size	NGapSize	default	small/default/large，控制默认高度及左右内边距
height	NGapLength	空串	留空使用尺寸档位；auto 随内容；数字、px/rpx/%；0 不回退
gap	NGapLength	空串	左右内边距；留空跟随档位；数字或 px/rpx
bgColor	string	空串	实色或方向关键词渐变；空串透明
radius	NGapLength	0	圆角；数字或 px/rpx，同时裁剪内容
marginTop	NGapLength	0	上外间距；数字或 px/rpx，可负数
marginBottom	NGapLength	0	下外间距；数字或 px/rpx，可负数
customClass	string	空串	组件内定义的根节点类；提供 n-gap--muted 半透明类
customStyle	string	空串	主题令牌、背景、颜色、透明度和阴影；几何请使用属性

事件

事件	参数	说明
click	无	点击组件及未阻止冒泡的插槽内容时触发

插槽

名称	参数	说明
default	无	包裹内容；通常配合 height="auto"，定高模式超出的内容会被裁剪

样式

尺寸令牌为 --n-gap-height-small/default/large 与 --n-gap-padding-small/default/large，默认分别为 4/8/12px 和 8/12/16px；显式 height/gap 优先。背景令牌为 --n-gap-background，默认透明；bgColor 显式值优先。编译期可在 uni.scss 覆盖对应 $n-gap-* 变量。

示例预览

百分比配置使用 200px 高的父容器，复制页面保留同一容器。较大尺寸仅裁剪示例预览窗口，组件实际尺寸保持原值；窗口尺寸变化时预览范围同步更新。背景和自定义样式输入不限制长度。

平台兼容性

本体功能、默认插槽与点击、示例属性联动和复制页面已复验；微信、Android 和 iOS 模拟器目标字节码编译通过。商业复核仍未通过：示例公共工作台选中态使用白字与品牌绿底，浅深主题文字对比均约为 2.54:1，低于本次 4.5:1 验收目标。完整明细见组件验收记录。设备运行与鸿蒙不计为已验证。