UNPKG

4.36 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5
6interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
7 hidden?: any;
8}
9
10export interface RowProps extends HTMLAttributesWeak, CommonProps {
11 /**
12 * 行内容
13 */
14 children?: React.ReactNode;
15
16 /**
17 * 列间隔
18 */
19 gutter?: string | number;
20
21 /**
22 * 列在行中宽度溢出后是否换行
23 */
24 wrap?: boolean;
25
26 /**
27 * 行在某一断点下宽度是否保持不变(默认行宽度随视口变化而变化)
28 */
29 fixed?: boolean;
30
31 /**
32 * 固定行的宽度为某一断点的宽度,不受视口影响而变动
33 */
34 fixedWidth?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
35
36 /**
37 * (不支持IE9浏览器)多列垂直方向对齐方式
38 */
39 align?: 'top' | 'center' | 'bottom' | 'baseline' | 'stretch';
40
41 /**
42 * (不支持IE9浏览器)行内具有多余空间时的布局方式
43 */
44 justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
45
46 /**
47 * 行在不同断点下的显示与隐藏<br><br>**可选值**:<br>true(在所有断点下隐藏)<br>false(在所有断点下显示)<br>'xs'(在 xs 断点下隐藏)<br>['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏)
48 */
49 hidden?: boolean | string | Array<any>;
50
51 /**
52 * 指定以何种元素渲染该节点
53 * - 默认为 'div'
54 */
55 component?: string | (() => void);
56}
57
58export class Row extends React.Component<RowProps, any> {}
59
60interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
61 hidden?: any;
62}
63
64export interface ColProps extends HTMLAttributesWeak, CommonProps {
65 /**
66 * 列内容
67 */
68 children?: React.ReactNode;
69
70 /**
71 * 列宽度<br><br>**可选值**:<br>1, 2, 3, ..., 22, 23, 24
72 */
73 span?: string | number;
74
75 /**
76 * 固定列宽度,宽度值为20 * 栅格数<br><br>**可选值**:<br>1, 2, 3, ..., 28, 29, 30
77 */
78 fixedSpan?: string | number;
79
80 /**
81 * (不支持IE9浏览器)列偏移<br><br>**可选值**:<br>1, 2, 3, ..., 22, 23, 24
82 */
83 offset?: string | number;
84
85 /**
86 * (不支持IE9浏览器)固定列偏移,宽度值为20 * 栅格数<br><br>**可选值**:<br>1, 2, 3, ..., 28, 29, 30
87 */
88 fixedOffset?: string | number;
89
90 /**
91 * (不支持IE9浏览器)多列垂直方向对齐方式,可覆盖Rowalign属性
92 */
93 align?: 'top' | 'center' | 'bottom' | 'baseline' | 'stretch';
94
95 /**
96 * 列在不同断点下的显示与隐藏<br><br>**可选值**:<br>true(在所有断点下隐藏)<br>false(在所有断点下显示)<br>'xs'(在 xs 断点下隐藏)<br>['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏)
97 */
98 hidden?: boolean | string | Array<any>;
99
100 /**
101 * >=320px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象
102 */
103 xxs?: string | number | {};
104
105 /**
106 * >=480px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象
107 */
108 xs?: string | number | {};
109
110 /**
111 * >=720px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象
112 */
113 s?: string | number | {};
114
115 /**
116 * >=990px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象
117 */
118 m?: string | number | {};
119
120 /**
121 * >=1200px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象
122 */
123 l?: string | number | {};
124
125 /**
126 * >=1500px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象
127 */
128 xl?: string | number | {};
129
130 /**
131 * 指定以何种元素渲染该节点,默认为 'div'
132 */
133 component?: string | (() => void);
134}
135
136export class Col extends React.Component<ColProps, any> {}
137export interface GridProps extends React.HTMLAttributes<HTMLElement>, CommonProps {}
138
139export default class Grid extends React.Component<GridProps, any> {
140 static Row: typeof Row;
141 static Col: typeof Col;
142}
143
\No newline at end of file