@magicbe/design
Version:
React + Antd Drag Drop Visual design
39 lines (38 loc) • 2.24 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AutoComplete, Collapse, Form, Input } from "antd";
import { NextColorPicker } from "./Color";
var Background = function () {
var positions = [
{ label: "top", value: "top" },
{ label: "bottom", value: "bottom" },
{ label: "left", value: "left" },
{ label: "right", value: "right" },
{ label: "center", value: "center" },
];
var repeats = [
{ label: "repeat-x", value: "repeat-x" },
{ label: "repeat-y", value: "repeat-y" },
{ label: "repeat", value: "repeat" },
{ label: "space", value: "space" },
{ label: "round", value: "round" },
{ label: "no-repeat", value: "no-repeat" },
];
var sizes = [
{ label: "cover", value: "cover" },
{ label: "contain", value: "contain" },
{ label: "auto", value: "auto" },
];
return (_jsx(Form.Item, { children: _jsx(Collapse, { children: _jsxs(Collapse.Panel, __assign({ forceRender: true, header: "背景" }, { children: [_jsx(Form.Item, __assign({ name: ["style", "backgroundColor"], label: "背景颜色" }, { children: _jsx(NextColorPicker, {}) })), _jsx(Form.Item, __assign({ name: ["style", "backgroundImage"], label: "背景图片" }, { children: _jsx(Input, { prefix: "URL" }) })), _jsx(Form.Item, __assign({ name: ["style", "backgroundPosition"], label: "背景图片位置" }, { children: _jsx(AutoComplete, { options: positions }) })), _jsx(Form.Item, __assign({ name: ["style", "backgroundRepeat"], label: "背景图片重复方式" }, { children: _jsx(AutoComplete, { options: repeats }) })), _jsx(Form.Item, __assign({ name: ["style", "backgroundSize"], label: "背景图片大小" }, { children: _jsx(AutoComplete, { options: sizes }) }))] }), "background") }) }));
};
export default Background;