Смещение сетки React Suite

React Suite — это интерфейсная библиотека, предназначенная для промежуточной платформы и серверных продуктов. Компонент React Suite Grid предоставляет макет сетки, который обеспечивает 24 сетки. Это помогает в отзывчивости. Для смещения мы передаем следующие реквизиты в компонент Col:

xxlOffset: в качестве значения принимает число. Он перемещает столбцы вправо для очень больших устройств.
xlOffset: в качестве значения принимает число. Он перемещает столбцы вправо для очень больших устройств.
lgOffset: в качестве значения принимает число. Он перемещает столбцы вправо для больших устройств.
mdOffset: в качестве значения принимает число. Он перемещает столбцы вправо для средних устройств.
smOffset: в качестве значения принимает число. Он перемещает столбцы вправо для небольших устройств, планшетов.
xsOffset: в качестве значения принимает число. Он перемещает столбцы вправо для очень маленьких устройств. Телефоны.

Синтаксис:

<Grid>
    <Row>
        <Col xsOffset={} smOffset={} 
             mdOffset={} lgOffset={}>
        </Col>
    </Row>
</Grid>

Условие:

Введение и установка
Компонент строки React Suite

Создание приложения React и установка модуля

Шаг 1: Создайте папку проекта реакции, для этого откройте терминал и напишите имя папки команды npm create-react-app, если вы уже установили приложение create-react-app глобально. Если вы еще не установили create-react-app глобально с помощью команды npm -g create-react-app или можете установить локально с помощью npm i create-react-app.

npm create-react-app project

Шаг 2: После создания папки проекта (то есть проекта) перейдите к ней с помощью следующей команды.

cd project

Шаг 3: Теперь установите зависимость с помощью следующей команды:

npm install rsuite

Структура проекта

Пример 1. Мы импортируем компоненты Grid, Row и Col из «rsuite», а чтобы применить стили компонентов по умолчанию, мы импортируем «rsuite/dist/rsuite.min.css».

Мы добавляем Grid Components, внутри него мы добавляем Row с Col Components и передаем разные значения xsOffset, smOffset и mdOffset.

import { Grid, Row, Col } from "rsuite";

import "rsuite/dist/rsuite.min.css";

function App() {

    const style = {

        border: "2px solid green",

        textAlign: "center",

    };

    return (

        <div className="App">

            <h4>React Suite Grid Responsive</h4>

            <Grid>

                <Row>

                    <Col mdOffset={20} smOffset={12}

                    style={style}>

                        1

                    </Col>

                    <Col mdOffset={20} smOffset={6}

                    style={style}>

                        2

                    </Col>

                    <Col mdOffset={20} smOffset={3}

                    style={style}>

                        3

                    </Col>

                </Row>

            </Grid>

        </div>

    );

}

export default App;

Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.

npm start

Выход:

Пример 2. Мы импортируем компоненты Grid, Row и Col из «rsuite», а чтобы применить стили компонентов по умолчанию, мы импортируем «rsuite/dist/rsuite.min.css».

Мы добавляем два компонента сетки. В нем мы добавляем Row с компонентами Col и передаем разные значения xsOffset, smOffset, mdOffset и lgOffset.

import { Grid, Row, Col } from "rsuite";

import "rsuite/dist/rsuite.min.css";

function App() {

    return (

        <div className="App">

            <h4>React Suite Grid Offset</h4>

            <Grid>

                <Row>

                    <h6 style={{ textAlign: "center" }}>

                        Row -1</h6>

                    <Col

                        xsOffset={24}

                        smOffset={12}

                        mdOffset={3}

                        lgOffset={12}

                        style={{ backgroundColor: "#A0F962",

                                 width: 100 }}

                    >

                        1

                    </Col>

                    <Col

                        xsOffset={24}

                        smOffset={12}

                        mdOffset={3}

                        lgOffset={4}

                        style={{ backgroundColor: "#D97BFC",

                                 width: 100 }}

                    >

                        2

                    </Col>

                    <Col

                        xsOffset={24}

                        smOffset={12}

                        mdOffset={3}

                        lgOffset={4}

                        style={{ backgroundColor: "#96FEF2",

                                 width: 100 }}

                    >

                        3

                    </Col>

                    <Col

                        xsOffset={24}

                        smOffset={12}

                        mdOffset={3}

                        lgOffset={4}

                        style={{ backgroundColor: "#FC7B96",

                                 width: 100 }}

                    >

                        4

                    </Col>

                </Row>

                <Row>

                    <h6 style={{ textAlign: "center" }}>

                        Row -2</h6>

                    <Col

                        xsOffset={24}

                        smOffset={6}

                        mdOffset={6}

                        lgOffset={12}

                        style={{ backgroundColor: "#FEAF96",

                                 width: 100 }}

                    >

                        1

                    </Col>

                    <Col

                        xsOffset={24}

                        smOffset={6}

                        mdOffset={6}

                        lgOffset={12}

                        style={{ backgroundColor: "#CAFF83",

                                 width: 100 }}

                    >

                        2

                    </Col>

                    <Col

                        xsOffset={24}

                        smOffset={6}

                        mdOffset={6}

                        lgOffset={12}

                        style={{ backgroundColor: "#FEED96 ",

                                 width: 100 }}

                    >

                        3

                    </Col>

                    <Col

                        xsOffset={24}

                        smOffset={6}

                        mdOffset={6}

                        lgOffset={12}

                        style={{ backgroundColor: "#D6D8FF",

                                 width: 100 }}

                    >

                        4

                    </Col>

                </Row>

            </Grid>

        </div>

    );

}

export default App;