React.js Blueprint Индикатор выполнения Компонент Реквизиты
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