cgreact-core/types/cgreact-type-layout.ts

未发表！CGReact前端Web研发框架核心包

/** 布局数据类型：STATE*/
import {ModalState} from "./cgreact-type-modal";

type CGReactAlign = "left-top" | "left-center" | "left-bottom" | "middle-top" | "middle-center" | "middle-bottom" | "right-top" | "right-center" | "right-bottom";
type CGReactGrid = "grid-1" | "grid-2" | "grid-3" | "grid-4" | "grid-5" | "grid-6" | "grid-7" | "grid-8" | "grid-9" | "grid-10" | "grid-11" | "grid-12";//删格系统
type CGReactLength = "fit-content" | "stretch-parent" | "stretch-content";//"fit-content"不爱伸展，"stretch-parent"自动填满父，"stretch-content"自动伸展
type MediaResponse = {
    phoneXS: CGReactGrid | CGReactLength, //移动手机，超小屏幕，参考尺寸 <=768px
    padSM: CGReactGrid | CGReactLength, //pad设备，小屏幕，768px <参考尺寸 <=992px
    laptopMD: CGReactGrid | CGReactLength,//膝上电脑，中型屏幕，992px <参考尺寸 <=1200px
    desktopLG: CGReactGrid | CGReactLength, //桌面端PC电脑，参考尺寸 >1200px
}
type CGReactLayoutState = {
    layoutName?: string, //布局的名称属性，渲染为item-name
    direction?: "horizontal" | "vertical", //布局的方向属性为横向
    layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局
    layoutHeight?: number | CGReactLength | CGReactGrid,//布局长度，垂直方向支持删格系统
    layoutBorder?: "none" | "default",//布局的边框，default是灰色的1像素边框，后续继续丰富
    gravity?: CGReactAlign, //布局包含的子元素的对其方式
    align?: CGReactAlign, //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置
    layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示，如果没有配置，子Layout会自动同步父Layout的配置
}//Layout用户空间数据定义
export interface LayoutState extends CGReactLayoutState {}

/** 组件参数类型：PROP*/
type CGReactLayoutProp = {
    className?: string, //可以配置className
    style?: React.CSSProperties, //可以配置style
    layout?: CGReactLayoutState, //layout的数据配置
    modal?: ModalState | boolean,//对话框参数配置
} //组件参数默认配置
export interface LayoutProp extends CGReactLayoutProp, CGReactLayoutState {}

/** 用户接口回调参数*/
export interface LayoutConfig
{
    direction: "horizontal" | "vertical", //布局的方向属性
    layoutName: string, //布局的名称属性
    layoutDebug: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子
    layoutBorder: "none" | "default",//布局的边框
    layoutWidthXS: CGReactGrid | CGReactLength,//超小屏幕宽度
    layoutWidthSM: CGReactGrid | CGReactLength,//小屏幕宽度
    layoutWidthMD: CGReactGrid | CGReactLength,//中屏幕宽度
    layoutWidthLG: CGReactGrid | CGReactLength,//大屏幕宽度,
    layoutHeight: CGReactGrid | CGReactLength,//高度配置，
    gravity: CGReactAlign, //布局包含的子元素的对其方式
    align: CGReactAlign, //布局相对于父布局的对其方式
}