Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

antd Paragraph展开可收起组件封装

antd Paragraph可以提供展开的功能,以下在其基础封装一个展开后可以收起的组件

import React, { ReactNode, useState, useEffect } from 'react';
import { Typography, Tooltip } from 'antd';
import { ParagraphProps } from 'antd/lib/typography/Paragraph';

export interface ILabelValueProps {
  label?: ReactNode;
  value: ReactNode;
  valueConfig?: ParagraphProps;
  colon?: boolean;
  tooltip?: boolean;
}
type Props = ILabelValueProps;

const { Paragraph } = Typography;

export function LabelValue(props: Readonly<Props>) {
  const { label, value, colon, tooltip, valueConfig } = props;
  const rows = tooltip ? 1 : 3;
  const [key, setKey] = useState(0);
  const [fold, setFold] = useState(true);
  const onExpand = () => {
    setFold(false);
  };
  const onCollapse = () => {
    setFold(true);
    setKey(key + 1);
  };
  return (
    <>
      <div key={key}>
        <Paragraph
          ellipsis={{
            rows,
            expandable: !tooltip,
            onExpand: onExpand
          }}
          {...valueConfig}
        >
          {value}
          {!fold && (
            <span className="value-collapse" onClick={onCollapse}>
              收起
            </span>
          )}
        </Paragraph>
      </div>
    </>
  );
}

export default LabelValue;
posted @   365/24/60  阅读(1372)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
历史上的今天:
2020-08-03 前端可以查看的官方网址
点击右上角即可分享
微信分享提示