@cainiaofe/cn-ui-layout/lib/components/cn-layout/types.d.ts

- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`

import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
export type BaseSize = 'small' | 'medium' | 'large';
/**
 * 基础属性
 */
export type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
/**
 * 基础的小布局简写配置
 */
export type BaseGap = 'auto' | number;
export interface BaseBgMode {
    /**
     * 容器预置背景色
     */
    mode?: 'surface' | 'lining' | 'transparent';
}
export interface TypeMark {
    typeMark?: string;
}
/**
 * 断点
 */
export interface BreakPoint {
    /**
     *  断点宽度(包含)
     */
    width: number;
    /**
     * 最大展示宽, 默认为断点宽度
     */
    maxContentWidth: number | string;
    /**
     * 列数
     */
    numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16;
}
/**
 * 断点配置(至少 2 个)
 */
export type BreakPoints = BreakPoint[];
/**
 * 上下文
 */
export interface LayoutContextProps {
    /**
     * 类名前缀
     */
    prefix?: string;
    /**
     * 当前断点信息
     */
    breakPoint: BreakPoint;
    /**
     * 禁用页面内容的内边距
     */
    noPadding?: boolean;
    /**
     * 最大列数
     */
    maxNumberOfColumns: number;
    /**
     * content 中 "章" 之间的间距
     */
    sectionGap?: BaseGap;
    /**
     * 水槽间距
     */
    blockGap?: BaseGap;
    /**
     * 小布局间距（行、列、网格布局的 单元格-Cell 间距）
     */
    gridGap?: BaseGap;
}
/**
 * 内容
 */
export interface PageContentProps extends BaseProps, BaseBgMode {
    /**
     * 子节点
     */
    children?: ReactNode;
    /**
     * 禁用内容区域的默认内边距
     */
    noPadding?: boolean;
}
/**
 * 章节
 */
export interface CnLayoutSectionProps extends BaseProps {
    /**
     * 章节标题
     */
    title?: ReactNode;
    /**
     * 章节标题
     */
    titleAlign?: 'left' | 'center';
    /**
     * 附加内容
     */
    extra?: ReactNode;
    /**
     * 移除内边距
     */
    noPadding?: boolean;
    /**
     * 章节中区块的间隙
     */
    gap?: BaseGap;
    /**
     * 子节点
     */
    children?: ReactNode;
}
/**
 * 单元格容器
 */
export interface CnLayoutCellProps extends BaseProps {
    /**
     * 在行模式下，未设置 autoFit 时, 自定义单个 cell 的宽度，
     */
    width?: number | string;
    /**
     * 指定高度
     */
    height?: number | string;
    /**
     * 是否宽度（行模式下）/ 高度（列模式下）自适应内容
     */
    autoFit?: boolean;
    /**
     * 自定义内容间隙
     */
    gap?: BaseGap;
    /**
     * 主轴方向
     */
    direction?: 'hoz' | 'ver';
    /**
     * cell 子元素的水平对齐方式
     */
    align?: 'left' | 'center' | 'right';
    /**
     * cell 子元素的垂直对齐方式
     */
    verAlign?: 'top' | 'middle' | 'bottom' | 'space-around' | 'space-between' | 'space-evenly';
    /**
     * 启用 display:block 模式(默认为 flex )
     */
    block?: boolean;
    /**
     * 孩子节点
     */
    children?: ReactNode;
}
/**
 * 区块，默认 flex 布局
 */
export interface CnLayoutBlockProps extends BaseProps, BaseBgMode, Omit<CnLayoutCellProps, 'width' | 'height'> {
    /**
     * 禁用 padding
     */
    noPadding?: boolean;
    /**
     * 展示标题与内容的分割线
     */
    divider?: boolean;
    /**
     * 展示边框
     */
    bordered?: boolean;
    /**
     * 列宽
     */
    span?: number;
    /**
     * 指定宽度
     */
    width?: number | string;
    /**
     * 有标题时生效,内容区域的样式名
     */
    contentClassName?: string;
    /**
     * 有标题时生效,内容区域的自定义样式
     */
    contentStyle?: CSSProperties;
    /**
     * 区块标题
     */
    title?: ReactNode;
    /**
     * 标题的对齐方式
     */
    titleAlign?: 'left' | 'center';
    /**
     * 附加内容
     */
    extra?: ReactNode;
    /**
     * 孩子节点
     */
    children?: ReactNode;
}
/**
 * 行列通用属性类型
 */
interface BaseRowColPropBases extends BaseProps {
    /**
     * 是否 宽度/高度 自适应
     */
    autoFit?: boolean;
    /**
     * 单元格列间距尺寸, 可为预设值 `small`， `medium`、`large`, `false` 或 css 长度单位。此项设置会覆盖 Page 上的 grid-gap 全局值
     */
    gap?: BaseGap;
    /**
     * 固定宽度
     */
    width?: number | string;
    /**
     *固定高度
     */
    height?: number | string;
    /**
     * 自定义样式
     */
    style?: CSSProperties;
    /**
     * 孩子节点
     */
    children?: ReactNode;
}
/**
 * 行模式容器
 */
export interface CnLayoutRowProps extends BaseRowColPropBases {
    /**
     * 子元素垂直对齐方式
     */
    verAlign?: 'top' | 'middle' | 'bottom' | 'stretch' | 'baseline';
}
/**
 * 列模式容器
 */
export interface CnLayoutColProps extends BaseRowColPropBases {
    /**
     * 子元素水平对齐方式
     */
    align?: 'left' | 'center' | 'right' | 'stretch';
}
export {};