mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
feat(layout): 增加一拖二、二拖一常见布局
Change-Id: Iee8edc04dd4cbf13ec1a5bf245b653b45fd45c79
This commit is contained in:
wibetter
parent
b48ecc7840
commit
9ba898f7d1
@ -140,6 +140,10 @@ import './plugin/Layout/Layout1_1_v2';
|
||||
import './plugin/Layout/Layout1_1_1';
|
||||
import './plugin/Layout/Layout1_2_3';
|
||||
|
||||
import './plugin/Layout/Layout1_1_1_v2';
|
||||
import './plugin/Layout/Layout1_2_v2';
|
||||
import './plugin/Layout/Layout2_1_v2';
|
||||
|
||||
import {GridPlugin} from './plugin/Grid';
|
||||
|
||||
import './renderer/OptionControl';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @file Flex 常见布局 1:1:1
|
||||
* @file Flex 常见布局 1:1:1 三栏均分
|
||||
*/
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
87
packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx
Normal file
87
packages/amis-editor/src/plugin/Layout/Layout1_1_1_v2.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
/**
|
||||
* @file Flex 常见布局 上中下布局
|
||||
*/
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export class Layout1_1_1_v2 extends FlexPluginBase {
|
||||
name = '上中下布局';
|
||||
isBaseComponent = false; // 在自定义组件面板中展示
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：上中下布局（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 303;
|
||||
scaffold:any = {
|
||||
type: "flex",
|
||||
items: [
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第一列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
backgroundColor: "rgba(181, 242, 167, 1)",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第二列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
backgroundColor: "rgba(245, 166, 35, 0.48)",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第三列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
backgroundColor: "rgba(74, 144, 226, 1)",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch"
|
||||
}
|
||||
},
|
||||
],
|
||||
direction: "column",
|
||||
justify: "center",
|
||||
alignItems: "stretch",
|
||||
};
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout1_1_1_v2);
|
||||
@ -1,14 +1,14 @@
|
||||
/**
|
||||
* @file Flex 常见布局 1:1 左右均分
|
||||
* @file Flex 常见布局 上下布局
|
||||
*/
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export class Layout1_1_v2 extends FlexPluginBase {
|
||||
name = '上下均分';
|
||||
name = '上下布局';
|
||||
isBaseComponent = false; // 在自定义组件面板中展示
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：上下均分（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
description = '常见布局：上下布局（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 203;
|
||||
scaffold:any = {
|
||||
|
||||
@ -5,10 +5,10 @@ import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export class Layout1_2_3 extends FlexPluginBase {
|
||||
name = '1:2:3 布局';
|
||||
name = '1:2:3 三栏';
|
||||
isBaseComponent = false; // 在自定义组件面板中展示
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：1:2:3 布局（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
description = '常见布局：1:2:3 三栏（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 301;
|
||||
scaffold:any = {
|
||||
|
||||
104
packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx
Normal file
104
packages/amis-editor/src/plugin/Layout/Layout1_2_v2.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export class Layout1_2_v2 extends FlexPluginBase {
|
||||
name = '一拖二布局';
|
||||
isBaseComponent = false; // 在自定义组件面板中展示
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：一拖二布局（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 303;
|
||||
scaffold:any = {
|
||||
type: "flex",
|
||||
items: [
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第一行",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "0 0 auto",
|
||||
flexBasis: "100px",
|
||||
backgroundColor: "rgba(181, 242, 167, 1)",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "flex",
|
||||
items: [
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第一列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
display: "block",
|
||||
backgroundColor: "rgba(71, 92, 233, 0.68)"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第二列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
display: "block",
|
||||
backgroundColor: "rgba(245, 166, 35, 0.48)"
|
||||
}
|
||||
},
|
||||
],
|
||||
style: {
|
||||
height: "100%",
|
||||
},
|
||||
alignItems: "stretch"
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
padding: 0,
|
||||
},
|
||||
isFixedHeight: true,
|
||||
},
|
||||
],
|
||||
style: {
|
||||
overflowX: "auto",
|
||||
margin: "0",
|
||||
maxWidth: "auto",
|
||||
height: "350px",
|
||||
overflowY: "auto"
|
||||
},
|
||||
direction: "column",
|
||||
justify: "center",
|
||||
alignItems: "stretch",
|
||||
isFixedHeight: true
|
||||
};
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout1_2_v2);
|
||||
108
packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx
Normal file
108
packages/amis-editor/src/plugin/Layout/Layout2_1_v2.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
/**
|
||||
* @file Flex 常见布局 二拖一布局
|
||||
*/
|
||||
import {registerEditorPlugin} from 'amis-editor-core';
|
||||
import {FlexPluginBase} from './FlexPluginBase';
|
||||
|
||||
export class Layout2_1_v2 extends FlexPluginBase {
|
||||
name = '二拖一布局';
|
||||
isBaseComponent = false; // 在自定义组件面板中展示
|
||||
pluginIcon = 'flex-container-plugin';
|
||||
description = '常见布局：一拖二布局（布局容器 是基于 CSS Flex 实现的布局容器）。';
|
||||
tags = ['常见布局'];
|
||||
order = 303;
|
||||
scaffold:any = {
|
||||
type: "flex",
|
||||
items: [
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "flex",
|
||||
items: [
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第一列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
display: "block",
|
||||
backgroundColor: "rgba(71, 92, 233, 0.68)"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第二列",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "auto",
|
||||
flexGrow: 1,
|
||||
display: "block",
|
||||
backgroundColor: "rgba(245, 166, 35, 0.48)"
|
||||
}
|
||||
},
|
||||
],
|
||||
style: {
|
||||
height: "100%",
|
||||
},
|
||||
alignItems: "stretch"
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "0 0 auto",
|
||||
flexBasis: "100px",
|
||||
padding: 0,
|
||||
},
|
||||
isFixedHeight: true,
|
||||
},
|
||||
{
|
||||
type: "wrapper",
|
||||
body: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "第一行",
|
||||
inline: false,
|
||||
}
|
||||
],
|
||||
style: {
|
||||
flex: "1 1 auto",
|
||||
flexBasis: "200px",
|
||||
backgroundColor: "rgba(181, 242, 167, 1)",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch"
|
||||
}
|
||||
},
|
||||
],
|
||||
style: {
|
||||
overflowX: "auto",
|
||||
margin: "0",
|
||||
maxWidth: "auto",
|
||||
height: "350px",
|
||||
overflowY: "auto"
|
||||
},
|
||||
direction: "column",
|
||||
justify: "center",
|
||||
alignItems: "stretch",
|
||||
isFixedHeight: true
|
||||
};
|
||||
previewSchema = {
|
||||
...this.scaffold
|
||||
};
|
||||
}
|
||||
|
||||
registerEditorPlugin(Layout2_1_v2);
|
||||
Loading…
Reference in New Issue
Block a user