mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
liaoxuezhi
GitHub
commit
92f9ff0c7f
@ -17,55 +17,52 @@ order: 53
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
{
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "基本配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"label": "文本1"
|
||||
"title": "基本配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
},
|
||||
"title": "其他配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text3",
|
||||
"type": "text",
|
||||
"label": "文本3"
|
||||
},
|
||||
|
||||
{
|
||||
"title": "其他配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text3",
|
||||
"type": "text",
|
||||
"label": "文本3"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text4",
|
||||
"type": "text",
|
||||
"label": "文本4"
|
||||
{
|
||||
"name": "text4",
|
||||
"type": "text",
|
||||
"label": "文本4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 更多功能
|
||||
|
||||
请参考[这里](../tabs)。
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------------------------ | ------ | ------------------- |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| toolbar | [SchemaNode](../../types/schemanode) | | tabs 中的工具栏 |
|
||||
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].body | [SchemaNode](../../types/schemanode) | | 内容容器 |
|
||||
| tabs[x].controls | Array<[表单项](./formitem)> | | 表单项集合。 |
|
||||
请参考[这里](../tabs#属性表)。
|
||||
|
||||
@ -98,6 +98,29 @@ order: 68
|
||||
}
|
||||
```
|
||||
|
||||
### 垂直
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "tabs",
|
||||
"mode": "vertical",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "选项卡1",
|
||||
"body": "选项卡内容1"
|
||||
},
|
||||
{
|
||||
"title": "选项卡2",
|
||||
"body": "选项卡内容2"
|
||||
},
|
||||
{
|
||||
"title": "选项卡3",
|
||||
"body": "选项卡内容3"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 配置顶部工具栏
|
||||
|
||||
配置`toolbar`实现顶部工具栏。
|
||||
@ -211,6 +234,7 @@ order: 68
|
||||
| --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| mode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical` |
|
||||
| tabsClassName | `string` | | Tabs Dom 的类名 |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |
|
||||
|
||||
@ -16,6 +16,7 @@ import HintFormSchema from './Form/Hint';
|
||||
import FieldSetInTabsFormSchema from './Form/FieldSetInTabs';
|
||||
import ComboFormSchema from './Form/Combo';
|
||||
import ConditionBuilderSchema from './Form/ConditionBuilder';
|
||||
import StyleBuilderSchema from './Form/StyleBuilder';
|
||||
import SubFormSchema from './Form/SubForm';
|
||||
import RichTextSchema from './Form/RichText';
|
||||
import EditorSchema from './Form/Editor';
|
||||
@ -237,6 +238,12 @@ export const examples = [
|
||||
label: '引用',
|
||||
path: '/examples/form/definitions',
|
||||
component: makeSchemaRenderer(Definitions)
|
||||
},
|
||||
|
||||
{
|
||||
label: '样式编辑',
|
||||
path: '/examples/form/style-builder',
|
||||
component: makeSchemaRenderer(StyleBuilderSchema)
|
||||
}
|
||||
|
||||
// {
|
||||
|
||||
274
examples/components/Form/StyleBuilder.jsx
Normal file
274
examples/components/Form/StyleBuilder.jsx
Normal file
@ -0,0 +1,274 @@
|
||||
/**
|
||||
* @file 基于 amis 实现简单样式编辑
|
||||
*/
|
||||
|
||||
// 此文件是基于 https://github.com/ChromeDevTools/devtools-frontend/blob/master/third_party/blink/renderer/core/css/css_properties.json5 编译出来的
|
||||
const cssProperties = __inline('./css_properties.json');
|
||||
|
||||
const propertiesOptions = [];
|
||||
|
||||
const valueTypeControls = [];
|
||||
let valueControls = [];
|
||||
|
||||
cssProperties.data.sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
for (const property of cssProperties.data) {
|
||||
if (property.svg || property.name.startsWith('-')) {
|
||||
// 忽略 svg 相关或古老的 -webkit 属性
|
||||
continue;
|
||||
}
|
||||
|
||||
propertiesOptions.push(property.name);
|
||||
|
||||
let valueTypeOptions = property.typedom_types || [];
|
||||
// 原来的定义中并没有这个类型
|
||||
if (property.type_name === 'StyleColor') {
|
||||
valueTypeOptions.push('Color');
|
||||
valueTypeOptions.push('ColorRGBA');
|
||||
}
|
||||
|
||||
valueTypeOptions.sort();
|
||||
|
||||
// 有些属性是中有 keyword 类型但没 keywords 列表，比如 scroll-margin-left，这时要去掉这个类型
|
||||
if (!property.keywords) {
|
||||
valueTypeOptions = valueTypeOptions.filter(function (item) {
|
||||
return item !== 'Keyword';
|
||||
});
|
||||
}
|
||||
|
||||
if (valueTypeOptions.length > 0) {
|
||||
valueTypeControls.push({
|
||||
name: 'valueType',
|
||||
label: '值类型',
|
||||
visibleOn: `data.property === "${property.name}"`,
|
||||
type: 'select',
|
||||
value: valueTypeOptions[0],
|
||||
options: valueTypeOptions
|
||||
});
|
||||
}
|
||||
|
||||
if (property.keywords) {
|
||||
const keywords = property.keywords;
|
||||
keywords.sort();
|
||||
valueControls.push({
|
||||
name: 'value',
|
||||
visibleOn: `data.property === "${property.name}" && data.valueType === "Keyword"`,
|
||||
label: '值',
|
||||
type: 'select',
|
||||
options: keywords
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
valueControls = valueControls.concat([
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Color"`,
|
||||
label: '值',
|
||||
type: 'color'
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
format: 'rgba',
|
||||
visibleOn: `data.valueType === "ColorRGBA"`,
|
||||
label: '值',
|
||||
type: 'color'
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Number"`,
|
||||
label: '值',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'input-group',
|
||||
label: '值',
|
||||
visibleOn: `data.valueType === "Length"`,
|
||||
controls: [
|
||||
{
|
||||
name: 'value',
|
||||
label: '值',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'valueUnit',
|
||||
// https://www.w3.org/TR/css3-values/#lengths
|
||||
options: [
|
||||
'em',
|
||||
'ex',
|
||||
'ch',
|
||||
'rem',
|
||||
'vm',
|
||||
'vh',
|
||||
'vmin',
|
||||
'vmax',
|
||||
'cm',
|
||||
'mm',
|
||||
'Q',
|
||||
'in',
|
||||
'pt',
|
||||
'pc',
|
||||
'px'
|
||||
],
|
||||
value: 'px'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Percentage"`,
|
||||
label: '值',
|
||||
type: 'text',
|
||||
addOn: {
|
||||
type: 'static',
|
||||
label: '%'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Angle"`,
|
||||
label: '值',
|
||||
type: 'input-group',
|
||||
controls: [
|
||||
{
|
||||
name: 'value',
|
||||
label: '值',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'valueUnit',
|
||||
// https://www.w3.org/TR/css3-values/#angles
|
||||
options: ['deg', 'grad', 'rad', 'turn'],
|
||||
value: 'px'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Time"`,
|
||||
label: '值',
|
||||
type: 'input-group',
|
||||
controls: [
|
||||
{
|
||||
name: 'value',
|
||||
label: '值',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'valueUnit',
|
||||
// https://www.w3.org/TR/css3-values/#time
|
||||
options: ['s', 'ms'],
|
||||
value: 's'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Frequency"`,
|
||||
label: '值',
|
||||
type: 'input-group',
|
||||
controls: [
|
||||
{
|
||||
name: 'value',
|
||||
label: '值',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'valueUnit',
|
||||
// https://www.w3.org/TR/css3-values/#frequency
|
||||
options: ['Hz', 'kHz'],
|
||||
value: 'Hz'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Frequency"`,
|
||||
label: '值',
|
||||
type: 'input-group',
|
||||
controls: [
|
||||
{
|
||||
name: 'value',
|
||||
label: '值',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'valueUnit',
|
||||
// https://www.w3.org/TR/css3-values/#resolution
|
||||
options: ['dpi', 'dpcm', 'dppx'],
|
||||
value: 'dpi'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `data.valueType === "Position"`,
|
||||
label: '值',
|
||||
|
||||
type: 'tag',
|
||||
// https://www.w3.org/TR/css3-values/#position
|
||||
options: ['top', 'left', 'bottom', 'right', 'center']
|
||||
},
|
||||
// 这些类型支持起来好麻烦，先不弄
|
||||
{
|
||||
name: 'value',
|
||||
visibleOn: `!data.valueType || data.valueType === "Flex" || data.valueType === "Transform" || data.valueType === "Unparsed"|| data.valueType === "Image"`,
|
||||
label: '值',
|
||||
type: 'text'
|
||||
}
|
||||
]);
|
||||
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '样式编辑',
|
||||
data: {
|
||||
style: [
|
||||
{property: 'display', valueType: 'Keyword', value: 'inline'},
|
||||
{property: 'color', valueType: 'Color', value: '#5240a5'},
|
||||
{property: 'width', valueType: 'Percentage', value: '30'},
|
||||
{
|
||||
property: 'object-position',
|
||||
valueType: 'Position',
|
||||
value: ['left', '50%']
|
||||
}
|
||||
]
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm',
|
||||
title: '',
|
||||
controls: [
|
||||
{
|
||||
type: 'static',
|
||||
value:
|
||||
'演示基于 combo 及显隐联动来实现简易样式编辑，同时用来测试性能。'
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'style',
|
||||
label: '样式列表',
|
||||
multiple: true,
|
||||
controls: [
|
||||
{
|
||||
name: 'property',
|
||||
label: '属性',
|
||||
type: 'select',
|
||||
searchable: true,
|
||||
options: propertiesOptions
|
||||
},
|
||||
...valueTypeControls,
|
||||
...valueControls
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
1
examples/components/Form/css_properties.json
Normal file
1
examples/components/Form/css_properties.json
Normal file
File diff suppressed because one or more lines are too long
6307
examples/components/Form/css_properties.json5
Executable file
6307
examples/components/Form/css_properties.json5
Executable file
File diff suppressed because it is too large
Load Diff
@ -158,6 +158,35 @@ export default {
|
||||
body: '选项卡内容3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'tabs',
|
||||
mode: 'vertical',
|
||||
tabs: [
|
||||
{
|
||||
title: '选项卡1',
|
||||
body: '选项卡内容1'
|
||||
},
|
||||
{
|
||||
title: '选项卡2',
|
||||
body: '选项卡内容2'
|
||||
},
|
||||
{
|
||||
title: '选项卡3',
|
||||
body: '选项卡内容3'
|
||||
},
|
||||
{
|
||||
title: '选项卡4',
|
||||
body: '选项卡内容4'
|
||||
},
|
||||
{
|
||||
title: '选项卡5',
|
||||
body: '选项卡内容5'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user