jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
88 lines (87 loc) • 2.97 kB
TypeScript
import type { RendererProps, SchemaClassName } from 'jamis-core';
import type { BaseSchema, SchemaObject, StaticControlSchemaBase } from '../../types';
export interface FlexItemSpec {
/**
* `flex`属性是`flex-grow`，`flex-shrink`和`flex-basis`的缩写
* 其中第2和第3个参数（`flex-shrink`和`flex-basis`）是可选的。默认值为`0 1 auto`。
*/
flex: 'none' | 'auto' | 'initial' | '1';
/**
* 子项宽度扩展设置, 默认值是0
*/
flexGrow: 0 | 1;
/**
* 子项宽度收缩设置, 默认值是1
*/
flexShrink: 0 | 1;
/**
* 改变某一个flex子项的排序位置
*/
order: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'last';
/**
* 定义了在分配剩余空间之前元素的默认大小, 默认是 auto
*/
flexBasis: 'auto' | 'none' | number;
alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
}
export type FlexItemSchema = SchemaObject & Partial<FlexItemSpec>;
/**
* Flex 布局
*/
export interface FlexSchema extends BaseSchema {
/**
* 指定为 flex 展示类型
*/
type: 'flex';
/**
* @deprecated 使用 flexDirection 替代
*/
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
/**
* 方向
*/
flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
/**
* 控制子项整体单行显示还是换行显示
*/
flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
/**
* 是`flex-direction`和`flex-wrap`的缩写，表示flex布局的flow流动特性
*/
flexFlow?: string;
/**
* 水平分布
*/
justifyContent?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly' | 'normal' | 'stretch';
/**
* @deprecated 使用 justifyContent 替代
*/
justify?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly' | 'normal' | 'stretch';
/**
* 垂直布局
*/
alignItems?: 'stretch' | 'start' | 'flex-start' | 'flex-end' | 'end' | 'center' | 'baseline';
/**
* 多行情况下的垂直分布
*/
alignContent?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline';
/**
* flex 项集合
*/
body?: string | FlexItemSchema | (string | FlexItemSchema)[];
/**
* flex 项集合
* @deprecated 请使用 body 替换
*/
items?: string | FlexItemSchema | (string | FlexItemSchema)[];
/**
* 每项都设置的样式类
*/
itemClassName?: SchemaClassName;
}
export interface StaticFlexSchema extends Omit<FlexSchema, 'type'>, StaticControlSchemaBase {
type: 'static-flex';
}
export interface FlexProps extends RendererProps, Omit<FlexSchema, 'type' | 'className'> {
itemClassName: string;
}