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

Смещение сетки 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

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

Мы импортируем компоненты Grid, Row и Col из «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

Выход:

Читайте также:  Как использовать операторы $in и $nin в MongoDB?

пустите приложение с помощью следующей команды из ко

Пример 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;

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

npm start

Выход:

Читайте также:  Функциональные и нефункциональные требования: полное руководство

портируем компоненты Grid, Row и Col из «rsuite»

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector