mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 09:21:13 +08:00
fix(amis-saas-8763): 布局容器配置项优化
Change-Id: I173e909f50e75f84a04f98e16952bd3ec0bbeb63
This commit is contained in:
wibetter
parent
7e15e0374b
commit
89e0c4e264
@ -55,21 +55,109 @@ export class ContainerPlugin extends BasePlugin {
|
||||
}),
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
label: '水平对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '左对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '右对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '两端对齐',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布',
|
||||
value: 'space-evenly'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
label: '垂直对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '起点对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '终点对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '两端对齐',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布',
|
||||
value: 'space-evenly'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
label: '水平对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '左对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '右对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '自动拉伸',
|
||||
value: 'stretch'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
label: '垂直对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '起点对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '终点对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '高度撑满',
|
||||
value: 'stretch'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && (data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse")'
|
||||
}),
|
||||
|
||||
@ -30,6 +30,7 @@ export class GridPlugin extends BasePlugin {
|
||||
description = '分栏布局';
|
||||
docLink = '/amis/zh-CN/components/grid';
|
||||
tags = ['布局'];
|
||||
order = 505;
|
||||
icon = 'fa fa-th';
|
||||
pluginIcon = 'grid-plugin';
|
||||
|
||||
|
||||
@ -139,6 +139,28 @@ export class FlexPluginBase extends BasePlugin {
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
name: 'justify',
|
||||
label: '水平对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '左对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '右对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '两端对齐',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布',
|
||||
value: 'space-evenly'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.direction === "row" || data.direction === "row-reverse"'
|
||||
}),
|
||||
@ -146,18 +168,84 @@ export class FlexPluginBase extends BasePlugin {
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
name: 'justify',
|
||||
label: '垂直对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '起点对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '终点对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '两端对齐',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布',
|
||||
value: 'space-evenly'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.direction === "column" || data.direction === "column-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
name: 'alignItems',
|
||||
label: '水平对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '左对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '右对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '自动拉伸',
|
||||
value: 'stretch'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.direction === "column" || data.direction === "column-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
name: 'alignItems',
|
||||
label: '垂直对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '起点对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '终点对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '高度撑满',
|
||||
value: 'stretch'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.direction === "row" || data.direction === "row-reverse"'
|
||||
}),
|
||||
@ -216,7 +304,7 @@ export class FlexPluginBase extends BasePlugin {
|
||||
title: '外观',
|
||||
className: 'p-none',
|
||||
body: getSchemaTpl('collapseGroup', [
|
||||
...getSchemaTpl('style:common', ['display']),
|
||||
...getSchemaTpl('style:common', []),
|
||||
{
|
||||
title: 'CSS 类名',
|
||||
body: [getSchemaTpl('className', {label: '外层CSS类名'})]
|
||||
|
||||
@ -90,21 +90,109 @@ export class WrapperPlugin extends BasePlugin {
|
||||
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
label: '水平对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '左对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '右对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '两端对齐',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布',
|
||||
value: 'space-evenly'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse"'
|
||||
}),
|
||||
getSchemaTpl('layout:justifyContent', {
|
||||
label: '垂直对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '起点对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '终点对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '两端对齐',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布',
|
||||
value: 'space-evenly'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
label: '水平对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '左对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '右对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '自动拉伸',
|
||||
value: 'stretch'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
|
||||
}),
|
||||
getSchemaTpl('layout:alignItems', {
|
||||
label: '垂直对齐方式',
|
||||
options: [
|
||||
{
|
||||
label: '起点对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '终点对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '高度撑满',
|
||||
value: 'stretch'
|
||||
}
|
||||
],
|
||||
visibleOn:
|
||||
'data.style && data.style.display === "flex" && (data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse")'
|
||||
}),
|
||||
|
||||
@ -302,10 +302,43 @@ setSchemaTpl(
|
||||
label?: string; // 表单项 label
|
||||
name?: string; // 表单项 name
|
||||
value?: string;
|
||||
options?: any;
|
||||
visibleOn?: string; // 用于控制显示的表达式
|
||||
pipeIn?: (value: any, data: any) => void;
|
||||
pipeOut?: (value: any, data: any) => void;
|
||||
}) => {
|
||||
|
||||
const defaultOptions = [
|
||||
{
|
||||
label: '起始端对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '末尾端对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（首尾留空）',
|
||||
value: 'space-around'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（首尾对齐）',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（元素等间距）',
|
||||
value: 'space-evenly'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（自动拉伸）',
|
||||
value: 'stretch'
|
||||
}
|
||||
];
|
||||
|
||||
const configSchema = {
|
||||
type: 'select',
|
||||
label:
|
||||
@ -316,36 +349,7 @@ setSchemaTpl(
|
||||
visibleOn: config?.visibleOn,
|
||||
pipeIn: config?.pipeIn,
|
||||
pipeOut: config?.pipeOut,
|
||||
options: [
|
||||
{
|
||||
label: '起始端对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '末尾端对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（首尾留空）',
|
||||
value: 'space-around'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（首尾对齐）',
|
||||
value: 'space-between'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（元素等间距）',
|
||||
value: 'space-evenly'
|
||||
},
|
||||
{
|
||||
label: '均匀分布（自动拉伸）',
|
||||
value: 'stretch'
|
||||
}
|
||||
]
|
||||
options: config?.options || defaultOptions
|
||||
};
|
||||
|
||||
if (config?.mode === 'vertical') {
|
||||
@ -375,10 +379,34 @@ setSchemaTpl(
|
||||
label?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
options?: any;
|
||||
visibleOn?: string;
|
||||
pipeIn?: (value: any, data: any) => void;
|
||||
pipeOut?: (value: any, data: any) => void;
|
||||
}) => {
|
||||
const defaultOptions = [
|
||||
{
|
||||
label: '起始端对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '末尾端对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '自动拉伸',
|
||||
value: 'stretch'
|
||||
}
|
||||
];
|
||||
|
||||
const configSchema = {
|
||||
type: 'select',
|
||||
label:
|
||||
@ -389,28 +417,7 @@ setSchemaTpl(
|
||||
visibleOn: config?.visibleOn,
|
||||
pipeIn: config?.pipeIn,
|
||||
pipeOut: config?.pipeOut,
|
||||
options: [
|
||||
{
|
||||
label: '起始端对齐',
|
||||
value: 'flex-start'
|
||||
},
|
||||
{
|
||||
label: '居中对齐',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '末尾端对齐',
|
||||
value: 'flex-end'
|
||||
},
|
||||
{
|
||||
label: '基线对齐',
|
||||
value: 'baseline'
|
||||
},
|
||||
{
|
||||
label: '自动拉伸',
|
||||
value: 'stretch'
|
||||
}
|
||||
]
|
||||
options: config?.options || defaultOptions
|
||||
};
|
||||
|
||||
if (config?.mode === 'vertical') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user