Commit ab4b92fd authored by XieZhiXiong's avatar XieZhiXiong

fix: 修复布局变形的问题

parent a3ad5bf8
/* /*
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2020-08-26 17:32:45 * @Date: 2020-08-26 17:32:45
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-29 14:47:49 * @LastEditTime: 2020-12-29 15:06:05
* @Description: 基于 antd Card 封装的适合项目 UI 的 Card,使用方式跟 antd Card 一样,这里只是修改了样式 * @Description: 基于 antd Card 封装的适合项目 UI 的 Card,使用方式跟 antd Card 一样,这里只是修改了样式
*/ */
import React from 'react'; import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import { CardProps } from 'antd/lib/card'; import { CardProps } from 'antd/lib/card';
import styled from 'styled-components' import styled from 'styled-components'
import styles from './index.less'; import styles from './index.less';
const Wrap = styled(props => <div {...props}/>)` const Wrap = styled(props => <div {...props}/>)`
> .ant-card { > .ant-card {
border-radius: 8px; border-radius: 8px;
.ant-card-head { .ant-card-head {
border-bottom: none; border-bottom: none;
.ant-card-head-title { .ant-card-head-title {
line-height: 24px; line-height: 24px;
padding-bottom: 0; padding-bottom: 0;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: rgba(23, 43, 77, 1); color: rgba(23, 43, 77, 1);
} }
} }
.ant-card-body { .ant-card-body {
padding: 14px 24px 24px; padding: 14px 24px 24px;
} }
} }
&.fullHeight { &.fullHeight {
height: 100%; height: 100%;
.ant-card { .ant-card {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column !important; flex-direction: column !important;
.ant-card-head { .ant-card-head {
flex-shrink: 0; flex-shrink: 0;
} }
.ant-card-body { .ant-card-body {
flex: 1; flex: 1;
} }
} }
} }
` `
export interface MellowCardProps extends CardProps { export interface MellowCardProps extends CardProps {
blockClassName?: string; blockClassName?: string;
fullHeight?: boolean; // 是否占满父级的高度,一般用于多列使用改组件的情况 fullHeight?: boolean; // 是否占满父级的高度,一般用于多列使用改组件的情况
} }
const MellowCard: React.FC<MellowCardProps> = props => { const MellowCard: React.FC<MellowCardProps> = props => {
const { children, blockClassName, fullHeight, ...rest } = props; const { children, blockClassName, fullHeight, ...rest } = props;
const cls = classNames({ const cls = classNames({
'fullHeight': fullHeight, 'fullHeight': fullHeight,
}); });
return ( return (
<Wrap className={cls}> <Wrap className={cls}>
<Card bordered={false} {...rest}> <Card bordered={false} {...rest}>
{children} {children}
</Card> </Card>
</Wrap> </Wrap>
) )
}; };
export default MellowCard; export default MellowCard;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment