易忘使用tip

  1. form表单中使用问号提示:
{
   type: 'custom',
   vmodel: 'skuSource',
   skipLog: true,
   label: 'SKU来源',
   formItemLabelTips: <><div>sku随便写点字</div><div>指定SK</div></>,
   formItemLabelTipsProps: {
      children: <QuestionCircleOutlined className="m-x-5" />,
   },
 }
  1. table表头标题使用提示
{
     align: 'center',
     dataIndex: 'minStoreProductNumber',
     title: (
           <>
               <Tooltip
                   title={
                        <div>
                           <div>随便写两行</div>
                           <div>aaaa</div>
                        </div>
                    }
               >
                   <span className="m-r-5">最低在线数</span>
                   <QuestionCircleOutlined />
              </Tooltip>
           </>
    )
}
  1. modal中确定按钮在loading,禁止取消按钮
cancelButtonProps={{disabled: state.loading}}
  1. 大文本省略,悬浮显示
<OperationContent rows={2}>{item.dynamicInventoryRemark}</OperationContent>
import {Typography} from 'antd';
import React, {FC} from 'react';

import styles from './index.less';

/** 大文本省略,悬浮提示 */
const OperationContent: FC<IOperationContentProps> = ({
    children,
    rows = 11,
}) => {

    return (
        <Typography.Paragraph
            className={styles['operation-content']}
            ellipsis={{
                rows,
                tooltip: {
                    arrow: false,
                    children,
                    overlayClassName: styles['operation-content-tips'],
                    overlayInnerStyle: {whiteSpace: 'pre-wrap'},
                    placement: 'right',
                },
            }}
        >
            {children}
        </Typography.Paragraph>
    );
};

export {OperationContent};

interface IOperationContentProps {
    children: React.ReactNode;
    rows?: number;
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 正如Ant Design 官方介绍: "在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多...
    sunnyghx阅读 9,675评论 1 2
  • Bootstrap 是基于H5利用 JS和CSS 进行布局、提供插件、动画的一个框架。使用了JQuery进行DOM...
    轩居晨风阅读 4,549评论 0 5
  • Element-UI 常用组件和属性总结 Button 按钮 Button 组件是 Element-UI 中最基础...
    木火应阅读 4,562评论 0 0
  • SwiftUI 7GUIs编程基准之 07 Cells table 电子表格应用程序(教程含源码)[https:/...
    iCloudEnd阅读 5,360评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,973评论 0 0

友情链接更多精彩内容