-
This commit is contained in:
sunzhongyi
@@ -0,0 +1,102 @@
|
||||
- generic [ref=e2]:
|
||||
- navigation [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- link "NewspaperUI" [ref=e5] [cursor=pointer]:
|
||||
- /url: /
|
||||
- paragraph [ref=e6]: 报纸布局组件库
|
||||
- generic [ref=e7]:
|
||||
- link "概览" [ref=e9] [cursor=pointer]:
|
||||
- /url: /
|
||||
- link "栅格系统" [ref=e11] [cursor=pointer]:
|
||||
- /url: /grid-system
|
||||
- generic [ref=e12]:
|
||||
- link "核心组件" [ref=e13] [cursor=pointer]:
|
||||
- /url: /components
|
||||
- generic [ref=e14]:
|
||||
- link "Article" [ref=e15] [cursor=pointer]:
|
||||
- /url: /components/article
|
||||
- link "Layer" [ref=e16] [cursor=pointer]:
|
||||
- /url: /components/layer
|
||||
- link "媒体组件" [ref=e17] [cursor=pointer]:
|
||||
- /url: /components/media
|
||||
- link "文本组件" [ref=e19] [cursor=pointer]:
|
||||
- /url: /text
|
||||
- link "主题系统" [ref=e21] [cursor=pointer]:
|
||||
- /url: /theme
|
||||
- generic [ref=e22]:
|
||||
- link "示例" [ref=e23] [cursor=pointer]:
|
||||
- /url: /examples
|
||||
- generic [ref=e24]:
|
||||
- link "跨栏布局" [ref=e25] [cursor=pointer]:
|
||||
- /url: /examples/spanning
|
||||
- link "响应式布局" [ref=e26] [cursor=pointer]:
|
||||
- /url: /examples/responsive
|
||||
- main [ref=e27]:
|
||||
- generic [ref=e29]:
|
||||
- heading "NewspaperUI" [level=1] [ref=e30]
|
||||
- paragraph [ref=e31]: 生产级报纸布局组件库，参考 InDesign 设计理念，支持 24 列栅格、跨栏、视觉权重和主题系统。
|
||||
- heading "设计理念" [level=2] [ref=e32]
|
||||
- paragraph [ref=e33]: NewspaperUI 借鉴专业排版软件 InDesign 的设计思想，为 Web 应用提供报纸风格的布局能力。 组件设计遵循少而精、职责明确、无冗余、无歧义的原则。
|
||||
- heading "核心特性" [level=2] [ref=e34]
|
||||
- list [ref=e35]:
|
||||
- listitem [ref=e36]:
|
||||
- strong [ref=e37]: 24 列栅格系统
|
||||
- text: "- 灵活的栅格布局，支持精确的列控制"
|
||||
- listitem [ref=e38]:
|
||||
- strong [ref=e39]: 跨栏布局
|
||||
- text: "- 内容可以跨越多列，实现复杂的报纸排版"
|
||||
- listitem [ref=e40]:
|
||||
- strong [ref=e41]: 视觉权重系统
|
||||
- text: "- High/Medium/Low 三级权重，自动映射字体大小和样式"
|
||||
- listitem [ref=e42]:
|
||||
- strong [ref=e43]: 主题系统
|
||||
- text: "- 基于 CSS Variables，支持主题切换和自定义"
|
||||
- listitem [ref=e44]:
|
||||
- strong [ref=e45]: 响应式设计
|
||||
- text: "- 小屏自动调整为 12-16 列，保持良好的阅读体验"
|
||||
- listitem [ref=e46]:
|
||||
- strong [ref=e47]: 浮动 Layer
|
||||
- text: "- 支持绝对定位的浮动元素，如广告、拉引等"
|
||||
- heading "快速开始" [level=2] [ref=e48]
|
||||
- heading "安装" [level=3] [ref=e49]
|
||||
- code [ref=e51]: pnpm add @newspaperui/components @newspaperui/theme
|
||||
- heading "基础使用" [level=3] [ref=e52]
|
||||
- generic [ref=e53]:
|
||||
- generic [ref=e54]:
|
||||
- heading "简单的报纸布局" [level=3] [ref=e55]
|
||||
- paragraph [ref=e56]: 使用 Layout 和 Section 创建基础的栅格布局
|
||||
- generic [ref=e58]:
|
||||
- article [ref=e60]:
|
||||
- heading "主要新闻标题" [level=1] [ref=e61]
|
||||
- paragraph [ref=e62]: 这是一篇重要的新闻内容，使用 High 权重的标题和正文文本。
|
||||
- generic [ref=e63]:
|
||||
- article [ref=e64]:
|
||||
- heading "次要新闻" [level=2] [ref=e65]
|
||||
- paragraph [ref=e66]: 这是另一篇新闻，使用 Medium 权重。
|
||||
- article [ref=e67]:
|
||||
- heading "更多新闻" [level=2] [ref=e68]
|
||||
- paragraph [ref=e69]: 更多内容在这里展示。
|
||||
- button "查看代码" [ref=e71]
|
||||
- heading "下一步" [level=2] [ref=e72]
|
||||
- paragraph [ref=e73]: 探索文档了解更多功能：
|
||||
- list [ref=e74]:
|
||||
- listitem [ref=e75]:
|
||||
- link "栅格系统" [ref=e76] [cursor=pointer]:
|
||||
- /url: /grid-system
|
||||
- text: "- 了解 24 列栅格的工作原理"
|
||||
- listitem [ref=e77]:
|
||||
- link "核心组件" [ref=e78] [cursor=pointer]:
|
||||
- /url: /components/article
|
||||
- text: "- 学习 Article、Layer 等核心组件"
|
||||
- listitem [ref=e79]:
|
||||
- link "文本组件" [ref=e80] [cursor=pointer]:
|
||||
- /url: /text
|
||||
- text: "- 掌握视觉权重系统"
|
||||
- listitem [ref=e81]:
|
||||
- link "主题系统" [ref=e82] [cursor=pointer]:
|
||||
- /url: /theme
|
||||
- text: "- 自定义主题和样式"
|
||||
- listitem [ref=e83]:
|
||||
- link "示例" [ref=e84] [cursor=pointer]:
|
||||
- /url: /examples/spanning
|
||||
- text: "- 查看完整的布局示例"
|
||||
Reference in New Issue
Block a user