@magicbe/design
Version:
React + Antd Drag Drop Visual design
35 lines (34 loc) • 4.15 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 createInstance from "@emotion/css/create-instance";
import { AutoComplete, Collapse, Form, Input } from "antd";
import { NextColorPicker } from "./Color";
var _a = createInstance({ key: "border" }), css = _a.css, cx = _a.cx;
var Border = function () {
var border_card_style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: 15px;\n\n .ant-card-body {\n padding: 12px;\n }\n "], ["\n margin-bottom: 15px;\n\n .ant-card-body {\n padding: 12px;\n }\n "])));
var styles = [
{ label: "dashed", value: "dashed" },
{ label: "dotted", value: "dotted" },
{ label: "solid", value: "solid" },
{ label: "hidden", value: "hidden" },
{ label: "double", value: "double" },
{ label: "none", value: "none" },
];
return (_jsx(Form.Item, { children: _jsx(Collapse, { children: _jsxs(Collapse.Panel, __assign({ forceRender: true, header: "边框" }, { children: [_jsx(Form.Item, __assign({ name: ["style", "borderWidth"], label: "宽度" }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ name: ["style", "borderStyle"], label: "样式" }, { children: _jsx(AutoComplete, { options: styles }) })), _jsx(Form.Item, __assign({ name: ["style", "borderColor"], label: "颜色" }, { children: _jsx(NextColorPicker, {}) })), _jsxs(Collapse, __assign({ size: "small", expandIconPosition: "right" }, { children: [_jsxs(Collapse.Panel, __assign({ forceRender: true, header: "上边框" }, { children: [_jsx(Form.Item, __assign({ name: ["style", "borderTopWidth"], label: "宽度" }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ name: ["style", "borderTopStyle"], label: "样式" }, { children: _jsx(AutoComplete, { options: styles }) })), _jsx(Form.Item, __assign({ name: ["style", "borderTopColor"], label: "颜色" }, { children: _jsx(NextColorPicker, {}) }))] }), "top"), _jsxs(Collapse.Panel, __assign({ forceRender: true, header: "下边框" }, { children: [_jsx(Form.Item, __assign({ name: ["style", "borderBottomWidth"], label: "宽度" }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ name: ["style", "borderBottomStyle"], label: "样式" }, { children: _jsx(AutoComplete, { options: styles }) })), _jsx(Form.Item, __assign({ name: ["style", "borderBottomColor"], label: "颜色" }, { children: _jsx(NextColorPicker, {}) }))] }), "bottom"), _jsxs(Collapse.Panel, __assign({ forceRender: true, header: "左边框" }, { children: [_jsx(Form.Item, __assign({ name: ["style", "borderLeftWidth"], label: "宽度" }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ name: ["style", "borderLeftStyle"], label: "样式" }, { children: _jsx(AutoComplete, { options: styles }) })), _jsx(Form.Item, __assign({ name: ["style", "borderLeftColor"], label: "颜色" }, { children: _jsx(NextColorPicker, {}) }))] }), "left"), _jsxs(Collapse.Panel, __assign({ forceRender: true, header: "右边框" }, { children: [_jsx(Form.Item, __assign({ name: ["style", "borderRightWidth"], label: "宽度" }, { children: _jsx(Input, {}) })), _jsx(Form.Item, __assign({ name: ["style", "borderRightStyle"], label: "样式" }, { children: _jsx(AutoComplete, { options: styles }) })), _jsx(Form.Item, __assign({ name: ["style", "borderRightColor"], label: "颜色" }, { children: _jsx(NextColorPicker, {}) }))] }), "right")] }))] }), "border") }) }));
};
export default Border;
var templateObject_1;