-
This commit is contained in:
sunzhongyi
@@ -0,0 +1,225 @@
|
||||
'use client';
|
||||
import {
|
||||
Layout,
|
||||
Section,
|
||||
Article,
|
||||
Headline,
|
||||
Subhead,
|
||||
BodyText,
|
||||
} from '@newspaperui/components';
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { PropsTable } from '@/components/PropsTable';
|
||||
|
||||
export default function GridSystemPage() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="900px" padding="2rem">
|
||||
<Section columns={24}>
|
||||
<Article span={24}>
|
||||
<Headline weight="Medium" as="h1">
|
||||
栅格系统
|
||||
</Headline>
|
||||
<Subhead weight="Medium">
|
||||
24 列由 Layout 提供上下文，Section 在栅格内分配 grid-template-columns，
|
||||
Article 用 grid-column span 跨栏。所有跨栏统一通过 CSS Grid 完成。
|
||||
</Subhead>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
24 列可视化
|
||||
</Headline>
|
||||
<BodyText>
|
||||
<p>
|
||||
下面的网格演示了 24 列的等宽分布。每个数字标签对应一列。报纸排版偏好 24
|
||||
列是因为它能整除 2 / 3 / 4 / 6 / 8 / 12，足够灵活地实现 1/3、2/3、1/4、3/4
|
||||
这类常见栏宽组合。
|
||||
</p>
|
||||
</BodyText>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(24, 1fr)',
|
||||
gap: '4px',
|
||||
margin: '1.5rem 0 2rem',
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: 24 }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
background: 'var(--nui-bg-surface)',
|
||||
border: '1px solid var(--nui-rule-hairline)',
|
||||
textAlign: 'center',
|
||||
padding: '0.5rem 0',
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '11px',
|
||||
color: 'var(--nui-text-muted)',
|
||||
letterSpacing: '0.04em',
|
||||
}}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
Layout API
|
||||
</Headline>
|
||||
<BodyText>
|
||||
<p>
|
||||
<code>Layout</code> 是顶层容器，提供 LayoutContext。Section 通过
|
||||
useLayout 读取列数上限并自动 clamp。
|
||||
</p>
|
||||
</BodyText>
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'columns',
|
||||
type: 'number',
|
||||
default: '24',
|
||||
description: '栅格总列数。决定子 Section 的最大 columns。',
|
||||
},
|
||||
{
|
||||
name: 'maxWidth',
|
||||
type: 'string',
|
||||
default: "'1280px'",
|
||||
description: '页面最大宽度。',
|
||||
},
|
||||
{
|
||||
name: 'padding',
|
||||
type: 'string',
|
||||
default: "'var(--nui-space-6)'",
|
||||
description: '页面内边距。',
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: "'light' | 'dark'",
|
||||
description:
|
||||
'强制主题；省略时跟随 documentElement.dataset.theme。',
|
||||
},
|
||||
{
|
||||
name: 'children',
|
||||
type: 'ReactNode',
|
||||
required: true,
|
||||
description: '子内容（通常是若干 Section）。',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
Section API
|
||||
</Headline>
|
||||
<BodyText>
|
||||
<p>
|
||||
<code>Section</code> 是栅格容器，
|
||||
<code>display: grid; grid-template-columns: repeat(N, 1fr)</code>
|
||||
。子 Article 通过 grid-column span 占位。
|
||||
</p>
|
||||
</BodyText>
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'columns',
|
||||
type: 'number',
|
||||
required: true,
|
||||
description: 'Section 内部栅格列数（≤ Layout.columns）。',
|
||||
},
|
||||
{
|
||||
name: 'gap',
|
||||
type: 'string',
|
||||
default: "'var(--nui-gutter)'",
|
||||
description: '栏间间距。',
|
||||
},
|
||||
{
|
||||
name: 'breakable',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: '允许打印时跨页断开。',
|
||||
},
|
||||
{
|
||||
name: 'divider',
|
||||
type: "'none' | 'top' | 'bottom' | 'both'",
|
||||
default: "'none'",
|
||||
description: '上下方向的 hairline 分隔线。',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
Article API
|
||||
</Headline>
|
||||
<BodyText>
|
||||
<p>
|
||||
<code>Article</code> 在 Section 栅格内用 grid-column span N 占位。
|
||||
span 缺省时占满 Section 全宽。
|
||||
</p>
|
||||
</BodyText>
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'span',
|
||||
type: 'number',
|
||||
description: '跨多少列（0 < span ≤ Section.columns）。',
|
||||
},
|
||||
{
|
||||
name: 'breakable',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: '允许打印时跨页断开。',
|
||||
},
|
||||
{
|
||||
name: 'children',
|
||||
type: 'ReactNode',
|
||||
required: true,
|
||||
description: '文章内容。',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
实例
|
||||
</Headline>
|
||||
<Demo
|
||||
title="8 + 16 跨栏"
|
||||
description="左侧短讯 8 列 + 右侧主稿 16 列。"
|
||||
code={`<Layout columns={24}>
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="Low">短讯</Headline>
|
||||
<BodyText>...</BodyText>
|
||||
</Article>
|
||||
<Article span={16}>
|
||||
<Headline weight="Medium">主稿</Headline>
|
||||
<BodyText>...</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>`}
|
||||
>
|
||||
<Layout columns={24} padding="0">
|
||||
<Section columns={24}>
|
||||
<Article span={8}>
|
||||
<Headline weight="Low" as="h3">
|
||||
短讯
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>占 8 列。短讯栏适合放编辑选编、精选事件、快速通读型小段。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={16}>
|
||||
<Headline weight="Medium" as="h3">
|
||||
主稿
|
||||
</Headline>
|
||||
<BodyText>
|
||||
<p>
|
||||
占 16 列。主稿区域承载头版头条、深度报道，可启用
|
||||
多栏文字流以增强阅读节奏。
|
||||
</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
</Demo>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user