React.js Blueprint Индикатор выполнения Компонент Реквизиты

Опубликовано: 9 Октября, 2022

React.js Blueprint — это набор инструментов для пользовательского интерфейса. Он очень оптимизирован и популярен для создания сложных интерфейсов с высокой плотностью данных для настольных приложений. Компонент индикатора выполнения указывает текущий этап любой операции по отношению к завершению операции.

Реквизит:

  • animate: это логическое значение. Он указывает, должен ли фон анимироваться. Это правда по умолчанию.
  • className: это разделенный пробелами список имен классов для передачи дочернему элементу.
  • намерение: определяет цвет визуального намерения, применяемый к элементу.
  • полосы: это логическое значение. Он указывает, должен ли фон быть полосатым или нет. Это правда по умолчанию.
  • значение: принимает значение в диапазоне (0-1). Он показывает индикатор прогресса.

Синтаксис:

<Progress.Bar />

Предварительное условие: Введение и установка ReactJS

Создание приложения 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 @blueprintjs/core

Структура проекта: Это будет выглядеть так:

Пример 1: мы импортируем компонент Progress из «@blueprintjs/core». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css».

Мы добавляем два компонента <Progress.Bar/>, первый из которых мы передаем значение 0,5, анимация устанавливает значение false, значение намерения как «успех». Для следующего мы сохранили простоту и передали значение 1.

App.js

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { ProgressBar } from "@blueprintjs/core";
  
function App() {
    return (
        <div style={{ 
            display: "block"
            width: 400, 
            padding: 10 
        }}>
            <h4>
                ReactJS BluePrint Progress 
                bar Component Props
            </h4>
              
            <ProgressBar value={0.5} animate={false
                intent="success" /> <br></br>
            <ProgressBar value={1} />
        </div>
    );
}
  
export default App;

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

npm start

Выход:

Пример 2: мы добавляем три компонента <Progress.Bar/>, первый из которых мы передаем значение 0,5 полосы , установленное в false, значение намерения как «основное». Для следующего мы передаем className как «bp4-intent-danger» и передаем значение 1. А для следующего мы передаем className как «bp4-intent-warning» и передаем значение 0,2.

App.js

Javascript




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { ProgressBar } from "@blueprintjs/core";
  
function App() {
    return (
        <div style={{ 
            display: "block"
            width: 400, 
            padding: 10 
        }}>
            <h4>
                ReactJS BluePrint Progress 
                bar Component Props
            </h4>
              
            <ProgressBar value={0.5} stripes={false
                intent="primary" /> <br></br>
            <ProgressBar value={1} 
                className="bp4-intent-danger" />
            <br></br>
            <ProgressBar value={0.2} 
                className="bp4-intent-warning" />
        </div>
    );
}
  
export default App;

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

npm start

Выход:

Ссылка: https://blueprintjs.com/docs/#core/components/progress-bar.props