import type React from 'react'; import type { CommonProps } from '../util'; type HTMLAttributesWeak = Omit, 'hidden'>; export type TypeRecord = Record; export type BreakPoints = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl'; type Ele = React.JSX.IntrinsicElements | React.JSXElementConstructor; export interface PointProps { offset: string | number | undefined; span: string | number | undefined; } /** * @api Row */ export interface RowProps extends HTMLAttributesWeak, CommonProps { /** * 行内容 * @en Row content */ children?: React.ReactNode; /** * 列间隔 * @en Column spacing * @defaultValue 0 */ gutter?: string | number; /** * 列在行中宽度溢出后是否换行 * @en Whether to wrap when the column width overflows in the row * @defaultValue false */ wrap?: boolean; /** * 行在某一断点下宽度是否保持不变（默认行宽度随视口变化而变化） * @en Whether the row width remains unchanged at a breakpoint (the default row width changes with the viewport) * @defaultValue false */ fixed?: boolean; /** * 固定行的宽度为某一断点的宽度，不受视口影响而变动 * @en The width of the fixed row is the width of a breakpoint, which is not affected by the viewport */ fixedWidth?: BreakPoints; /** * （不支持IE9浏览器）多列垂直方向对齐方式 * @en (IE9 browser is not supported) Multi-column vertical alignment */ align?: 'top' | 'center' | 'bottom' | 'baseline' | 'stretch'; /** * （不支持IE9浏览器）行内具有多余空间时的布局方式 * @en (IE9 browser is not supported) Layout method when there is extra space in the row */ justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around'; /** * 行在不同断点下的显示与隐藏 * @en Display and hide the row at different breakpoints * @remarks \\**可选值**:\true(在所有断点下隐藏)\false(在所有断点下显示)\'xs'(在 xs 断点下隐藏）\['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）- \\**Optional values**:
true (hidden at all breakpoints)\false (displayed at all breakpoints)\'xs' (hidden at xs breakpoint)\['xxs', 'xs', 's', 'm', 'l', 'xl'] (hidden at xxs, xs, s, m, l, xl breakpoints) */ hidden?: boolean | string | Array; /** * 指定以何种元素渲染该节点 * @en Specifies the element with which to render the node * @defaultValue 'div' */ component?: string | React.FunctionComponent | React.ComponentClass; } /** * @api Row.Col */ export interface ColProps extends HTMLAttributesWeak, CommonProps { /** * 列内容 * @en Column content */ children?: React.ReactNode; /** * 列宽度 * @en Column width * @remarks \\**可选值**:
1, 2, 3, ..., 22, 23, 24 - \\**Optional values**:
1, 2, 3, ..., 22, 23, 24 */ span?: string | number; /** * 固定列宽度 * @en Fixed column width * @remarks 宽度值为20 * 栅格数\\**可选值**:\1, 2, 3, ..., 28, 29, 30 - width value is 20 * grid number\\**Optional values**:
1, 2, 3, ..., 28, 29, 30 */ fixedSpan?: string | number; /** * （不支持IE9浏览器）列偏移 * @en (IE9 browser is not supported) Column offset * @remarks \\**可选值**:\1, 2, 3, ..., 22, 23, 24 - \\**Optional values**:
1, 2, 3, ..., 22, 23, 24 */ offset?: string | number; /** * （不支持IE9浏览器）固定列偏移，宽度值为20 * 栅格数\\**可选值**:\1, 2, 3, ..., 28, 29, 30 * @en (IE9 browser is not supported) Fixed column offset, width value is 20 * grid number\\**Optional values**:
1, 2, 3, ..., 28, 29, 30 */ fixedOffset?: string | number; /** * （不支持IE9浏览器）多列垂直方向对齐方式，可覆盖Row的align属性 * @en (IE9 browser is not supported) Multi-column vertical alignment, which can override the align property of Row */ align?: 'top' | 'center' | 'bottom' | 'baseline' | 'stretch'; /** * 列在不同断点下的显示与隐藏 * @en Display and hide the column at different breakpoints * @remarks \\**可选值**:\true(在所有断点下隐藏)\false(在所有断点下显示)\'xs'(在 xs 断点下隐藏）\['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）- \\**Optional values**:\true (hidden at all breakpoints)\false (displayed at all breakpoints)\'xs' (hidden at xs breakpoint)\['xxs', 'xs', 's', 'm', 'l', 'xl'] (hidden at xxs, xs, s, m, l, xl breakpoints) */ hidden?: boolean | string | Array; /** * \>=320px，响应式栅格 * @en \>=320px, responsive grid * @remarks 可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象 - can be grid number (span) or an object containing grid number (span) and offset grid number (offset) */ xxs?: string | number | PointProps; /** * \>=480px，响应式栅格 * @en \>=480px, responsive grid * @remarks 可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象 - can be grid number (span) or an object containing grid number (span) and offset grid number (offset) */ xs?: string | number | PointProps; /** * \>=720px，响应式栅格 * @en \>=720px, responsive grid * @remarks 可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象 - can be grid number (span) or an object containing grid number (span) and offset grid number (offset) */ s?: string | number | PointProps; /** * \>=990px，响应式栅格 * @en \>=990px, responsive grid * @remarks 可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象 - can be grid number (span) or an object containing grid number (span) and offset grid number (offset) */ m?: string | number | PointProps; /** * \>=1200px，响应式栅格 * @en \>=1200px, responsive grid * @remarks 可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象 - can be grid number (span) or an object containing grid number (span) and offset grid number (offset) */ l?: string | number | PointProps; /** * \>=1500px，响应式栅格 * @en \>=1500px, responsive grid * @remarks 可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象 - can be grid number (span) or an object containing grid number (span) and offset grid number (offset) */ xl?: string | number | PointProps; /** * 指定以何种元素渲染该节点，默认为 'div' * @en Specifies the element with which to render the node, default is 'div' * @defaultValue 'div' */ component?: Ele | (() => Ele) | string; } /** * @api Grid */ export interface GridProps extends React.HTMLAttributes, CommonProps { } export {};