React Suite Prop

React Изучение

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;

Выход:

мы создаем пользовательский интерфейс, который показывает

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

Adblock
detector