From 2dbd27144d5a9eab9e50859e903c8f937b795397 Mon Sep 17 00:00:00 2001 From: Catouse Date: Tue, 30 Aug 2016 15:19:57 +0800 Subject: [PATCH] * update article view document. --- docs/index.json | 11 +- docs/part/view-article.md | 587 +++++++++++++++++++++++++------------- 2 files changed, 398 insertions(+), 200 deletions(-) diff --git a/docs/index.json b/docs/index.json index c7e59a54..c2d72542 100644 --- a/docs/index.json +++ b/docs/index.json @@ -1174,9 +1174,16 @@ }, { "id": "article", "icon": "icon-file-text-alt", - "desc": "包含标题和带格式的文本内容视图", + "desc": "用于展示带标题和其他额外信息的图文内容", "name": "文章", - "topics": [], + "update": "1.5.0", + "topics": [{ + "name": "结构" + }, { + "name": "综合示例" + }, { + "name": "更紧凑的文章视图" + }], "filter": "wenzhang wz" }, { "id": "card", diff --git a/docs/part/view-article.md b/docs/part/view-article.md index 3569ca5f..92156c9c 100644 --- a/docs/part/view-article.md +++ b/docs/part/view-article.md @@ -1,281 +1,472 @@ section: view id: article -description: 包含标题和带格式的文本内容视图 +description: 用于展示带标题和其他额外信息的图文内容 icon: icon-file-text-alt filter: wenzhang wz --- # 文章 -文章视图用于展示带标题和其他额外信息的丰富图文内容，以下为ZUI中文章视图的结构： +文章视图用于展示带标题和其他额外信息的图文内容。 + +## 结构 + +文章视图使用 `.article` 类作为父级容器，并且使用以下特殊元素作为子容器： - - + + + + - + + - +
头部头部使用 `header`，包含文章标题、文章信息和摘要`
`
头部包含文章标题、文章信息和摘要
`.content` 正文正文的多个部分使用`section`可以在 `.article` 内堆叠多个正文部分。
`
`
 底部底部使用 `footer`，显示版权及文章的其他信息显示版权及文章的其他信息
-## 普通文章视图 +一般 HTML 结构为： + +```html +
+ +
+

文章标题

+ +
+
属性
+
值
+ ... +
+
+

摘要信息

+
+
+ +
+ ... +
+ + +
+``` + +### 受支持的正文标签 + +在正文部分 `.content` 你可以包含以下类型的元素，不需要为这些元素添加额外的类就可以获得一致的外观和自适应性。 -
-
- + - `

~

` + - `

` + - `

+ + +