@gravity-ui/uikit
Version:
Gravity UI base styling and components
42 lines (41 loc) • 1.46 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Col = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const cn_1 = require("../../utils/cn.js");
const useLayoutContext_1 = require("../hooks/useLayoutContext.js");
const utils_1 = require("../utils/index.js");
require("./Col.css");
const b = (0, cn_1.block)('col');
/**
* How many columns of you 12-th column layout will take content.
* Must be used as a child of `Row` component.
*
* By default component takes all available space.
* If you wont to specify static size to all media queries use `s` prop. In mobile first layout grid is first passible value.
*
* ```tsx
* <Col s="12">some content</Col>
* ```
* ---
*
* Note: you can use this empty component for spacing:
*
* ```tsx
* <Row>
* <Col s="2" l="1">col 2</Col>
* <Col />
* <Col s="2" l="1">col 2</Col>
* </Row>
* ```
* ---
* Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#col
*/
const Col = ({ children, style, className, qa, ...media }) => {
const { getClosestMediaProps } = (0, useLayoutContext_1.useLayoutContext)();
const sizeModValue = getClosestMediaProps(media);
return ((0, jsx_runtime_1.jsx)("div", { style: style, className: b({ size: sizeModValue ? (0, utils_1.makeCssMod)(sizeModValue) : undefined }, className), "data-qa": qa, children: children }));
};
exports.Col = Col;
//# sourceMappingURL=Col.js.map