Pine/newsui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-

Browse Source
This commit is contained in:
sunzhongyi
2026-05-20 01:30:49 +08:00
parent 7dded89537
commit 610805a374
42 changed files with 3451 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/app/(docs)/examples/responsive/page.tsx
+258
View File
@@ -0,0 +1,258 @@
'use client';
import {
Layout,
Section,
Article,
Headline,
Subhead,
BodyText,
Rule,
} from '@newspaperui/components';
import { CodeBlock } from '@/components/CodeBlock';
export default function ResponsivePage() {
return (
<Layout columns={24} maxWidth="900px" padding="2rem">
<Section columns={24}>
<Article span={24}>
<Headline weight="Medium" as="h1">
响应式设计
</Headline>
<Subhead weight="Medium">
NewspaperUI 的响应式策略完全基于 CSS media query + container query，
不依赖 JavaScript 运行时计算。
</Subhead>
<Headline weight="Low" as="h2">
断点说明
</Headline>
<BodyText>
<p>
三个核心断点覆盖移动、平板、桌面：
</p>
</BodyText>
<div style={{ overflowX: 'auto', margin: '1rem 0 2rem' }}>
<table
style={{
width: '100%',
borderCollapse: 'collapse',
fontFamily: 'var(--font-family-meta)',
fontSize: '13px',
}}
>
<thead>
<tr style={{ borderBottom: '2px solid var(--nui-rule-decorative)' }}>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>断点</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>宽度</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>栏数建议</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>说明</th>
</tr>
</thead>
<tbody>
<tr style={{ borderBottom: '1px solid var(--nui-rule-hairline)' }}>
<td style={{ padding: '0.5rem' }}>Mobile</td>
<td style={{ padding: '0.5rem' }}>&lt; 768px</td>
<td style={{ padding: '0.5rem' }}>1 栏（全宽）</td>
<td style={{ padding: '0.5rem' }}>单栏堆叠，BodyText columns=1</td>
</tr>
<tr style={{ borderBottom: '1px solid var(--nui-rule-hairline)', background: 'var(--nui-bg-surface)' }}>
<td style={{ padding: '0.5rem' }}>Tablet</td>
<td style={{ padding: '0.5rem' }}>768px - 1024px</td>
<td style={{ padding: '0.5rem' }}>12 列</td>
<td style={{ padding: '0.5rem' }}>两栏布局，BodyText columns=2</td>
</tr>
<tr style={{ borderBottom: '1px solid var(--nui-rule-hairline)' }}>
<td style={{ padding: '0.5rem' }}>Desktop</td>
<td style={{ padding: '0.5rem' }}>&gt; 1024px</td>
<td style={{ padding: '0.5rem' }}>24 列</td>
<td style={{ padding: '0.5rem' }}>完整多栏布局</td>
</tr>
</tbody>
</table>
</div>
<Headline weight="Low" as="h2">
实施手法
</Headline>
<BodyText>
<p>
NewspaperUI 不再使用 JavaScript responsive 函数。所有响应式行为通过 CSS
media query 和 container query 实现，零运行时开销。
</p>
<p>
Section 的 <code>gridTemplateColumns</code> 是 inline style，因此需要在
消费侧用 CSS 覆盖。推荐做法：
</p>
</BodyText>
<CodeBlock
title="自定义响应式 CSS"
language="css"
code={`/* 在你的 globals.css 或组件 CSS 中 */
@media (max-width: 768px) {
.nui-section {
grid-template-columns: 1fr !important;
}
.nui-article {
grid-column: span 1 !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.nui-section[data-columns="24"] {
grid-template-columns: repeat(12, 1fr) !important;
}
}`}
/>
<BodyText>
<p>
或者使用 container query 让 Section 根据自身宽度自适应：
</p>
</BodyText>
<CodeBlock
title="Container Query 方案"
language="css"
code={`/* 给 Section 添加 container-type */
.nui-section {
container-type: inline-size;
}
@container (max-width: 600px) {
.nui-article {
grid-column: 1 / -1 !important;
}
}`}
/>
<Rule variant="hairline" />
<Headline weight="Low" as="h2">
视口效果预览
</Headline>
<BodyText weight="Low">
<p>
下面三个区块模拟桌面、平板、移动端的视觉效果。实际项目中建议使用浏览器
DevTools 的 responsive mode 进行测试。
</p>
</BodyText>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', margin: '1.5rem 0' }}>
<div>
<div
className="nui-small-caps"
style={{
fontFamily: 'var(--font-family-meta)',
fontSize: '11px',
color: 'var(--nui-text-muted)',
letterSpacing: '0.08em',
marginBottom: '0.5rem',
}}
>
Desktop (1024px+) &mdash; 24 列完整布局
</div>
<div
style={{
border: '1px solid var(--nui-rule-hairline)',
padding: '1rem',
background: 'var(--nui-bg-surface)',
}}
>
<Layout columns={24} padding="0" maxWidth="100%">
<Section columns={24}>
<Article span={6}>
<Headline weight="Low" as="h4">Briefing</Headline>
<BodyText weight="Low"><p>Short news items.</p></BodyText>
</Article>
<Article span={12}>
<Headline weight="Medium" as="h4">Lead Story</Headline>
<BodyText><p>Main article content with full detail.</p></BodyText>
</Article>
<Article span={6}>
<Headline weight="Low" as="h4">Markets</Headline>
<BodyText weight="Low"><p>FTSE, gilts, sterling.</p></BodyText>
</Article>
</Section>
</Layout>
</div>
</div>
<div>
<div
className="nui-small-caps"
style={{
fontFamily: 'var(--font-family-meta)',
fontSize: '11px',
color: 'var(--nui-text-muted)',
letterSpacing: '0.08em',
marginBottom: '0.5rem',
}}
>
Tablet (768-1024px) &mdash; 12 列简化
</div>
<div
style={{
border: '1px solid var(--nui-rule-hairline)',
padding: '1rem',
background: 'var(--nui-bg-surface)',
maxWidth: '600px',
}}
>
<Layout columns={12} padding="0" maxWidth="100%">
<Section columns={12}>
<Article span={6}>
<Headline weight="Low" as="h4">Lead Story</Headline>
<BodyText weight="Low"><p>Main article.</p></BodyText>
</Article>
<Article span={6}>
<Headline weight="Low" as="h4">Secondary</Headline>
<BodyText weight="Low"><p>Supporting content.</p></BodyText>
</Article>
</Section>
</Layout>
</div>
</div>
<div>
<div
className="nui-small-caps"
style={{
fontFamily: 'var(--font-family-meta)',
fontSize: '11px',
color: 'var(--nui-text-muted)',
letterSpacing: '0.08em',
marginBottom: '0.5rem',
}}
>
Mobile (&lt;768px) &mdash; 单栏堆叠
</div>
<div
style={{
border: '1px solid var(--nui-rule-hairline)',
padding: '1rem',
background: 'var(--nui-bg-surface)',
maxWidth: '375px',
}}
>
<Layout columns={1} padding="0" maxWidth="100%">
<Section columns={1}>
<Article span={1}>
<Headline weight="Low" as="h4">Lead Story</Headline>
<BodyText weight="Low"><p>Full-width single column.</p></BodyText>
</Article>
<Article span={1}>
<Headline weight="Low" as="h4">Secondary</Headline>
<BodyText weight="Low"><p>Stacked below.</p></BodyText>
</Article>
</Section>
</Layout>
</div>
</div>
</div>
</Article>
</Section>
</Layout>
);
}