@yandex/ui
Version:
Yandex UI components
66 lines (65 loc) • 4.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Divider = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var bundle_1 = require("@yandex-lego/components/ButtonGroup/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Button/desktop/bundle");
var Divider = function () {
var dividerHorizontal = (react_1.default.createElement("span", { style: { borderLeft: '1px solid #CCCCCC', boxSizing: 'border-box', height: '20px' } }));
var dividerVertical = react_1.default.createElement("span", { style: { borderBottom: '1px solid #CCCCCC', boxSizing: 'border-box' } });
var dividerActionHorizontal = (react_1.default.createElement("div", { style: {
display: 'inline-flex',
alignItems: 'center',
backgroundColor: 'var(--color-project)',
height: 'var(--button-size-m-height)',
} },
react_1.default.createElement("span", { style: { borderLeft: '1px solid white', boxSizing: 'border-box', height: '20px' } })));
var dividerActionVertical = (react_1.default.createElement("div", { style: { display: 'inline-flex', justifyContent: 'center', backgroundColor: 'var(--color-project)' } },
react_1.default.createElement("span", { style: { borderBottom: '1px solid white', boxSizing: 'border-box', width: '50px' } })));
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(bundle_1.ButtonGroup, { divider: dividerHorizontal },
react_1.default.createElement(bundle_2.Button, null, " Button 1 "),
react_1.default.createElement(bundle_2.Button, null, " Button 2 "),
react_1.default.createElement(bundle_2.Button, null, " Button 3 ")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
react_1.default.createElement(bundle_1.ButtonGroup, { divider: dividerVertical, vertical: true },
react_1.default.createElement(bundle_2.Button, null, " Button 1 "),
react_1.default.createElement(bundle_2.Button, null, " Button 2 "),
react_1.default.createElement(bundle_2.Button, null, " Button 3 ")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
react_1.default.createElement(bundle_1.ButtonGroup, { divider: dividerHorizontal, gap: "l" },
react_1.default.createElement(bundle_2.Button, null, " Button 1 "),
react_1.default.createElement(bundle_2.Button, null, " Button 2 "),
react_1.default.createElement(bundle_2.Button, null, " Button 3 ")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
react_1.default.createElement(bundle_1.ButtonGroup, { divider: dividerVertical, vertical: true, gap: "l" },
react_1.default.createElement(bundle_2.Button, null, " Button 1 "),
react_1.default.createElement(bundle_2.Button, null, " Button 2 "),
react_1.default.createElement(bundle_2.Button, null, " Button 3 ")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
react_1.default.createElement(bundle_1.ButtonGroup, { divider: dividerActionHorizontal, pin: "round" },
react_1.default.createElement(bundle_2.Button, { view: "action", size: "m" }, "Button 1"),
react_1.default.createElement(bundle_2.Button, { view: "action", size: "m" }, "Button 2"),
react_1.default.createElement(bundle_2.Button, { view: "action", size: "m" }, "Button 3")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null),
react_1.default.createElement(bundle_1.ButtonGroup, { divider: dividerActionVertical, vertical: true, pin: "round" },
react_1.default.createElement(bundle_2.Button, { view: "action", size: "m" }, "Button 1"),
react_1.default.createElement(bundle_2.Button, { view: "action", size: "m" }, "Button 2"),
react_1.default.createElement(bundle_2.Button, { view: "action", size: "m" }, "Button 3"))));
};
exports.Divider = Divider;