jamis/lib/r-layout/types/index.d.ts

一种支持通过JSON配置方式生成页面的组件库

import type { RendererProps } from 'jamis-core';
import type { BaseSchema, FormHorizontal, SchemaCollection, SchemaExpression, SchemaObject } from '../../types';
export * from './_Flex';
export type HBoxColumn = {
    /**
     * 列上 CSS 类名
     */
    columnClassName?: string;
    /**
     * 垂直对齐方式
     */
    valign?: 'top' | 'middle' | 'bottom' | 'between';
    /**
     * 宽度
     */
    width?: number | string;
    /**
     * 高度
     */
    height?: number | string;
    /**
     * 其他样式
     */
    style?: React.CSSProperties;
    /**
     * 配置子表单项默认的展示方式。
     */
    mode?: 'normal' | 'inline' | 'horizontal';
    /**
     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
     */
    horizontal?: FormHorizontal;
    /**
     * 内容区
     */
    body?: SchemaCollection;
    /**
     * 是否显示
     */
    visible?: boolean;
    /**
     * 是否显示表达式
     */
    visibleOn?: SchemaExpression;
} & Partial<SchemaObject>;
/**
 * Hbox 水平布局组件。
 */
export interface HBoxSchema extends BaseSchema {
    /**
     * 指定为hbox展示类型
     */
    type: 'hbox';
    columns: Array<HBoxColumn>;
    /**
     * 配置子表单项默认的展示方式。
     */
    subFormMode?: 'normal' | 'inline' | 'horizontal';
    /**
     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
     */
    subFormHorizontal?: FormHorizontal;
    /**
     * 水平间距
     */
    gap?: 'xs' | 'sm' | 'base' | 'none' | 'md' | 'lg';
    /**
     * 垂直对齐方式
     */
    valign?: 'top' | 'middle' | 'bottom' | 'between';
    /**
     * 水平对齐方式
     */
    align?: 'left' | 'right' | 'between' | 'center';
}
export interface HBoxProps extends RendererProps, HBoxSchema {
    className: string;
    itemRender?: (item: any, key: number, length: number, props: any) => JSX.Element;
}
export type VBoxRow = SchemaObject & {
    rowClassName?: string;
    cellClassName?: string;
};
/**
 * 垂直布局控件
 *
 */
export interface VBoxSchema extends BaseSchema {
    type: 'vbox';
    /**
     * 行集合
     */
    rows?: Array<VBoxRow>;
}