Spacer (间距)

用于在页面区块之间创建垂直间距，支持响应式和固定高度两种模式。【✅ 已发布】

场景:

视口:

加载中...

当前视口: 1920px × 600px场景: 默认响应式间距

打开链接

功能特性

✅ 双模式间距 - 支持响应式（default）和固定高度（fixed）两种模式
✅ 响应式设计 - default 模式下不同屏幕尺寸自动调整间距
✅ 简单易用 - 无需复杂配置，一行代码即可使用
✅ 统一管理 - 间距规范由 Spacer 统一控制，组件不需要关心外部间距
✅ 灵活覆盖 - 支持通过 className 自定义间距高度和样式
✅ 性能优化 - 纯 CSS 实现，无 JavaScript 运算

Props 参数

SpacerProps

Prop	类型	默认值	必需	说明
`data`	`SpacerData`	-	✅	间距数据配置对象
`className`	`string`	`''`	-	自定义根容器类名

SpacerData 配置

参数	类型	默认值	必需	说明
`space`	`'default' \| 'fixed'`	`'default'`	✅	间距模式。default: 响应式间距；fixed: 固定间距

使用示例

最简示例


import { Spacer } from '@anker-in/headless-ui/biz'
 
<Spacer data={{ space: 'default' }} />

响应式间距（default）


// 不同屏幕尺寸自动调整间距
// Mobile/Tablet/Laptop: 64px
// Desktop: 96px
// LG Desktop: 128px
<Spacer data={{ space: 'default' }} />

固定间距（fixed）


// 所有屏幕尺寸间距一致（64px）
<Spacer data={{ space: 'fixed' }} />

自定义间距高度


// 通过 className 覆盖默认高度
<Spacer
  data={{ space: 'fixed' }}
  className="!h-32" // 覆盖为 128px (32 * 4)
/>
 
<Spacer
  data={{ space: 'default' }}
  className="!h-24 laptop:!h-32 desktop:!h-40"
/>

添加背景色或边框


<Spacer
  data={{ space: 'default' }}
  className="bg-gradient-to-b from-white to-gray-100"
/>
 
<Spacer
  data={{ space: 'fixed' }}
  className="border-t border-gray-200"
/>

在页面布局中使用


function LandingPage() {
  return (
    <div>
      <HeroBanner data={heroBannerData} />
 
      <Spacer data={{ space: 'default' }} />
 
      <FeatureSection data={featuresData} />
 
      <Spacer data={{ space: 'default' }} />
 
      <Testimonials data={testimonialsData} />
 
      <Spacer data={{ space: 'fixed' }} />
 
      <Footer />
    </div>
  )
}

响应式行为

断点说明

组件在不同设备上的间距高度：

断点	屏幕宽度	default 模式	fixed 模式
Mobile	< 768px	64px	64px
Tablet	768px - 1024px	64px	64px
Laptop	1025px - 1439px	64px	64px
Desktop	1440px - 1919px	96px	64px
LG Desktop	≥ 1920px	128px	64px

模式对比

特性	default 模式	fixed 模式
响应式	✅ 是	❌ 否
大屏间距	128px	64px
小屏间距	64px	64px
适用场景	需要大屏增加视觉舒适度	需要所有屏幕间距一致

设计规范

使用场景

适合使用 Spacer 的场景：

✅ 页面主要区块之间的间距（如 Hero Banner、Feature Section、Footer 之间）
✅ 不同内容模块之间的分隔
✅ 需要统一管理和调整的间距

不适合使用 Spacer 的场景：

❌ 组件内部元素间距（应使用 gap 或 margin）
❌ 文本段落间距（应使用 CSS 的 margin-bottom）
❌ 列表项间距（应使用 gap 或 space-y）
❌ 超小间距（< 16px，可以用 <div className="h-4" />）

间距选择建议

何时使用 default 模式：

页面主要区块之间（默认选择）
希望大屏设备有更多空间感
跨多个断点的通用布局

何时使用 fixed 模式：

需要精确控制间距高度
所有设备保持一致的视觉节奏
特定设计要求固定间距

间距高度规范

推荐的间距高度（基于设计系统）：

超小间距：16px (h-4)
小间距：24px (h-6)
中间距：32px (h-8)
标准间距：64px (Spacer default/fixed)
大间距：96px (Spacer default on Desktop)
超大间距：128px (Spacer default on LG Desktop)

无障碍性

语义化标签

✅ 使用纯 <div> 实现，不影响语义结构
✅ 不包含内容，搜索引擎会忽略
✅ 不影响屏幕阅读器导航

建议

Spacer 仅用于视觉间距，不应包含任何内容
如需分隔线，使用 <hr> 标签或添加边框样式
确保间距不会影响键盘导航和焦点顺序

性能优化

✅ 纯 CSS 实现 - 无 JavaScript 运算，性能极佳
✅ 无状态组件 - 不引入额外的渲染开销
✅ Tailwind Classes - 利用 Tailwind 的 JIT 模式，按需生成样式
✅ 极小体积 - 组件代码少于 20 行

实现细节


// 核心实现：纯 CSS 类名
const spaceClasses = {
  default: 'h-16 laptop:h-16 desktop:h-24 lg-desktop:h-32',
  fixed: 'h-16',
}

常见问题

1. 为什么不直接使用 `<div className="h-16" />`？

使用 Spacer 组件的优势：

组件独立性：组件不需要关心自己的外部间距
统一管理：间距规范由 Spacer 统一控制
响应式：自动适配不同屏幕尺寸
可维护性：修改全局间距只需调整 Spacer 组件

2. default 和 fixed 模式有什么区别？

default：响应式间距，大屏时间距更大（64px → 128px）
fixed：所有屏幕尺寸间距一致（64px）

3. 可以自定义间距高度吗？

可以。通过 className 覆盖高度：


<Spacer
  data={{ space: 'fixed' }}
  className="!h-32" // 覆盖为 128px
/>

4. Spacer 组件会影响 SEO 吗？

不会。Spacer 只是一个空的 <div>，不包含内容，搜索引擎会忽略它。

5. 可以添加背景色或边框吗？

可以。通过 className 添加样式：


<Spacer
  data={{ space: 'default' }}
  className="bg-gradient-to-b from-white to-gray-100"
/>

6. 移动端和桌面端间距为什么不同？

设计原则上，大屏设备有更多空间，适当增加间距可以改善视觉舒适度。如果需要一致的间距，使用 fixed 模式。

7. 什么时候不应该使用 Spacer？

以下场景不推荐使用：

组件内部元素间距（应使用 gap 或 margin）
文本段落间距（应使用 CSS 的 margin-bottom）
列表项间距（应使用 gap 或 space-y）
超小间距（< 16px，可以用 <div className="h-4" />）

技术实现

核心代码


import { cn } from '@/lib/utils'
import scenarios from './scenarios.json'
 
interface SpacerData {
  space: 'default' | 'fixed'
}
 
interface SpacerProps {
  data: SpacerData
  className?: string
}
 
const spaceClasses = {
  default: 'h-16 laptop:h-16 desktop:h-24 lg-desktop:h-32',
  fixed: 'h-16',
}
 
export default function Spacer({ data, className }: SpacerProps) {
  const { space = 'default' } = data
  return <div className={cn(spaceClasses[space], className)} />
}

样式映射

模式	Tailwind Classes	实际高度
default	`h-16 laptop:h-16 desktop:h-24 lg-desktop:h-32`	64px / 96px / 128px
fixed	`h-16`	64px

Tailwind 配置


// tailwind.config.js
screens: {
  tablet: '768px',
  laptop: '1025px',
  desktop: '1440px',
  'lg-desktop': '1920px',
}

替代方案

使用 Tailwind 工具类


// 替代 Spacer 的快速方案
<div className="h-16 laptop:h-24 desktop:h-32" />

使用 Stack 布局


// 使用 Flexbox gap 替代 Spacer
<div className="flex flex-col gap-16">
  <section>Section 1</section>
  <section>Section 2</section>
  <section>Section 3</section>
</div>