@tanzhenxing/zx-gap v1.0.5

Gap 间隔槽

该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量。

平台差异说明

基本使用

直接引入即可使用：

<template>
  <view>
    <view>内容块1</view>
    <zx-gap></zx-gap>
    <view>内容块2</view>
  </view>
</template>

自定义高度和背景色

通过 height 配置高度，单位px；通过 bgColor 配置背景颜色：

<template>
  <zx-gap height="80" bgColor="#f5f5f5"></zx-gap>
</template>

设置边距

通过 marginTop 和 marginBottom 设置与前后元素的距离：

<template>
  <zx-gap 
    height="40" 
    marginTop="20" 
    marginBottom="20"
    bgColor="#eee"
  ></zx-gap>
</template>

自定义样式

通过 customStyle 属性可以传入自定义样式对象：

<template>
  <zx-gap 
    :customStyle="{
      borderRadius: '8px',
      border: '1px solid #ddd'
    }"
  ></zx-gap>
</template>

API

Props

注意事项

1. 组件支持数字和字符串类型的尺寸值，会自动添加 px 单位
2. 如果传入的是带单位的字符串（如 "20px"、"2rem"），会保持原有单位
3. bgColor 支持任何有效的 CSS 颜色值
4. customStyle 中的样式会与组件默认样式进行深度合并

使用场景

• 列表项之间的分隔
• 内容区块的间隔
• 页面布局中的留白处理
• 视觉分组的分隔线