-
This commit is contained in:
sunzhongyi
@@ -0,0 +1,251 @@
|
||||
'use client';
|
||||
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { Layout, Section, Article } from '@newspaperui/components';
|
||||
import { Headline, BodyText } from '@newspaperui/components';
|
||||
|
||||
export default function ResponsivePage() {
|
||||
return (
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<h1>响应式布局示例</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
展示 NewspaperUI 如何在不同屏幕尺寸下自动调整布局。
|
||||
</p>
|
||||
|
||||
<h2>响应式原理</h2>
|
||||
<p>
|
||||
NewspaperUI 的响应式系统基于栅格列数的动态调整。在不同的屏幕尺寸下，
|
||||
栅格系统会自动调整列数，确保内容在各种设备上都能良好显示。
|
||||
</p>
|
||||
|
||||
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 my-6">
|
||||
<h3 className="text-lg font-semibold text-blue-900 mt-0">响应式断点</h3>
|
||||
<ul className="mb-0 text-blue-800">
|
||||
<li><strong>大屏（≥1024px）</strong>: 24 列</li>
|
||||
<li><strong>中屏（768px-1023px）</strong>: 16 列</li>
|
||||
<li><strong>小屏（<768px）</strong>: 12 列</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>自适应布局示例</h2>
|
||||
<p>
|
||||
以下示例展示了布局如何在不同屏幕尺寸下自动调整。
|
||||
尝试调整浏览器窗口大小查看效果。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="响应式三栏布局"
|
||||
description="大屏显示三栏，中屏显示两栏，小屏显示单栏"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
{/* 大屏: 8+8+8, 中屏: 12+12, 小屏: 24 */}
|
||||
<Article span={8} className="lg:span-8 md:span-12 sm:span-24">
|
||||
<Headline weight="Medium">第一栏</Headline>
|
||||
<BodyText>内容自动适应屏幕宽度</BodyText>
|
||||
</Article>
|
||||
<Article span={8} className="lg:span-8 md:span-12 sm:span-24">
|
||||
<Headline weight="Medium">第二栏</Headline>
|
||||
<BodyText>响应式布局</BodyText>
|
||||
</Article>
|
||||
<Article span={8} className="lg:span-8 md:span-12 sm:span-24">
|
||||
<Headline weight="Medium">第三栏</Headline>
|
||||
<BodyText>自动换行</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">科技新闻</Headline>
|
||||
<BodyText>
|
||||
在大屏上，这三栏并排显示。在中屏上，变为两栏布局。
|
||||
在小屏上，每栏占据全宽，垂直堆叠。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">财经要闻</Headline>
|
||||
<BodyText>
|
||||
响应式布局确保内容在所有设备上都能良好显示，
|
||||
提供最佳的阅读体验。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">文化艺术</Headline>
|
||||
<BodyText>
|
||||
NewspaperUI 的响应式系统会自动处理列宽调整，
|
||||
无需手动编写复杂的媒体查询。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>主次内容响应式</h2>
|
||||
<p>
|
||||
在响应式布局中，主要内容和次要内容的比例也会自动调整。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="主次内容自适应"
|
||||
description="大屏 16+8，中屏 12+12，小屏全宽堆叠"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">主要内容</Headline>
|
||||
<BodyText weight="High">
|
||||
主要内容在大屏占据 16 列，在中屏占据 12 列，
|
||||
在小屏占据全宽。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Low">侧边栏</Headline>
|
||||
<BodyText weight="Low">
|
||||
侧边栏在大屏占据 8 列，在中屏占据 12 列，
|
||||
在小屏移到主内容下方。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">深度报道</Headline>
|
||||
<BodyText weight="High">
|
||||
这是主要内容区域，在大屏幕上占据较大的空间。
|
||||
当屏幕变小时，布局会自动调整以保持良好的可读性。
|
||||
</BodyText>
|
||||
<BodyText>
|
||||
响应式设计确保用户在任何设备上都能获得最佳的阅读体验。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Low">相关链接</Headline>
|
||||
<BodyText weight="Low">
|
||||
• 相关文章 1<br />
|
||||
• 相关文章 2<br />
|
||||
• 相关文章 3<br />
|
||||
• 更多内容...
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>移动优先设计</h2>
|
||||
<p>
|
||||
NewspaperUI 采用移动优先的设计理念，确保内容在小屏设备上也能完美呈现。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="移动优先布局"
|
||||
description="小屏优化的单栏布局"
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={24}>
|
||||
<Headline weight="High">移动端标题</Headline>
|
||||
<BodyText>
|
||||
在移动设备上，内容占据全宽，提供最佳的阅读体验。
|
||||
字体大小和行高也会根据屏幕尺寸自动调整。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>响应式图片</h2>
|
||||
<p>
|
||||
图片和媒体元素也会根据容器宽度自动调整大小。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="响应式媒体"
|
||||
description="图片自动适应容器宽度"
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">带图片的文章</Headline>
|
||||
<div className="bg-gray-200 aspect-video flex items-center justify-center my-4">
|
||||
<span className="text-gray-600">响应式图片占位</span>
|
||||
</div>
|
||||
<BodyText>
|
||||
图片会根据容器宽度自动缩放，保持宽高比不变。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>响应式最佳实践</h2>
|
||||
<ul>
|
||||
<li>使用相对单位（rem、em）而不是绝对单位（px）</li>
|
||||
<li>在小屏设备上简化布局，避免过多的列</li>
|
||||
<li>确保文字大小在移动设备上足够大（至少 16px）</li>
|
||||
<li>触摸目标（按钮、链接）至少 44x44px</li>
|
||||
<li>测试不同设备和屏幕尺寸的显示效果</li>
|
||||
<li>考虑横屏和竖屏两种方向</li>
|
||||
<li>优化图片和媒体资源的加载性能</li>
|
||||
</ul>
|
||||
|
||||
<h2>测试响应式布局</h2>
|
||||
<p>
|
||||
建议在以下设备和尺寸上测试响应式布局：
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-6">
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold mb-2">移动设备</h3>
|
||||
<ul className="text-sm space-y-1 mb-0">
|
||||
<li>iPhone SE (375px)</li>
|
||||
<li>iPhone 12/13 (390px)</li>
|
||||
<li>iPhone 14 Pro Max (430px)</li>
|
||||
<li>Android 小屏 (360px)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold mb-2">平板设备</h3>
|
||||
<ul className="text-sm space-y-1 mb-0">
|
||||
<li>iPad Mini (768px)</li>
|
||||
<li>iPad (810px)</li>
|
||||
<li>iPad Pro (1024px)</li>
|
||||
<li>Android 平板 (800px)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold mb-2">桌面设备</h3>
|
||||
<ul className="text-sm space-y-1 mb-0">
|
||||
<li>笔记本 (1366px)</li>
|
||||
<li>桌面 (1920px)</li>
|
||||
<li>大屏 (2560px)</li>
|
||||
<li>超宽屏 (3440px)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>调试工具</h2>
|
||||
<p>
|
||||
使用浏览器开发者工具的响应式设计模式测试不同屏幕尺寸：
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Chrome DevTools</strong>: Cmd/Ctrl + Shift + M</li>
|
||||
<li><strong>Firefox</strong>: Cmd/Ctrl + Shift + M</li>
|
||||
<li><strong>Safari</strong>: Develop → Enter Responsive Design Mode</li>
|
||||
</ul>
|
||||
|
||||
<h2>性能优化</h2>
|
||||
<ul>
|
||||
<li>使用懒加载（lazy loading）延迟加载图片</li>
|
||||
<li>提供不同尺寸的图片用于不同设备</li>
|
||||
<li>使用现代图片格式（WebP、AVIF）</li>
|
||||
<li>压缩和优化资源文件</li>
|
||||
<li>使用 CDN 加速资源加载</li>
|
||||
<li>减少不必要的 JavaScript 和 CSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
'use client';
|
||||
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { Layout, Section, Article, Layer } from '@newspaperui/components';
|
||||
import { Headline, Subhead, BodyText, Quote } from '@newspaperui/components';
|
||||
|
||||
export default function SpanningPage() {
|
||||
return (
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<h1>跨栏布局示例</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
展示如何使用 NewspaperUI 实现复杂的跨栏报纸布局。
|
||||
</p>
|
||||
|
||||
<h2>经典报纸头版布局</h2>
|
||||
<p>
|
||||
这是一个典型的报纸头版布局，包含主要新闻、次要新闻和浮动拉引。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="报纸头版"
|
||||
description="主新闻占据 16 列，侧边栏占据 8 列，带浮动拉引"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<div style={{ position: 'relative', minHeight: '600px' }}>
|
||||
{/* 主新闻 - 16 列 */}
|
||||
<Article span={16}>
|
||||
<Headline weight="High">重大新闻标题占据主要版面</Headline>
|
||||
<Subhead weight="High">
|
||||
副标题提供更多背景信息和上下文
|
||||
</Subhead>
|
||||
<BodyText weight="High">
|
||||
这是主要新闻的正文内容。在报纸布局中，最重要的新闻通常占据最大的版面，
|
||||
使用最大的字号和最粗的字重。这样的布局能够立即吸引读者的注意力。
|
||||
</BodyText>
|
||||
<BodyText>
|
||||
新闻的后续段落继续详细描述事件的发展。通过合理的跨栏布局，
|
||||
我们可以在有限的版面中呈现丰富的内容。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
{/* 侧边栏 - 8 列 */}
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">次要新闻</Headline>
|
||||
<BodyText weight="Medium">
|
||||
侧边栏的新闻使用较小的字号，适合放置次要但仍然重要的内容。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
{/* 浮动拉引 */}
|
||||
<Layer position="absolute" top="100px" right="20px" zIndex={10}>
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
|
||||
<Quote weight="High">
|
||||
"这是一段重要的引用，用于突出文章中的关键观点"
|
||||
</Quote>
|
||||
</div>
|
||||
</Layer>
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<div style={{ position: 'relative', minHeight: '600px' }}>
|
||||
<Article span={16}>
|
||||
<Headline weight="High">重大新闻标题占据主要版面</Headline>
|
||||
<Subhead weight="High">
|
||||
副标题提供更多背景信息和上下文
|
||||
</Subhead>
|
||||
<BodyText weight="High">
|
||||
这是主要新闻的正文内容。在报纸布局中，最重要的新闻通常占据最大的版面，
|
||||
使用最大的字号和最粗的字重。这样的布局能够立即吸引读者的注意力。
|
||||
</BodyText>
|
||||
<BodyText>
|
||||
新闻的后续段落继续详细描述事件的发展。通过合理的跨栏布局，
|
||||
我们可以在有限的版面中呈现丰富的内容。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">次要新闻</Headline>
|
||||
<BodyText weight="Medium">
|
||||
侧边栏的新闻使用较小的字号，适合放置次要但仍然重要的内容。
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Layer position="absolute" top="100px" right="20px" zIndex={10}>
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
|
||||
<Quote weight="High">
|
||||
"这是一段重要的引用，用于突出文章中的关键观点"
|
||||
</Quote>
|
||||
</div>
|
||||
</Layer>
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>三栏等宽布局</h2>
|
||||
<p>
|
||||
将 24 列平均分为三个 8 列的区域，适合展示多个同等重要的内容。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="三栏布局"
|
||||
description="三个 8 列的文章并排显示"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">第一栏标题</Headline>
|
||||
<BodyText>第一栏的内容...</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">第二栏标题</Headline>
|
||||
<BodyText>第二栏的内容...</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">第三栏标题</Headline>
|
||||
<BodyText>第三栏的内容...</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">科技新闻</Headline>
|
||||
<BodyText>
|
||||
最新的科技动态和创新成果，展示技术发展的最新趋势。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">财经要闻</Headline>
|
||||
<BodyText>
|
||||
市场动态和经济分析，帮助读者了解财经领域的重要信息。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={8}>
|
||||
<Headline weight="Medium">文化艺术</Headline>
|
||||
<BodyText>
|
||||
文化活动和艺术展览，丰富读者的精神文化生活。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>不对称布局</h2>
|
||||
<p>
|
||||
使用不同的列宽组合创建视觉层次，突出重要内容。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="12 + 12 列布局"
|
||||
description="两个等宽的 12 列区域"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">左侧主要内容</Headline>
|
||||
<BodyText weight="High">
|
||||
占据 12 列的主要内容区域...
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">右侧主要内容</Headline>
|
||||
<BodyText weight="High">
|
||||
同样占据 12 列的内容区域...
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">深度报道：城市发展</Headline>
|
||||
<BodyText weight="High">
|
||||
这是一篇深度报道，详细分析城市发展的现状和未来趋势。
|
||||
12 列的宽度提供了良好的阅读体验。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">专题调查：环境保护</Headline>
|
||||
<BodyText weight="High">
|
||||
环境保护专题调查报告，展示环保工作的成果和挑战。
|
||||
与左��内容形成对比和呼应。
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>复杂混合布局</h2>
|
||||
<p>
|
||||
组合多种列宽，创建丰富的视觉层次和内容结构。
|
||||
</p>
|
||||
|
||||
<Demo
|
||||
title="混合列宽布局"
|
||||
description="6 + 12 + 6 列的组合布局"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={6}>
|
||||
<Headline weight="Low">侧边栏</Headline>
|
||||
<BodyText weight="Low">简短内容</BodyText>
|
||||
</Article>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">主要内容</Headline>
|
||||
<BodyText>详细的主要内容...</BodyText>
|
||||
</Article>
|
||||
<Article span={6}>
|
||||
<Headline weight="Low">另一侧边栏</Headline>
|
||||
<BodyText weight="Low">补充信息</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={6}>
|
||||
<Headline weight="Low">快讯</Headline>
|
||||
<BodyText weight="Low">
|
||||
• 新闻 1<br />
|
||||
• 新闻 2<br />
|
||||
• 新闻 3
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={12}>
|
||||
<Headline weight="High">今日焦点</Headline>
|
||||
<BodyText>
|
||||
主要新闻内容占据中间的 12 列，提供充足的空间展示详细信息。
|
||||
两侧的 6 列侧边栏提供补充内容和快讯。
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={6}>
|
||||
<Headline weight="Low">相关链接</Headline>
|
||||
<BodyText weight="Low">
|
||||
• 链接 1<br />
|
||||
• 链接 2<br />
|
||||
• 链接 3
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
|
||||
<h2>布局技巧</h2>
|
||||
<ul>
|
||||
<li>使用较大的 span 值（12-16 列）突出重要内容</li>
|
||||
<li>侧边栏使用较小的 span 值（4-8 列）</li>
|
||||
<li>保持布局的平衡感，避免过于拥挤或空旷</li>
|
||||
<li>使用浮动 Layer 添加视觉亮点</li>
|
||||
<li>通过视觉权重系统创建清晰的信息层次</li>
|
||||
<li>考虑内容的重要性和阅读顺序</li>
|
||||
</ul>
|
||||
|
||||
<h2>注意事项</h2>
|
||||
<ul>
|
||||
<li>确保所有 Article 的 span 总和不超过 Section 的 columns</li>
|
||||
<li>在小屏设备上测试布局的响应式效果</li>
|
||||
<li>避免过多的跨栏，保持布局的可读性</li>
|
||||
<li>使用一致的列宽比例，如 8:16、6:12:6 等</li>
|
||||
<li>浮动元素不要遮挡重要内容</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user