UNPKG

3.42 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5
6interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
7 title?: any;
8}
9
10export interface CardProps extends HTMLAttributesWeak, CommonProps {
11 /**
12 * 卡片的上的图片 / 视频
13 */
14 media?: React.ReactNode,
15
16 /**
17 * 卡片的标题
18 */
19 title?: React.ReactNode;
20
21 /**
22 * 卡片的副标题
23 */
24 subTitle?: React.ReactNode;
25
26 /**
27 * 卡片操作组，位置在卡片底部
28 */
29 actions?: React.ReactNode,
30
31 /**
32 * 是否显示标题的项目符号
33 */
34 showTitleBullet?: boolean;
35
36 /**
37 * 是否展示头部的分隔线
38 */
39 showHeadDivider?: boolean;
40
41 /**
42 * 内容区域的固定高度
43 */
44 contentHeight?: string | number;
45
46 /**
47 * 标题区域的用户自定义内容
48 */
49 extra?: React.ReactNode;
50
51 /**
52 * 是否开启自由模式，开启后card 将使用子组件配合使用, 设置此项后 title, subtitle, 等等属性都将失效
53 */
54 free?: boolean;
55 hasBorder?: boolean;
56}
57
58export interface CardBulletHeaderProps extends HTMLAttributesWeak, CommonProps {
59 /**
60 * 卡片的标题
61 */
62 title?: React.ReactNode;
63
64 /**
65 * 卡片的副标题
66 */
67 subTitle?: React.ReactNode;
68 /**
69 * 是否显示标题的项目符号
70 */
71 showTitleBullet?: boolean;
72 /**
73 * 标题区域的用户自定义内容
74 */
75 extra?: React.ReactNode;
76}
77
78export interface CardCollaspeContentProps extends HTMLAttributesWeak, CommonProps {
79 contentHeight?: string | number;
80}
81export interface CardCollapseContentProps extends HTMLAttributesWeak, CommonProps {
82 contentHeight?: string | number;
83}
84
85export interface CardHeaderProps extends HTMLAttributesWeak, CommonProps {
86 /**
87 * 卡片的标题
88 */
89 title?: React.ReactNode;
90
91 /**
92 * 卡片的副标题
93 */
94 subTitle?: React.ReactNode;
95
96 /**
97 * 标题区域的用户自定义内容
98 */
99 extra?: React.ReactNode;
100
101 /**
102 * 设置标签类型
103 */
104 component?: React.ElementType;
105}
106
107export interface CardContentProps extends HTMLAttributesWeak, CommonProps {
108 /**
109 * 设置标签类型
110 */
111 component?: React.ElementType;
112}
113
114export interface CardMediaProps extends HTMLAttributesWeak, CommonProps {
115 /**
116 * 设置标签类型
117 */
118 component?: React.ElementType;
119 /**
120 * 背景图片地址
121 */
122 image?: string;
123 /**
124 * 媒体源文件地址
125 */
126 src?: string;
127}
128
129export interface CardActionsProps extends HTMLAttributesWeak, CommonProps {
130}
131
132export interface CardDividerProps extends HTMLAttributesWeak, CommonProps {
133 /**
134 * 分割线是否向内缩进
135 */
136 inset?: boolean;
137}
138
139export default class Card extends React.Component<CardProps, any> {
140 static BulletHeader: React.ComponentType<CardBulletHeaderProps>;
141 static CollaspeContent: React.ComponentType<CardCollaspeContentProps>;
142 static CollapseContent: React.ComponentType<CardCollapseContentProps>;
143 static Header: React.ComponentType<CardHeaderProps>;
144 static Content: React.ComponentType<CardContentProps>;
145 static Media: React.ComponentType<CardMediaProps>;
146 static Actions: React.ComponentType<CardActionsProps>;
147 static Divider: React.ComponentType<CardDividerProps>;
148}