[React Ocean 组件库] 实现 Divder 分割线

交互展示

使用

const Basic = () => {
  return <Divider>Cyan Benjamin</Divider>;
};

需求

• 支持不同大小
• 支持不同对齐方向
• 支持无文字自定义 padding
• 支持字体大小
• 支持不同尺寸

实现

const Divider = (props: Divider) => {
  const { padding, align = 'center', style, size = 'medium', fontSize } = props;

  return (
    <>
      <DividerLine
        style={style}
        className="ocean-divider-line"
        padding={getPxStyle(padding, `0 ${GlobalPadding.lgg}`)}
      >
        <BeforeLine className="ocean-before-line" align={align}></BeforeLine>
        {props.children && (
          <Line className="ocean-line" size={size} fontSize={fontSize}>
            {props.children}
          </Line>
        )}
        <AfterLine className="ocean-after-line" align={align}></AfterLine>
      </DividerLine>
    </>
  );
};