feat: blockHeader title support ReactNode

README.md

@@ -49,7 +49,7 @@ pnpm install dt-react-component
 ```jsx
 import React from 'react';
 import { BlockHeader } from 'dt-react-component';
-const App = () => <BlockHeader title="分类标题" showBackground />;
+const App = () => <BlockHeader title="This is title" showBackground />;
 ```
 
 ### Load on demand

src/blockHeader/demos/style.scss

@@ -0,0 +1,3 @@
+.demo-title {
+    width: 300px;
+}

src/blockHeader/demos/title.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BlockHeader, EllipsisText } from 'dt-react-component';
+
+import './style.scss';
+
+export default () => {
+    return (
+        <div style={{ width: 300 }}>
+            <BlockHeader
+                titleClassName="demo-title"
+                title={
+                    <EllipsisText
+                        maxWidth={200}
+                        value="标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长"
+                    />
+                }
+            />
+        </div>
+    );
+};

src/blockHeader/index.md

@@ -21,14 +21,15 @@ demo:
 <code src="./demos/extraInfo.tsx" description="通过设置 `afterTitle` 和 `tooltip` 可以增加两种不同形式的提示信息，同时存在时仅 `afterTitle` 生效">带提示信息的标题</code>
 <code src="./demos/customIcon.tsx" description="通过设置 `beforeTitle` 可以自定义标题icon，不设置时默认是一个色块">自定义 icon</code>
 <code src="./demos/expand.tsx" description="若存在 `children` 则支持展开">展开/收起内容</code>
+<code src="./demos/title.tsx" description="title 支持 ReactNode">标题超长</code>
 
 ## API
 
 ### BlockHeader
 
 | 参数              | 说明                                      | 类型                        | 默认值  |
 | ----------------- | ----------------------------------------- | --------------------------- | ------- |
-| title             | 标题                                      | `string`                    | -       |
+| title             | 标题                                      | `React.ReactNode`           | -       |
 | beforeTitle       | 标题前的图标，默认是一个色块              | `React.ReactNode`           | -       |
 | afterTitle        | 标题后的提示图标或文案                    | `React.ReactNode`           | -       |
 | tooltip           | 默认展示问号提示(优先级低于 `afterTitle`) | `React.ReactNode`           | -       |

src/blockHeader/index.tsx

@@ -9,7 +9,7 @@ export declare type SizeType = 'small' | 'middle' | undefined;
 
 export interface IBlockHeaderProps {
     // 标题
-    title: string;
+    title: ReactNode;
     // 标题前的图标，默认是一个色块
     beforeTitle?: ReactNode;
     // 标题后的提示图标或文案