diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md
index 08e0e0addd..2f995b8651 100644
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@@ -84,7 +84,7 @@ class App extends React.Component {
content={
Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.
}
- time={
+ datetime={
{moment().fromNow()}
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index cef5a32f69..40a36733e6 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -97,7 +97,7 @@ class App extends React.Component {
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
content: values.message,
- time: moment().fromNow(),
+ datetime: moment().fromNow(),
},
...this.state.comments,
]
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index 0792bc32e4..67c41d3319 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -25,7 +25,7 @@ const data = [
content: (
Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate.
),
- time: (
+ datetime: (
{moment().subtract(1, 'days').fromNow()}
@@ -38,7 +38,7 @@ const data = [
content: (
Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non.
),
- time: (
+ datetime: (
{moment().subtract(2, 'days').fromNow()}
@@ -58,7 +58,7 @@ ReactDOM.render(
author={item.author}
avatar={item.avatar}
content={item.content}
- time={item.time}
+ datetime={item.datetime}
/>
)}
/>,
diff --git a/components/comment/index.en-US.md b/components/comment/index.en-US.md
index ba7f104cb8..d5906984a0 100644
--- a/components/comment/index.en-US.md
+++ b/components/comment/index.en-US.md
@@ -21,10 +21,6 @@ Comments can be used to enable discussions on an entity for example page, blog p
| children | Nested comments should be provided as children of the Comment | ReactNode | - |
| className | Addtional className for comment | string | - |
| content | The main content of the comment | ReactNode | - |
-| contentStyle | Inline style to apply to the comment content | object | - |
-| avatarStyle | Inline style to apply to the comment avatar | object | - |
| id | Optional ID for the comment | string | - |
-| innerStyle | Additional style for the inner content | object | - |
-| prefixCls | Comment prefix className defaults to `.ant-comment` | string | .ant-comment |
| style | Additional style for the comment | object | - |
-| time | A time element containing the time to be displayed | ReactNode | - |
+| datetime | A datetime element containing the time to be displayed | ReactNode | - |
diff --git a/components/comment/index.tsx b/components/comment/index.tsx
index 7bf7b85e53..acab8622c4 100644
--- a/components/comment/index.tsx
+++ b/components/comment/index.tsx
@@ -14,20 +14,14 @@ export interface CommentProps {
content: React.ReactNode;
/** Nested comments should be provided as children of the Comment */
children?: any;
- /** Additional style for the comment content */
- contentStyle?: React.CSSProperties;
- /** Additional style for the comment avatar */
- avatarStyle?: React.CSSProperties;
/** Optional ID for the comment */
id?: string;
- /** Additional style for the comment inner wrapper */
- innerStyle?: React.CSSProperties;
/** Comment prefix defaults to '.ant-comment' */
prefixCls?: string;
/** Additional style for the comment */
style?: React.CSSProperties;
- /** A time element containing the time to be displayed */
- time?: React.ReactNode;
+ /** A datetime element containing the time to be displayed */
+ datetime?: React.ReactNode;
/** Direction of the comment left or right */
direction?: 'left' | 'right';
}
@@ -62,16 +56,13 @@ export default class Comment extends React.Component {
actions,
author,
avatar,
- avatarStyle = {},
children,
className,
content,
- contentStyle = {},
direction = 'left',
- innerStyle = {},
prefixCls = 'ant-comment',
style = {},
- time,
+ datetime,
...otherProps
} = this.props;
@@ -90,14 +81,14 @@ export default class Comment extends React.Component {
);
}
- if (time) {
+ if (datetime) {
authorElements.push(
- {time},
+ {datetime},
);
}
const avatarDom = (
-
+
{typeof avatar === 'string' ?
: avatar}
);
@@ -113,7 +104,7 @@ export default class Comment extends React.Component
{
);
const contentDom = (
-
+
{authorContent}
{content}
@@ -124,7 +115,7 @@ export default class Comment extends React.Component
{
const comment = (
-
+
{direction === 'left'
? [avatarDom, contentDom]
: [contentDom, avatarDom]
diff --git a/components/comment/index.zh-CN.md b/components/comment/index.zh-CN.md
index 664f97ef87..ca41abf7ac 100644
--- a/components/comment/index.zh-CN.md
+++ b/components/comment/index.zh-CN.md
@@ -2,17 +2,17 @@
category: Components
type: Data Display
title: Comment
-subtitle: 分割线
+subtitle: 评论
cols: 1
---
- 单一评论组件。
+单一评论组件。
- ## When To Use
+## 何时使用
- 评论可用于启用对实体的讨论,例如页面,博客文章,问题或其他。
+评论组件可用于对事物的讨论,例如页面、博客文章、问题等等。
- ## API
+## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
@@ -22,10 +22,6 @@ cols: 1
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - |
| className | 网格容器类名 | string | - |
| content | 评论的主要内容 | ReactNode | - |
-| contentStyle | 要应用于评论内容的内联样式 | object | - |
-| headStyle | 内联样式应用于评论头像 | object | - |
| id | 评论的可选ID | string | - |
-| innerStyle | 内容的附加风格 | object | - |
-| prefixCls | 注释前缀className默认为`.ant-comment` | string | .ant-comment |
| style | 评论的其他风格 | object | - |
-| time | 包含要显示的时间的时间元素 | ReactNode | - |
+| datetime | 包含要显示的时间的时间元素 | ReactNode | - |
diff --git a/components/comment/style/index.less b/components/comment/style/index.less
index d7017f0f46..e1bfa1aa0a 100644
--- a/components/comment/style/index.less
+++ b/components/comment/style/index.less
@@ -65,7 +65,7 @@
&-actions {
margin-top: 12px;
- & > li {
+ > li {
display: inline-block;
color: @comment-action-color;
> span {