開始使用

在 你的專案中 開始使用

或是在 CodeSandbox 試試看 Acrool React Grid

你需要什麼環境

• Node.js version 14 or above:
• React.js version 18 or above:
• Styled-components version 5.3.x

安裝

yarn add acrool-react-grid

在你的專案中設定. (讓你使用的 styled-component 版本與 bear-react-gird 中使用的 styled-component 版本相匹配)

package.json

"resolutions": {
   "styled-components": "5.3.11"
}

您可以在命令提示符、Powershell、終端或代碼編輯器的任何其他集成終端中鍵入此命令

在你的專案中使用

將所需的樣式文件添加到項目入口點

/src/App.tsx

import '@acrool/react-grid/dist/index.css';

你的網格設定

import {GridThemeProvider, IGridSetting} from '@acrool/react-grid';
import '@acrool/react-grid/dist/index.css';


const gridTheme: IGridSetting = {
    spacer: '1rem',
    gridColumns: 12,
    gridBreakpoints: {
        xs: 0,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200,
        xxl: 1540,
    },
    containerMaxWidths: {
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1140,
        xxl: 1141,
    },
}

// 請勿在下層再次使用 GridThemeProvider 造成二次產生 :root 參數覆蓋原本參數
<GridThemeProvider gridTheme={gridTheme}>
    <App/>
</GridThemeProvider>

接著使用看看

import styled from 'styled-components';
import {Container, Row, Col, media} from '@acrool/react-grid';

const MyPage = () => {
    return (
        <Container>
            <Row>
                <Col col={12} md style={{background: '#760e0e', textAlign: 'center'}}>col</Col>
                <Col col={12} md style={{background: '#6c760e', textAlign: 'center'}}>col</Col>
                <Col col={12} md style={{background: '#0e7659', textAlign: 'center'}}>col</Col>
                <Col col={12} md style={{background: '#760e6e', textAlign: 'center'}}>col</Col>
            </Row>
        </Container>
    );
}

然後看到這個就代表你成功了

col

col

col

col