plain-design 1.0.0-beta.1 → 1.0.0-beta.10
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +11 -2
- package/dist/plain-design.min.css +3 -1
- package/dist/plain-design.min.js +11 -2
- package/dist/report.html +2 -2
- package/package.json +4 -4
- package/src/packages/build.ts +1 -1
- package/src/packages/components/Application/theme/theme.ts +1 -1
- package/src/packages/components/ColorPicker/sub/ColorSlider.tsx +8 -5
- package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx +7 -4
- package/src/packages/components/Dialog/index.tsx +2 -1
- package/src/packages/components/Dialog/useDialogMovable.tsx +7 -4
- package/src/packages/components/Dialog/utils/dialog.mouse.ts +4 -2
- package/src/packages/components/Input/useMultipleInput.tsx +5 -2
- package/src/packages/components/Input/useTextareaInput.tsx +10 -5
- package/src/packages/components/InputNumber/NumberResize.tsx +6 -2
- package/src/packages/components/Layout/index.tsx +31 -0
- package/src/packages/components/Layout/layout.scss +227 -0
- package/src/packages/components/Layout/layout.utils.ts +3 -0
- package/src/packages/components/LayoutSection/index.tsx +67 -0
- package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx +184 -0
- package/src/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx} +6 -4
- package/src/packages/components/Popup/index.tsx +20 -8
- package/src/packages/components/Rate/index.tsx +3 -1
- package/src/packages/components/Scroll/HorizontalScrollbar.tsx +7 -3
- package/src/packages/components/Scroll/VerticalScrollbar.tsx +7 -3
- package/src/packages/components/Slider/useSliderDotDragier.tsx +7 -4
- package/src/packages/components/Table/table/head/useHeadCellResize.ts +8 -3
- package/src/packages/components/Table/table/use/useTableDraggier.col.tsx +10 -5
- package/src/packages/components/Table/table/use/useTableDraggier.row.tsx +11 -6
- package/src/packages/components/ThemePrimaryColors/index.ts +5 -0
- package/src/packages/components/Tree/RenderTreeNode.tsx +2 -1
- package/src/packages/components/Tree/tree.scss +34 -8
- package/src/packages/components/TreeCore/TreeCore.type.tsx +2 -0
- package/src/packages/components/TreeCore/createTreeCore.tsx +5 -1
- package/src/packages/components/TreeCore/createTreeDraggier.tsx +9 -5
- package/src/packages/components/TreeCore/createTreeProps.ts +1 -0
- package/src/packages/components/TreeNodeWithMenu/index.tsx +53 -0
- package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss +38 -0
- package/src/packages/components/createProvider/index.ts +5 -0
- package/src/packages/components/nextPopupId/index.ts +5 -0
- package/src/packages/components/useImage/ImageService.tsx +7 -4
- package/src/packages/components/usePopupManager/index.ts +5 -0
- package/src/packages/components/usePopupTrigger/index.tsx +5 -0
- package/src/packages/components/useReferenceTrigger/index.tsx +5 -0
- package/src/packages/components/useTooltip/index.tsx +2 -0
- package/src/packages/components/useWatchAutoClear/index.ts +5 -0
- package/src/packages/entry.tsx +29 -0
- package/src/packages/utils/ClientZoom.ts +24 -2
- package/src/packages/utils/useMove.tsx +10 -4
- package/src/pages/index/App.tsx +3 -2
- package/src/pages/index/app.scss +5 -0
- package/src/pages/index/components/normal/DemoLayout.tsx +144 -0
- package/src/pages/index/components/normal/DemoLoading.tsx +3 -0
- package/src/pages/index/components/normal/DemoTree.tsx +71 -2
- package/src/pages/index/components/service/DemoPopupService.tsx +6 -3
- package/src/pages/index/home/AppHead.tsx +4 -4
- package/src/pages/index/home/menus.tsx +1 -0
- package/src/pages/index/home/plain-design.png +0 -0
- package/src/pages/index/main.tsx +0 -4
@@ -63,6 +63,8 @@ export interface iTreeProps {
|
|
63
63
|
getNodeIcon?: (node: iTreeNode) => string,
|
64
64
|
/*是否开启拖拽节点功能*/
|
65
65
|
draggable?: boolean,
|
66
|
+
/*自定义draggier按钮*/
|
67
|
+
customDraggier?: boolean,
|
66
68
|
/*判断节点是否可以拖拽*/
|
67
69
|
isAllowDraggable?: (treeNode: iTreeNode) => boolean | void,
|
68
70
|
/*判断节点是否可以放置*/
|
@@ -327,7 +327,11 @@ export function createTreeCore(
|
|
327
327
|
hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
|
328
328
|
);
|
329
329
|
effects.push(
|
330
|
-
hooks.onClickNodeContent.use(({ treeNode }) => {
|
330
|
+
hooks.onClickNodeContent.use(({ treeNode }) => {
|
331
|
+
methods.singleSelect(treeNode);
|
332
|
+
if (props.expandOnClickNode) {methods.toggleExpand(treeNode);}
|
333
|
+
if (props.checkOnClickNode) {methods.toggleCheck(treeNode);}
|
334
|
+
})
|
331
335
|
);
|
332
336
|
effects.push(
|
333
337
|
hooks.onClickCheckbox.use(({ treeNode }) => {
|
@@ -14,6 +14,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
|
14
14
|
import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
|
15
15
|
import {addClass} from "plain-utils/dom/addClass";
|
16
16
|
import {iTreeHooks} from "./createTreeHooks";
|
17
|
+
import {ClientZoom} from "../ClientZoom";
|
17
18
|
|
18
19
|
export function createTreeDraggier(
|
19
20
|
{
|
@@ -222,12 +223,13 @@ export function createTreeDraggier(
|
|
222
223
|
if (!rowElement) {
|
223
224
|
throw new Error(`tree draggier: can't find row element with selector: .${rowClass}`);
|
224
225
|
}
|
226
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
225
227
|
staticState = {
|
226
228
|
startNode: node,
|
227
229
|
rowElement,
|
228
230
|
start: {
|
229
|
-
x:
|
230
|
-
y:
|
231
|
+
x: clientX,
|
232
|
+
y: clientY,
|
231
233
|
},
|
232
234
|
data: null,
|
233
235
|
};
|
@@ -302,7 +304,8 @@ export function createTreeDraggier(
|
|
302
304
|
|
303
305
|
if (!isDragging) {
|
304
306
|
/*拖拽超过一定距离的时候才开始拖拽,避免与点击事件冲突*/
|
305
|
-
|
307
|
+
const { clientY } = ClientZoom.getClientPosition(e);
|
308
|
+
if (!!e && Math.abs(clientY - staticState.start.y) > 5) {
|
306
309
|
isDragging = true;
|
307
310
|
initDraggierState();
|
308
311
|
}
|
@@ -323,9 +326,10 @@ export function createTreeDraggier(
|
|
323
326
|
staticState.data.move.isHideDraggier = true;
|
324
327
|
staticState.data.cloneTreeNode.style.opacity = '0';
|
325
328
|
} else {
|
329
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
326
330
|
staticState.data.move.isHideDraggier = false;
|
327
|
-
staticState.data.move.x =
|
328
|
-
staticState.data.move.y =
|
331
|
+
staticState.data.move.x = clientX;
|
332
|
+
staticState.data.move.y = clientY;
|
329
333
|
staticState.data.move.moveNode = node;
|
330
334
|
staticState.data.move.contentRect = (e.currentTarget as HTMLElement).querySelector(`.${contentClass}`)!.getBoundingClientRect();
|
331
335
|
const percent = (staticState.data.move.y - staticState.data.move.contentRect.top) / staticState.data.move.contentRect.height;
|
@@ -29,6 +29,7 @@ export const TreePropsOptions = {
|
|
29
29
|
defaultExpandAll: { type: Boolean as PropType<iTreeProps["defaultExpandAll"]> },
|
30
30
|
getNodeIcon: { type: Function as PropType<iTreeProps["getNodeIcon"]> },
|
31
31
|
draggable: { type: Boolean as PropType<iTreeProps["draggable"]> },
|
32
|
+
customDraggier: { type: Boolean as PropType<iTreeProps["customDraggier"]> },
|
32
33
|
isAllowDraggable: { type: Function as PropType<iTreeProps["isAllowDraggable"]> },
|
33
34
|
isAllowDroppable: { type: Function as PropType<iTreeProps["isAllowDroppable"]> },
|
34
35
|
leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-file' as string },
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import {cacheComputed, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "plain-design-composition";
|
2
|
+
import Icon from "../Icon";
|
3
|
+
import {iTreeNode} from "../TreeCore/createTreeNode";
|
4
|
+
import './tree-node-with-menu.scss';
|
5
|
+
import Tree from "../Tree";
|
6
|
+
import {useTooltip} from "../useTooltip";
|
7
|
+
|
8
|
+
export const TreeNodeWithMenu = designComponent({
|
9
|
+
name: 'tree-node-with-menu',
|
10
|
+
props: {
|
11
|
+
treeNode: { type: Object as PropType<iTreeNode>, required: true },
|
12
|
+
},
|
13
|
+
setup({ props }) {
|
14
|
+
|
15
|
+
const { refs, onRef } = useRefs({ content: iHTMLDivElement });
|
16
|
+
|
17
|
+
const tree = Tree.use.inject();
|
18
|
+
|
19
|
+
const isDraggable = cacheComputed(() => tree.props.draggable && tree.utils.isAllowDraggable(props.treeNode));
|
20
|
+
|
21
|
+
const classes = useClassCache(() => [
|
22
|
+
getComponentCls('tree-node-with-menu'),
|
23
|
+
{
|
24
|
+
'tree-node-with-menu-draggable': isDraggable.value,
|
25
|
+
}
|
26
|
+
]);
|
27
|
+
|
28
|
+
const handler = {
|
29
|
+
onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
|
30
|
+
tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
|
31
|
+
})),
|
32
|
+
};
|
33
|
+
|
34
|
+
useTooltip({
|
35
|
+
overflow: true,
|
36
|
+
tooltip: () => ({
|
37
|
+
reference: refs.content,
|
38
|
+
message: props.treeNode.label()
|
39
|
+
}),
|
40
|
+
});
|
41
|
+
|
42
|
+
return () => (
|
43
|
+
<div className={classes.value}>
|
44
|
+
<div className="tree-node-with-menu-content" ref={onRef.content}>{props.treeNode.label()}</div>
|
45
|
+
<div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
|
46
|
+
<Icon icon="pi-drag-dot-vertical"/>
|
47
|
+
</div>
|
48
|
+
</div>
|
49
|
+
);
|
50
|
+
},
|
51
|
+
});
|
52
|
+
|
53
|
+
export default TreeNodeWithMenu;
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@include comp(tree-node-with-menu) {
|
2
|
+
display: flex;
|
3
|
+
align-items: center;
|
4
|
+
|
5
|
+
.tree-node-with-menu-content {
|
6
|
+
flex: 1;
|
7
|
+
overflow: hidden;
|
8
|
+
text-overflow: ellipsis;
|
9
|
+
white-space: nowrap;
|
10
|
+
}
|
11
|
+
|
12
|
+
.tree-node-with-menu-button {
|
13
|
+
height: 1em;
|
14
|
+
width: 1em;
|
15
|
+
display: flex;
|
16
|
+
align-items: center;
|
17
|
+
justify-content: center;
|
18
|
+
cursor: pointer;
|
19
|
+
user-select: none;
|
20
|
+
//transition: all ease 0.3s;
|
21
|
+
}
|
22
|
+
|
23
|
+
&.tree-node-with-menu-draggable {
|
24
|
+
.tree-node-with-menu-button {
|
25
|
+
cursor: row-resize;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
@include comp(tree-node) {
|
31
|
+
&:not(:hover) {
|
32
|
+
.tree-node-with-menu-button {
|
33
|
+
opacity: 0;
|
34
|
+
width: 0;
|
35
|
+
pointer-events: none;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
@@ -8,6 +8,7 @@ import {Icon} from "../Icon";
|
|
8
8
|
import i18n from "../i18n";
|
9
9
|
import Transition from "../Transition";
|
10
10
|
import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
|
11
|
+
import {ClientZoom} from "../ClientZoom";
|
11
12
|
|
12
13
|
const nextCount = createCounter("image_preview");
|
13
14
|
|
@@ -167,18 +168,20 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
|
|
167
168
|
startY: 0,
|
168
169
|
};
|
169
170
|
const mousedown = (e: MouseEvent) => {
|
171
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
170
172
|
freezeState = {
|
171
173
|
startTop: state.adjust.top || 0,
|
172
174
|
startLeft: state.adjust.left || 0,
|
173
|
-
startX:
|
174
|
-
startY:
|
175
|
+
startX: clientX,
|
176
|
+
startY: clientY,
|
175
177
|
};
|
176
178
|
document.addEventListener('mousemove', mousemove);
|
177
179
|
document.addEventListener('mouseup', mouseup);
|
178
180
|
};
|
179
181
|
const mousemove = (e: MouseEvent) => {
|
180
|
-
|
181
|
-
state.adjust.
|
182
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
183
|
+
state.adjust.left = clientX - freezeState.startX + freezeState.startLeft;
|
184
|
+
state.adjust.top = clientY - freezeState.startY + freezeState.startTop;
|
182
185
|
};
|
183
186
|
const mouseup = (e: MouseEvent) => {
|
184
187
|
document.removeEventListener('mousemove', mousemove);
|
@@ -46,6 +46,8 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
|
|
46
46
|
if (option.overflow) {
|
47
47
|
if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
|
48
48
|
state.isOverflow = true;
|
49
|
+
} else {
|
50
|
+
state.isOverflow = false;
|
49
51
|
}
|
50
52
|
}
|
51
53
|
},
|
package/src/packages/entry.tsx
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import {setComponentPrefix} from "plain-design-composition";
|
2
|
+
import {createProvider} from "./utils/createProvider";
|
2
3
|
|
3
4
|
export {Application} from "./components/Application";
|
4
5
|
export type {iApplicationConfiguration} from './components/Application/utils/application.utils';
|
@@ -54,6 +55,7 @@ export {TabGroup} from './components/TabGroup';
|
|
54
55
|
export {Tab} from './components/Tab';
|
55
56
|
export {Tag} from './components/Tag';
|
56
57
|
export {Tree} from './components/Tree';
|
58
|
+
export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
|
57
59
|
export {ColorPicker} from './components/ColorPicker';
|
58
60
|
export {TimePicker} from './components/TimePicker';
|
59
61
|
export {DatePicker} from './components/DatePicker';
|
@@ -85,9 +87,28 @@ export {CascadePanel} from './components/CascadePanel';
|
|
85
87
|
export {usePopup} from './components/usePopup';
|
86
88
|
export {Popup} from './components/Popup';
|
87
89
|
export {createPopup} from './components/createPopup';
|
90
|
+
export type {
|
91
|
+
iPopupAlign,
|
92
|
+
iPopupAnimation,
|
93
|
+
iPopupBoundary,
|
94
|
+
iPopupCustomOption,
|
95
|
+
iPopupDefaultOption,
|
96
|
+
iPopupDirection,
|
97
|
+
iPopupManager,
|
98
|
+
iPopupOption,
|
99
|
+
iPopupPlacement,
|
100
|
+
iPopupRects,
|
101
|
+
iPopupRefreshBuildParams,
|
102
|
+
iPopupRefreshParams,
|
103
|
+
iPopupRefs,
|
104
|
+
iPopupTrigger,
|
105
|
+
iPopupUseOption,
|
106
|
+
} from './components/usePopup/utils/popup.utils';
|
88
107
|
export {createScrollUtils} from './components/createScrollUtils';
|
89
108
|
export {useAutoScrollUtils} from './components/useAutoScrollUtils';
|
90
109
|
export {ClientZoom} from './components/ClientZoom';
|
110
|
+
export {Layout} from './components/Layout';
|
111
|
+
export {LayoutSection} from './components/LayoutSection';
|
91
112
|
|
92
113
|
export {VirtualTable} from './components/VirtualTable';
|
93
114
|
export {Table} from './components/Table';
|
@@ -162,5 +183,13 @@ export type {
|
|
162
183
|
iTableOptionCacheRegistryConfig,
|
163
184
|
iTableOptionGetCacheParam
|
164
185
|
} from './components/AutoTable/use/useTableOption.cache.utils';
|
186
|
+
export {PageThemeUtils} from './components/PageThemeUtils';
|
187
|
+
export {ThemePrimaryColors} from './components/ThemePrimaryColors';
|
188
|
+
export {useReferenceTrigger} from './components/useReferenceTrigger';
|
189
|
+
export {usePopupTrigger} from './components/usePopupTrigger';
|
190
|
+
export {useWatchAutoClear} from './components/useWatchAutoClear';
|
191
|
+
export {nextPopupId} from './components/nextPopupId';
|
192
|
+
export {createProvider} from './components/createProvider';
|
193
|
+
export {usePopupManager} from './components/usePopupManager';
|
165
194
|
|
166
195
|
setComponentPrefix(globalComponentPrefix);
|
@@ -1,8 +1,10 @@
|
|
1
|
+
import {iMouseEvent} from 'plain-design-composition';
|
2
|
+
|
1
3
|
export const ClientZoom = (() => {
|
2
4
|
let zoom: '' | number = '';
|
3
5
|
return {
|
4
|
-
get: () => {
|
5
|
-
return zoom;
|
6
|
+
get: (): number => {
|
7
|
+
return zoom === '' ? 1 : zoom;
|
6
8
|
},
|
7
9
|
set: (_zoom: number | null) => {
|
8
10
|
const __zoom = _zoom == null ? '' : _zoom;
|
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
|
|
24
26
|
};
|
25
27
|
}
|
26
28
|
},
|
29
|
+
getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
|
30
|
+
const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
|
31
|
+
return {
|
32
|
+
clientX: ClientZoom.formatClientValue(clientX),
|
33
|
+
clientY: ClientZoom.formatClientValue(clientY),
|
34
|
+
offsetX: ClientZoom.formatClientValue(offsetX),
|
35
|
+
offsetY: ClientZoom.formatClientValue(offsetY),
|
36
|
+
};
|
37
|
+
},
|
38
|
+
formatClientValue: (val: number) => {
|
39
|
+
return ClientZoom.zoomPosition(val);
|
40
|
+
},
|
41
|
+
zoomPosition(val: number) {
|
42
|
+
const zoom = ClientZoom.get();
|
43
|
+
return Number((val / zoom).toFixed(2));
|
44
|
+
},
|
45
|
+
zoomSize(val: number) {
|
46
|
+
const zoom = ClientZoom.get();
|
47
|
+
return Number((val * zoom).toFixed(2));
|
48
|
+
},
|
27
49
|
};
|
28
50
|
})();
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import {createEffects} from "plain-utils/utils/createEffects";
|
2
2
|
import {watch} from "plain-design-composition";
|
3
3
|
import {removeUnit} from "plain-utils/string/removeUnit";
|
4
|
+
import {ClientZoom} from "../components/ClientZoom";
|
4
5
|
|
5
6
|
export function useMove(
|
6
7
|
{
|
@@ -26,6 +27,8 @@ export function useMove(
|
|
26
27
|
|
27
28
|
const onMousedown = (e: MouseEvent) => {
|
28
29
|
|
30
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
31
|
+
|
29
32
|
const { effects: draggierEffects } = createEffects();
|
30
33
|
|
31
34
|
const el = e.currentTarget as HTMLElement;
|
@@ -35,16 +38,19 @@ export function useMove(
|
|
35
38
|
const dragState = {
|
36
39
|
isDragging: false,
|
37
40
|
start: {
|
38
|
-
x:
|
39
|
-
y:
|
41
|
+
x: clientX,
|
42
|
+
y: clientY,
|
40
43
|
left: Number(removeUnit(style.left) || 0),
|
41
44
|
top: Number(removeUnit(style.top) || 0),
|
42
45
|
}
|
43
46
|
};
|
44
47
|
|
45
48
|
const onMousemove = (e: MouseEvent) => {
|
46
|
-
|
47
|
-
const
|
49
|
+
|
50
|
+
const { clientX, clientY } = ClientZoom.getClientPosition(e);
|
51
|
+
|
52
|
+
const durX = clientX - dragState.start.x;
|
53
|
+
const durY = clientY - dragState.start.y;
|
48
54
|
|
49
55
|
if (!dragState.isDragging) {
|
50
56
|
if (durX >= 5 || durY >= 5) {
|
package/src/pages/index/App.tsx
CHANGED
@@ -2,8 +2,9 @@ import {designPage} from 'plain-design-composition';
|
|
2
2
|
import './app.scss';
|
3
3
|
import {AppHome} from "./home/AppHome";
|
4
4
|
import {DemoRowController} from "./Demo/DemoRowController";
|
5
|
-
import {Application} from "../../packages";
|
6
|
-
|
5
|
+
import {Application, ClientZoom, PageThemeUtils} from "../../packages";
|
6
|
+
|
7
|
+
PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
|
7
8
|
|
8
9
|
export const App = designPage(() => {
|
9
10
|
return () => (
|
package/src/pages/index/app.scss
CHANGED
@@ -0,0 +1,144 @@
|
|
1
|
+
import {designPage} from "plain-design-composition";
|
2
|
+
import {DemoRow} from "../../Demo/DemoRow";
|
3
|
+
import {Layout, LayoutSection} from "../../../../packages";
|
4
|
+
|
5
|
+
export const demo1 = designPage(() => {
|
6
|
+
return () => (
|
7
|
+
<DemoRow title="基本用法">
|
8
|
+
<Layout>
|
9
|
+
<LayoutSection position="left">
|
10
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
11
|
+
<div>左侧调节区域</div>
|
12
|
+
<div>(初始化时自动宽度)</div>
|
13
|
+
</div>
|
14
|
+
</LayoutSection>
|
15
|
+
<LayoutSection>
|
16
|
+
<div style={{ height: '200px', padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
|
17
|
+
主内容区域
|
18
|
+
</div>
|
19
|
+
</LayoutSection>
|
20
|
+
<LayoutSection position="right" modelValue={80}>
|
21
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
22
|
+
<div>右侧调节区域</div>
|
23
|
+
<div>(初始化固定80px)</div>
|
24
|
+
</div>
|
25
|
+
</LayoutSection>
|
26
|
+
</Layout>
|
27
|
+
</DemoRow>
|
28
|
+
);
|
29
|
+
});
|
30
|
+
|
31
|
+
|
32
|
+
export const demo2 = designPage(() => {
|
33
|
+
return () => (
|
34
|
+
<DemoRow title="纵向">
|
35
|
+
<Layout vertical style={{ height: '500px' }}>
|
36
|
+
<LayoutSection position="top">
|
37
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
38
|
+
<div>上方调节区域</div>
|
39
|
+
<div>(初始化时自动高度)</div>
|
40
|
+
</div>
|
41
|
+
</LayoutSection>
|
42
|
+
<LayoutSection>
|
43
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
|
44
|
+
主内容区域
|
45
|
+
</div>
|
46
|
+
</LayoutSection>
|
47
|
+
<LayoutSection position="bottom" modelValue={80}>
|
48
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
49
|
+
<div>下方调节区域</div>
|
50
|
+
<div>(初始化固定80px)</div>
|
51
|
+
</div>
|
52
|
+
</LayoutSection>
|
53
|
+
</Layout>
|
54
|
+
</DemoRow>
|
55
|
+
);
|
56
|
+
});
|
57
|
+
|
58
|
+
|
59
|
+
export const demo3 = designPage(() => {
|
60
|
+
return () => (
|
61
|
+
<DemoRow title="嵌套布局">
|
62
|
+
<Layout vertical style={{ height: '500px' }}>
|
63
|
+
<LayoutSection position="top">
|
64
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
65
|
+
<div>上方调节区域</div>
|
66
|
+
<div>(初始化时自动高度)</div>
|
67
|
+
</div>
|
68
|
+
</LayoutSection>
|
69
|
+
<LayoutSection>
|
70
|
+
<div style={{ position: 'absolute', inset: '0' }}>
|
71
|
+
<Layout style={{ height: '100%' }}>
|
72
|
+
<LayoutSection position="left">
|
73
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
74
|
+
<div>左侧调节区域</div>
|
75
|
+
<div>(初始化时自动宽度)</div>
|
76
|
+
</div>
|
77
|
+
</LayoutSection>
|
78
|
+
<LayoutSection>
|
79
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
|
80
|
+
主内容区域
|
81
|
+
</div>
|
82
|
+
</LayoutSection>
|
83
|
+
<LayoutSection position="right" modelValue={80}>
|
84
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
85
|
+
<div>右侧调节区域</div>
|
86
|
+
<div>(初始化固定80px)</div>
|
87
|
+
</div>
|
88
|
+
</LayoutSection>
|
89
|
+
</Layout>
|
90
|
+
</div>
|
91
|
+
</LayoutSection>
|
92
|
+
<LayoutSection position="bottom" modelValue={80}>
|
93
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
94
|
+
<div>下方调节区域</div>
|
95
|
+
<div>(初始化固定80px)</div>
|
96
|
+
</div>
|
97
|
+
</LayoutSection>
|
98
|
+
</Layout>
|
99
|
+
</DemoRow>
|
100
|
+
);
|
101
|
+
});
|
102
|
+
|
103
|
+
|
104
|
+
export const demo4 = designPage(() => {
|
105
|
+
return () => (
|
106
|
+
<DemoRow title="嵌套布局2">
|
107
|
+
<Layout>
|
108
|
+
<LayoutSection position="left">
|
109
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
110
|
+
<div>左侧调节区域</div>
|
111
|
+
<div>(初始化时自动宽度)</div>
|
112
|
+
</div>
|
113
|
+
</LayoutSection>
|
114
|
+
<LayoutSection>
|
115
|
+
<Layout vertical style={{ height: '500px' }}>
|
116
|
+
<LayoutSection position="top">
|
117
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
118
|
+
<div>上方调节区域</div>
|
119
|
+
<div>(初始化时自动高度)</div>
|
120
|
+
</div>
|
121
|
+
</LayoutSection>
|
122
|
+
<LayoutSection>
|
123
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
|
124
|
+
主内容区域
|
125
|
+
</div>
|
126
|
+
</LayoutSection>
|
127
|
+
<LayoutSection position="bottom" modelValue={80}>
|
128
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
129
|
+
<div>下方调节区域</div>
|
130
|
+
<div>(初始化固定80px)</div>
|
131
|
+
</div>
|
132
|
+
</LayoutSection>
|
133
|
+
</Layout>
|
134
|
+
</LayoutSection>
|
135
|
+
<LayoutSection position="right" modelValue={80}>
|
136
|
+
<div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
|
137
|
+
<div>右侧调节区域</div>
|
138
|
+
<div>(初始化固定80px)</div>
|
139
|
+
</div>
|
140
|
+
</LayoutSection>
|
141
|
+
</Layout>
|
142
|
+
</DemoRow>
|
143
|
+
);
|
144
|
+
});
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import {designPage, getComponentCls, reactive} from "plain-design-composition";
|
2
2
|
import {DemoRow} from "../../Demo/DemoRow";
|
3
3
|
import {Button, Checkbox, Loading, LoadingMask} from "../../../../packages";
|
4
|
+
import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
|
4
5
|
|
5
6
|
export const demo1 = designPage(() => () => (
|
6
7
|
<DemoRow title="基本用法">
|
@@ -19,6 +20,7 @@ export const demo2 = designPage(() => () => (
|
|
19
20
|
<Loading type="thet"/>
|
20
21
|
<Loading type="iot"/>
|
21
22
|
<Loading type="kappa"/>
|
23
|
+
<PlainLogo loading/>
|
22
24
|
</DemoRow>
|
23
25
|
));
|
24
26
|
export const demo3 = designPage(() => () => (
|
@@ -33,6 +35,7 @@ export const demo3 = designPage(() => () => (
|
|
33
35
|
<Loading type="thet" style={{ fontSize: '32px' }}/>
|
34
36
|
<Loading type="iot" style={{ fontSize: '32px' }}/>
|
35
37
|
<Loading type="kappa" style={{ fontSize: '32px' }}/>
|
38
|
+
<PlainLogo loading style={{ fontSize: '32px' }}/>
|
36
39
|
</DemoRow>
|
37
40
|
));
|
38
41
|
export const demo4 = designPage(() => () => (
|