TwoColumnLayout

1.基本介绍

左右两侧布局

2.组件示例

1.普通样式

<TwoColumnLayout title="左侧内容：">
  <p>右侧内容</p>
</TwoColumnLayout>

2.居中样式

<TwoColumnLayout title="左侧内容：">
  <p>右侧内容</p>
</TwoColumnLayout>

3.左侧单独设置样式

<TwoColumnLayout leftStyle={{ fontWeight: 'bold', color: 'red' }} title="左侧内容：">
  <p>右侧内容</p>
</TwoColumnLayout>

3.属性

属性名	属性类型	默认值	说明
children	ReactNode	null	无
title	string 或 ReactNode	“twoColumnLayout”	可接受ReactNode
bodyHeight	string	“100px”	整体容器高度
center	boolean	false	左侧和右侧同时垂直居中
leftStyle	CSSProperties	{}	左侧展示样式

4.代码

1.ts

import React, { useEffect, ReactNode, useState, CSSProperties } from 'react';
import style from './index.less';

interface ITwoColumnLayoutProps {
  children?: ReactNode;
  title?: string | ReactNode;
  bodyHeight?: string;
  center?: boolean;
  leftStyle?: CSSProperties;
}

const TwoColumnLayout = (props: ITwoColumnLayoutProps) => {
  const { children, title, bodyHeight, center, leftStyle } = props;

  const [flexCenter, setFlexCenter] = useState('flex-start');

  useEffect(() => {
    if (center) {
      setFlexCenter('center');
    }
  }, []);

  return (
    <div style={{ height: bodyHeight, alignItems: flexCenter }} className={style.container}>
      <div style={leftStyle} className={style.left}>{title}</div>
      <div style={{ alignItems: flexCenter }} className={style.right}>{children}</div>
    </div>
  )
}

export default TwoColumnLayout;

TwoColumnLayout.defaultProps = {
  children: null,
  title: 'twoColumnLayout',
  bodyHeight: '100px',
  center: false,
  leftStyle: {},
};

2.less

.container {
  width: 100%;
  height: 100px;
  background-color: #f1f1f1;
  padding: 10px;
  display: flex;

  .left {
    width: 100px;
    text-align: center;
    overflow: hidden;
  }

  .right {
    display: flex;
    width: 100%;
    height: inherit;
    overflow: hidden;
  }
}