@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
108 lines (107 loc) • 2.28 kB
text/typescript
import { CSSProperties, DOMAttributes, ElementType, HTMLAttributes, ReactNode, Ref } from "react";
//#region src/Flex/type.d.ts
type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch' | 'baseline';
type FlexDirection = 'vertical' | 'vertical-reverse' | 'horizontal' | 'horizontal-reverse';
type DivProps = DOMAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>;
type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
/**
* Flexbox 布局组件的接口
*/
interface IFlexbox {
/**
* 交叉轴对齐方式
* @default "stretch"
*/
align?: ContentPosition;
/**
* 渲染的 HTML 元素类型
* @default "div"
*/
as?: ElementType;
/**
* 子元素
*/
children?: ReactNode;
/**
* 自定义类名
*/
className?: string;
/**
* 主轴方向
* @default "horizontal"
*/
direction?: FlexDirection;
/**
* 内容分布
*/
distribution?: CSSProperties['justifyContent'];
/**
* flex 值
* @default "0 1 auto"
*/
flex?: number | string;
/**
* 主轴方向上的间距
* @default 0
*/
gap?: CommonSpaceNumber | number | string;
/**
* 高度
* @default "auto"
*/
height?: number | string;
/**
* 是否横向
* @default false
*/
horizontal?: boolean;
/**
* 主轴对齐方式
*/
justify?: CSSProperties['justifyContent'];
/**
* 内边距
* @default 0
*/
padding?: string | number | CommonSpaceNumber;
/**
* 块内边距
*/
paddingBlock?: string | number;
/**
* 内联内边距
*/
paddingInline?: string | number;
/**
* 类名前缀
*/
prefixCls?: string;
/**
* ref 引用
*/
ref?: Ref<HTMLElement>;
/**
* 自定义样式
*/
style?: CSSProperties;
/**
* 是否显示
* @default true
*/
visible?: boolean;
/**
* 宽度
* @default "auto"
*/
width?: number | string;
/**
* 换行方式
*/
wrap?: CSSProperties['flexWrap'];
}
interface FlexBasicProps extends IFlexbox, DivProps {}
type FlexboxProps = FlexBasicProps;
type CenterProps = Omit<FlexBasicProps, 'distribution' | 'direction' | 'align'>;
//#endregion
export { CenterProps, ContentPosition, FlexBasicProps, FlexDirection, FlexboxProps };
//# sourceMappingURL=type.d.mts.map