test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 04:30:06 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

add headStyle to card component

Browse Source
This commit is contained in:
Emerson Laurentino 2018-07-22 14:31:25 -03:00 committed by 偏右
parent 5dc31a4d2a
commit a88a320694
3 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/card/index.en-US.md
View File

@ -23,6 +23,7 @@ A card can be used to display content related to a single subject. The content c
| -------- | ----------- | ---- | ------- | | -------- | ----------- | ---- | ------- |
| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - | | actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - |
| activeTabKey | Current TabPane's key | string | - | | activeTabKey | Current TabPane's key | string | - |
| headStyle | Inline style to apply to the card head | object | - |
| bodyStyle | Inline style to apply to the card content | object | - | | bodyStyle | Inline style to apply to the card content | object | - |
| bordered | Toggles rendering of the border around the card | boolean | `true` | | bordered | Toggles rendering of the border around the card | boolean | `true` |
| cover | Card cover | ReactNode | - | | cover | Card cover | ReactNode | - |

5
components/card/index.tsx
View File

@ -27,6 +27,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
title?: React.ReactNode; title?: React.ReactNode;
extra?: React.ReactNode; extra?: React.ReactNode;
bordered?: boolean; bordered?: boolean;
headStyle?: React.CSSProperties;
bodyStyle?: React.CSSProperties; bodyStyle?: React.CSSProperties;
style?: React.CSSProperties; style?: React.CSSProperties;
loading?: boolean; loading?: boolean;
@ -134,7 +135,7 @@ export default class Card extends React.Component<CardProps, CardState> {
} }
render() { render() {
const { const {
prefixCls = 'ant-card', className, extra, bodyStyle = {}, noHovering, hoverable, title, loading, prefixCls = 'ant-card', className, extra, headStyle = {}, bodyStyle = {}, noHovering, hoverable, title, loading,
bordered = true, type, cover, actions, tabList, children, activeTabKey, defaultActiveTabKey, ...others bordered = true, type, cover, actions, tabList, children, activeTabKey, defaultActiveTabKey, ...others
} = this.props; } = this.props;
@ -231,7 +232,7 @@ export default class Card extends React.Component<CardProps, CardState> {
) : null; ) : null;
if (title || extra || tabs) { if (title || extra || tabs) {
head = ( head = (
<div className={`${prefixCls}-head`}> <div className={`${prefixCls}-head`} style={headStyle}>
<div className={`${prefixCls}-head-wrapper`}> <div className={`${prefixCls}-head-wrapper`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>} {title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>} {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}

1
components/card/index.zh-CN.md
View File

@ -24,6 +24,7 @@ cols: 1
| --- | --- | --- | --- | | --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | | actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - |
| activeTabKey | 当前激活页签的 key | string | - | | activeTabKey | 当前激活页签的 key | string | - |
| headStyle | 自定义标题区域样式 | object | - |
| bodyStyle | 内容区域自定义样式 | object | - | | bodyStyle | 内容区域自定义样式 | object | - |
| bordered | 是否有边框 | boolean | true | | bordered | 是否有边框 | boolean | true |
| cover | 卡片封面 | ReactNode | - | | cover | 卡片封面 | ReactNode | - |