React Suite Prop

React Suite — это популярная интерфейсная библиотека с набором компонентов React, разработанных для промежуточной платформы и серверных продуктов. Разделитель позволяет пользователю отделять компоненты пользовательского интерфейса друг от друга.

<Divider> Props:

classPrefix: используется для обозначения префикса класса CSS компонента.
Children: Все, что вы пишете между тегами разделителя, устанавливается как текст для разделителя.
vertical: используется для указания, является ли разделитель вертикальным или нет.

Подход: давайте создадим проект React и установим модуль React Suite. Затем мы создадим пользовательский интерфейс, который создаст React Suite Divider with Props.

Создание проекта React

Шаг 1: Чтобы создать приложение для реагирования, вам необходимо установить модули реагирования с помощью команды npx. «npx» используется вместо «npm», потому что вам понадобится эта команда в жизненном цикле вашего приложения только один раз.

npx create-react-app project_name

Шаг 2: После создания проекта реакции перейдите в папку для выполнения различных операций.

cd project_name

Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:

npm install rsuite

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

Пример 1. Мы создаем пользовательский интерфейс, который показывает пользователям разные курсы GFG, разделенные префиксом класса вертикальной опоры и строки-разделителя.

import React from "react";

import { Divider } from 'rsuite';

import '../node_modules/rsuite/dist/rsuite.min.css';

class App extends React.Component {

    render() {

        return (

            <div style={{ margin: 100 }}>

                <p>Choose your favourite GFG course:</p><br />

                <b style={{ color: "green" }}>

                    DSA Self Paced </b>

                <Divider vertical />

                <b style={{ color: "green" }}>

                    Amazon SDE Preparation Test Series</b>

                <Divider vertical />

                <b style={{ color: "green" }}>

                    Complete Interview Preparation</b>

            </div>

        );

    }

}

export default App;

Выход:

npm start

Пример 2: мы создаем пользовательский интерфейс, который показывает различные разделы, разделенные разделителем с текстом, используя дочернюю опору и префикс класса строки разделителя.

Javascript

import React from "react";

import { Divider } from 'rsuite';

import '../node_modules/rsuite/dist/rsuite.min.css';

const myComponentStyle = {

    height: 50,

    paddingTop: 15,

    backgroundColor: "green",

    color: "white",

    fontWeight: "bold",

    textAlign: "center"

}

class App extends React.Component {

    render() {

        return (

            <div style={{ margin: 100 }}>

                <p style={myComponentStyle}>Section</p>

                <Divider>Divider 1</Divider>

                <p style={myComponentStyle}>Section</p>

                <Divider>Divider 2</Divider>

                <p style={myComponentStyle}>Section</p>

                <Divider>Divider 3</Divider>

                <p style={myComponentStyle}>Section</p>

            </div>

        );

    }

}

export default App;

Выход: