parent
3bedd88768
commit
d4deed140d
@ -0,0 +1,106 @@ |
||||
import { Module } from '../engineer' |
||||
import { createUniqueId } from '../engineer/utils' |
||||
|
||||
const module:Module = { |
||||
title: '导航条', |
||||
vid: createUniqueId(), |
||||
mid: createUniqueId(), |
||||
maxReferenceCount: -1, |
||||
referenceCount: 0, |
||||
image: undefined, |
||||
configs: [ |
||||
{ |
||||
help: '帮助', |
||||
addable: true, |
||||
type: 'list', |
||||
field: 'items', |
||||
label: '导航条', |
||||
configs: [ |
||||
{ |
||||
type: 'image', |
||||
label: '分类图片', |
||||
field: 'itemImage', |
||||
// 表示内联数据
|
||||
inlines: [{ |
||||
type: 'text', |
||||
field: 'link', |
||||
label: '链接', |
||||
help: '请输入链接', // 自动生成："请输入${label}"
|
||||
}, |
||||
{ |
||||
type: 'text', |
||||
label: '自定义标题', |
||||
field: 'title', |
||||
}, |
||||
] |
||||
}, |
||||
] |
||||
}, |
||||
], |
||||
init: { |
||||
theme: { |
||||
color: '#fff', |
||||
}, |
||||
items: [ |
||||
{ |
||||
title: '标题', |
||||
link: 'link' |
||||
} |
||||
] |
||||
}, |
||||
theme: { |
||||
padding: 12, |
||||
color: '@@theme.color', |
||||
}, |
||||
children: { |
||||
theme: { |
||||
width: '100%', |
||||
clip: 'autoX', |
||||
whiteSpace: 'nowrap', |
||||
flexible: true, |
||||
crossAlign:'start' |
||||
}, |
||||
children: { |
||||
type: 'each', |
||||
key: 'items', |
||||
handle: { |
||||
theme: { |
||||
width: 60, |
||||
height: 80, |
||||
display: 'inline-block', |
||||
|
||||
margin: { |
||||
right: 10 |
||||
}, |
||||
}, |
||||
children:[ |
||||
{ |
||||
theme:{ |
||||
width:60, |
||||
height:60, |
||||
radius: 30, |
||||
color: 'pink', |
||||
clip: 'hidden' |
||||
}, |
||||
children:'图片' |
||||
}, |
||||
{ |
||||
theme:{ |
||||
width:60, |
||||
height:20, |
||||
textAlign:'center', |
||||
fontSize: 12, |
||||
whiteSpace: 'nowrap', |
||||
clip: 'hidden' |
||||
}, |
||||
children:{ |
||||
type: 'text', |
||||
key:'.title' |
||||
} |
||||
} |
||||
], |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
export default module |
||||
@ -0,0 +1,87 @@ |
||||
import type { Module } from '../engineer' |
||||
import { createUniqueId } from '../engineer/utils' |
||||
|
||||
const module:Module = { |
||||
title: '搜索框', |
||||
vid: createUniqueId(), |
||||
mid: createUniqueId(), |
||||
maxReferenceCount: -1, |
||||
referenceCount: 0, |
||||
image: undefined, |
||||
configs: [ |
||||
{ |
||||
type: 'object', |
||||
field: 'search', |
||||
label: '搜索框', |
||||
configs: [ |
||||
{ |
||||
required: true, |
||||
type: 'text', |
||||
label: '搜索框内容', |
||||
field: 'innerText' |
||||
}, |
||||
{ |
||||
type: 'boolean', |
||||
field: 'showLogo', |
||||
label: '是否展示左侧logo', |
||||
}, { |
||||
type: 'image', |
||||
field: 'logoImg', |
||||
label: '左侧logo', |
||||
} |
||||
] |
||||
}, |
||||
], |
||||
init: { |
||||
search:{ |
||||
innerText:'猜你喜欢' |
||||
} |
||||
}, |
||||
templates: { |
||||
'true': { |
||||
theme: {}, |
||||
children: 'logo' |
||||
}, |
||||
'false': { |
||||
theme: {}, |
||||
children: '' |
||||
} |
||||
}, |
||||
theme: { |
||||
display: 'flex', |
||||
crossAlign: 'center', |
||||
padding: { |
||||
horizontal: 15, |
||||
vertical: 8, |
||||
}, |
||||
color: 'cyan' |
||||
}, |
||||
children: [ |
||||
{ |
||||
children: { |
||||
type: 'template', |
||||
key: 'search.showLogo' |
||||
}, |
||||
}, |
||||
{ |
||||
theme: { width: 10 }, |
||||
}, |
||||
{ |
||||
theme: { |
||||
width: '60%', |
||||
color: 'white', |
||||
radius: 30.0, |
||||
padding: { |
||||
horizontal: 10, |
||||
vertical: 5, |
||||
}, |
||||
fontSize: 14, |
||||
}, |
||||
children: { |
||||
type: 'text', |
||||
key: 'search.innerText' |
||||
} |
||||
} |
||||
] |
||||
} |
||||
export default module |
||||
@ -0,0 +1,194 @@ |
||||
import type { Module } from '../engineer' |
||||
import { createUniqueId } from '../engineer/utils' |
||||
|
||||
const module:Module = { |
||||
vid: createUniqueId(), |
||||
mid: createUniqueId(), |
||||
title: '轮播图', |
||||
maxReferenceCount: -1, |
||||
referenceCount: 0, |
||||
image: undefined, |
||||
configs: [ |
||||
{ |
||||
type: 'list', |
||||
field: 'items', |
||||
label: '轮播图设置', |
||||
help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序', |
||||
addable: true, |
||||
configs: [{ |
||||
type: 'image', |
||||
field: 'image', |
||||
label: '图片', |
||||
required: true, |
||||
// 表示内联数据
|
||||
inlines: [{ |
||||
type: 'text', |
||||
field: 'title', |
||||
label: '标题', |
||||
help: '选填，不超过 4 个字', |
||||
}, { |
||||
type: 'text', |
||||
field: 'link', |
||||
label: '链接', |
||||
help: '请输入链接', // 自动生成："请输入${label}"
|
||||
}], |
||||
}], |
||||
}, |
||||
{ |
||||
type: 'object', |
||||
field: 'indicator', |
||||
label: '指示器', |
||||
configs: [{ |
||||
type: 'mark', |
||||
field: 'style', |
||||
label: '指示器样式', |
||||
values: [ |
||||
{ label: '圆形', value: '#circle' }, |
||||
{ label: '直线', value: '#line' }, |
||||
{ label: '数字', value: '#number' }, |
||||
], |
||||
}, { |
||||
type: 'mark', |
||||
field: 'position', |
||||
label: '指示器位置', |
||||
values: [ |
||||
{ label: '居左', value: 'start' }, |
||||
{ label: '居中', value: 'center' }, |
||||
{ label: '居右', value: 'end' }, |
||||
], |
||||
}, |
||||
{ |
||||
type: 'color', |
||||
field: 'color', |
||||
label: '指示器颜色', |
||||
}], |
||||
}, |
||||
{ |
||||
type: 'object', |
||||
field: 'background', |
||||
label: '背景', |
||||
configs: [{ |
||||
type: 'boolean', |
||||
field: 'enabled', |
||||
label: '是否显示背景色', |
||||
}, { |
||||
type: 'background', |
||||
field: 'value', |
||||
// 背景的不同实现方式，可以在里面添加 image 选项来支持图片
|
||||
// 这里只能支持颜色和渐变，
|
||||
features: ['color', 'gradient'], |
||||
label: '背景', |
||||
}], |
||||
} |
||||
], |
||||
init: { |
||||
items: [ |
||||
{ |
||||
image: '', |
||||
title: '123', |
||||
link: '123', |
||||
} |
||||
], |
||||
indicator: { |
||||
style: '#circle', |
||||
color: 'green', |
||||
position: 'start', |
||||
}, |
||||
background: { |
||||
enabled: true, |
||||
value: "#ffffff", |
||||
}, |
||||
theme: { |
||||
color: 'white', |
||||
radius: 24 |
||||
} |
||||
}, |
||||
templates: { |
||||
'#circle': { |
||||
theme: { |
||||
gap: 1, |
||||
}, |
||||
children: { |
||||
type: 'each', |
||||
key: 'items', |
||||
handle: { |
||||
theme: { |
||||
width: 5, |
||||
height: 5, |
||||
radius: 2.5, |
||||
color: '@@indicator.color', |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
'#line': { |
||||
theme: { |
||||
gap: 1, |
||||
}, |
||||
children: { |
||||
type: 'each', |
||||
key: 'items', |
||||
handle: { |
||||
theme: { |
||||
width: 5, |
||||
height: 2, |
||||
color: '@@indicator.color', |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
"#number": { |
||||
theme: { |
||||
color: 'rgba(0,0,0,0.4)', |
||||
textColor: '#fff', |
||||
radius:10, |
||||
padding:{ |
||||
left:10, |
||||
right:10 |
||||
}, |
||||
flexible:true, |
||||
mainAlign:'center', |
||||
crossAlign: 'center' |
||||
}, |
||||
children: '1/0' |
||||
} |
||||
}, |
||||
theme: { |
||||
position: 'relative', |
||||
height: 200, |
||||
padding: { |
||||
horizontal: 12.0, |
||||
vertical: 12, |
||||
}, |
||||
color: 'cyan', |
||||
}, |
||||
children: [ |
||||
{ |
||||
vid: createUniqueId(), |
||||
theme: { |
||||
width: '100%', |
||||
height: '100%', |
||||
color: '@@theme.color', |
||||
radius: "@@theme.radius", |
||||
textAlign: 'center', |
||||
}, |
||||
children: '设置轮播图', |
||||
}, |
||||
{ |
||||
theme: { |
||||
position: 'absolute', |
||||
flexible: true, |
||||
mainAlign: '@@indicator.position', |
||||
bottom: 20, |
||||
left: 30, |
||||
right: 30, |
||||
height: 20, |
||||
}, |
||||
children: { |
||||
type: 'template', |
||||
key: 'indicator.style' |
||||
} |
||||
}], |
||||
} |
||||
|
||||
export default module |
||||
Loading…
Reference in new issue