@yandex/ui
Version:
Yandex UI components
61 lines (60 loc) • 3.6 kB
JavaScript
import React from 'react';
import { ButtonGroup } from '@yandex-lego/components/ButtonGroup/desktop/bundle';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
export var Divider = function () {
var dividerHorizontal = (React.createElement("span", { style: { borderLeft: '1px solid #CCCCCC', boxSizing: 'border-box', height: '20px' } }));
var dividerVertical = React.createElement("span", { style: { borderBottom: '1px solid #CCCCCC', boxSizing: 'border-box' } });
var dividerActionHorizontal = (React.createElement("div", { style: {
display: 'inline-flex',
alignItems: 'center',
backgroundColor: 'var(--color-project)',
height: 'var(--button-size-m-height)',
} },
React.createElement("span", { style: { borderLeft: '1px solid white', boxSizing: 'border-box', height: '20px' } })));
var dividerActionVertical = (React.createElement("div", { style: { display: 'inline-flex', justifyContent: 'center', backgroundColor: 'var(--color-project)' } },
React.createElement("span", { style: { borderBottom: '1px solid white', boxSizing: 'border-box', width: '50px' } })));
return (React.createElement(React.Fragment, null,
React.createElement(ButtonGroup, { divider: dividerHorizontal },
React.createElement(Button, null, " Button 1 "),
React.createElement(Button, null, " Button 2 "),
React.createElement(Button, null, " Button 3 ")),
React.createElement("br", null),
" ",
React.createElement("br", null),
React.createElement(ButtonGroup, { divider: dividerVertical, vertical: true },
React.createElement(Button, null, " Button 1 "),
React.createElement(Button, null, " Button 2 "),
React.createElement(Button, null, " Button 3 ")),
React.createElement("br", null),
" ",
React.createElement("br", null),
" ",
React.createElement("br", null),
" ",
React.createElement("br", null),
React.createElement(ButtonGroup, { divider: dividerHorizontal, gap: "l" },
React.createElement(Button, null, " Button 1 "),
React.createElement(Button, null, " Button 2 "),
React.createElement(Button, null, " Button 3 ")),
React.createElement("br", null),
" ",
React.createElement("br", null),
React.createElement(ButtonGroup, { divider: dividerVertical, vertical: true, gap: "l" },
React.createElement(Button, null, " Button 1 "),
React.createElement(Button, null, " Button 2 "),
React.createElement(Button, null, " Button 3 ")),
React.createElement("br", null),
" ",
React.createElement("br", null),
React.createElement(ButtonGroup, { divider: dividerActionHorizontal, pin: "round" },
React.createElement(Button, { view: "action", size: "m" }, "Button 1"),
React.createElement(Button, { view: "action", size: "m" }, "Button 2"),
React.createElement(Button, { view: "action", size: "m" }, "Button 3")),
React.createElement("br", null),
" ",
React.createElement("br", null),
React.createElement(ButtonGroup, { divider: dividerActionVertical, vertical: true, pin: "round" },
React.createElement(Button, { view: "action", size: "m" }, "Button 1"),
React.createElement(Button, { view: "action", size: "m" }, "Button 2"),
React.createElement(Button, { view: "action", size: "m" }, "Button 3"))));
};