feat(grid): compelete grid component

.storybook/preview.js

@@ -24,6 +24,7 @@ const loaderFn = () => {
 		require("../src/stories/Welcome.stories.mdx"),
 		require("../src/stories/color.stories.mdx"),
 		require("../src/components/Layout/layout.stories.mdx"),
+		require("../src/components/Grid/grid.stories.mdx"),
 		require("../src/components/Divider/divider.stories.mdx"),
 		require("../src/components/Alert/alert.stories.mdx"),
 		require("../src/components/Avatar/avatar.stories.mdx"),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigbear-ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Neumorphic component library for React;基于React制作的拟物风格组件库",
   "keywords": [
     "component",

src/components/Grid/_style.scss

@@ -0,0 +1,54 @@
+.bigbear-grid-row{
+    display: flex;
+    align-items: center;
+}
+.bigbear-grid-col{
+    position: relative;
+}
+
+
+@each $key,$val in $percent {
+    @media screen and (max-width:$media-width-xs) {
+        .bigbear-col-xs-#{$key}{
+            width: #{$val}#{"%"};
+        }
+    };
+}
+//有权重问题，分开循环
+
+@each $key,$val in $percent {
+    @media screen and (min-width:$media-width-sm) {
+        .bigbear-col-sm-#{$key}{
+            width: #{$val}#{"%"};
+        }
+    };
+}
+@each $key,$val in $percent {
+    @media screen and (min-width:$media-width-md) {
+        .bigbear-col-md-#{$key}{
+            width: #{$val}#{"%"};
+        }
+    };
+
+}
+@each $key,$val in $percent {
+    @media screen and (min-width:$media-width-lg) {
+        .bigbear-col-lg-#{$key}{
+            width: #{$val}#{"%"};
+        }
+    };
+}
+@each $key,$val in $percent {
+    @media screen and (min-width:$media-width-xl) {
+        .bigbear-col-xl-#{$key}{
+            width: #{$val}#{"%"};
+        }
+    };
+}
+@each $key,$val in $percent {
+    @media screen and (min-width:$media-width-xxl) {
+        .bigbear-col-xxl-#{$key}{
+            width: #{$val}#{"%"};
+        }
+    };
+}

src/components/Grid/grid.stories.mdx

@@ -0,0 +1,75 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import Row,{Col} from './grid'
+
+
+<Meta title='LAYOUT |Grid 栅格' component={Row} />
+
+<br/>
+
+# Grid 栅格
+<br/>
+
+## 基本使用
+
+
+grid 是由Row与Col组成的12栅格布局。
+
+xs:<576px
+sm:≥576px
+md:≥768px
+lg:≥992px
+xl:≥1200px
+xxl:≥1600px
+
+Row是一行，col是行内元素。简单情况就小于576和大于576就可以了。一行相同种类数字之和等于12。
+
+<Preview>
+    <Story name='demo'>
+        <div>
+            <Row>
+                <Row.Col xs={12} sm={12} className='bigbear-background-blue' style={{height:'50px'}}>12</Row.Col>
+            </Row>
+            <Row>
+                <Row.Col xs={6} sm={6} className='bigbear-background-gblue' style={{height:'50px'}}>6</Row.Col>
+                <Row.Col xs={6} sm={6} className='bigbear-background-cyan' style={{height:'50px'}}>6</Row.Col>
+            </Row>
+              <Row>
+                <Row.Col xs={7} sm={7} className='bigbear-background-orange' style={{height:'50px'}}>7</Row.Col>
+                <Row.Col xs={5} sm={5} className='bigbear-background-yellow' style={{height:'50px'}}>5</Row.Col>
+            </Row>
+            <Row>
+                <Row.Col xs={8} sm={8} className='bigbear-background-lime' style={{height:'50px'}}>8</Row.Col>
+                <Row.Col xs={4} sm={4} className='bigbear-background-green' style={{height:'50px'}}>4</Row.Col>
+            </Row>
+             <Row>
+                 <Row.Col xs={3} sm={3} className='bigbear-background-pink' style={{height:'50px'}}>3</Row.Col>
+                <Row.Col xs={9} sm={9} className='bigbear-background-purple' style={{height:'50px'}}>9</Row.Col>
+            </Row>
+        </div>
+    </Story>
+</Preview>
+
+
+
+屏幕大于992时 6,4,3分配，屏幕576-992之间2，2，8分配，小于576时1，1，1分配：
+
+<Preview>
+    <Story name='grid'>
+        <Row>
+            <Row.Col sm={2} lg={6} className='bigbear-background-blue' style={{height:'50px'}}>lg4</Row.Col>
+            <Row.Col sm={2} lg={4} className='bigbear-background-gblue' style={{height:'50px'}}>lg4</Row.Col>
+            <Row.Col sm={8} lg={2} className='bigbear-background-blue' style={{height:'50px'}}>lg4</Row.Col>
+        </Row>
+    </Story>
+</Preview>
+
+
+## 属性详情
+
+### Row属性
+
+<Props of={Row} />
+
+### Col属性
+
+<Props of={Col} />

src/components/Grid/grid.tsx

@@ -0,0 +1,61 @@
+import React, { CSSProperties, PropsWithChildren } from "react";
+import classnames from "classnames";
+
+interface ColProps {
+	/** 额外类名*/
+	className?: string;
+	/** 样式*/
+	style?: CSSProperties;
+	/** xs:<576px*/
+	xs?: number;
+	/**  sm:≥576px */
+	sm?: number;
+	/** md :≥768px */
+	md?: number;
+	/**lg:≥992px  */
+	lg?: number;
+	/**xl:≥1200px*/
+	xl?: number;
+	/**xxl:≥1600px*/
+	xxl?: number;
+}
+
+function Col(props: PropsWithChildren<ColProps>) {
+	const { className, style, xxl, xs, sm, md, lg, xl } = props;
+	const classes = classnames("bigbear-grid-col", className, {
+		[`bigbear-col-xs-${xs}`]: typeof xs === "number",
+		[`bigbear-col-sm-${sm}`]: typeof sm === "number",
+		[`bigbear-col-md-${md}`]: typeof md === "number",
+		[`bigbear-col-lg-${lg}`]: typeof lg === "number",
+		[`bigbear-col-xl-${xl}`]: typeof xl === "number",
+		[`bigbear-col-xxl-${xxl}`]: typeof xxl === "number"
+	});
+	return (
+		<div className={classes} style={style}>
+			{props.children}
+		</div>
+	);
+}
+
+interface RowProps {
+	/** 额外类名*/
+	className?: string;
+	/** 样式*/
+	style?: CSSProperties;
+}
+
+function Row(props: PropsWithChildren<RowProps>) {
+	const { className, style } = props;
+	const classes = classnames("bigbear-grid-row", className);
+	return (
+		<div className={classes} style={style}>
+			{props.children}
+		</div>
+	);
+}
+
+Row.Col = Col;
+
+export default Row;
+
+export { Col };

src/components/Grid/index.tsx

@@ -0,0 +1,6 @@
+import Row from "./grid";
+
+export default Row;
+
+const Col = Row.Col;
+export { Col };

src/index.tsx

@@ -25,6 +25,8 @@ export { default as Progress } from "./components/Progress";
 export { default as Popconfirm } from "./components/Popconfirm";
 export { default as Layout } from "./components/Layout";
 export { default as Divider } from "./components/Divider";
+export { default as Row } from "./components/Grid";
+export { Col } from "./components/Grid";
 
 export { default as useClickOutside } from "./hooks/useClickOutside";
 export { default as useDebounce } from "./hooks/useDebounce";

src/styles/_variables.scss

@@ -370,4 +370,30 @@ $aside-flex-basis: 200px;
 //divider
 $divider-margin:24px 0;
 $divider-line-height:1.5715;
-$divider-height:5px;
+$divider-height:5px;
+
+
+//grid
+$max-grid:12;
+$percent: (
+  12:$max-grid/$max-grid*100,
+  11:11/$max-grid*100,
+  10:10/$max-grid*100,
+  9:9/$max-grid*100,
+  8:8/$max-grid*100,
+  7:7/$max-grid*100,
+  6:6/$max-grid*100,
+  5:5/$max-grid*100,
+  4:4/$max-grid*100,
+  3:3/$max-grid*100,
+  2:2/$max-grid*100,
+  1:1/$max-grid*100,
+  0:0,
+);
+
+$media-width-xs:576px;
+$media-width-sm:576px;
+$media-width-md:768px;
+$media-width-lg:992px;
+$media-width-xl:1200px;
+$media-width-xxl:1600px;

src/styles/index.scss

@@ -77,4 +77,7 @@
 @import "../components/Layout/style";
 
 //divider
-@import "../components/Divider/style";
+@import "../components/Divider/style";
+
+//grid
+@import "../components/Grid/style";