Разделитель компонентов меню React.js Blueprint

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

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

Реквизит:

детей: этот компонент не поддерживает детей.
className: это разделенный пробелами список имен классов для передачи дочернему элементу.
title: заголовок MenuDivider.

Синтаксис:

 <MenuDivider />

Условие:

Введение и установка ReactJS
Компонент меню ReactJS Blueprint

Создание приложения 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: мы импортируем Menu, MenuItem, MenuDivider и классы из «@blueprintjs/core». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css».

Мы добавляем компоненты <Menu>, внутри него мы добавляем компоненты MenuItem и MenuDivider. Ко всем компонентам MenuDivider мы добавляем разные имена классов.

App.js

Javascript

import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu, Classes, MenuItem, MenuDivider } 
    from "@blueprintjs/core";
  
function App() {
  return (
    <div className="App">
      <h4> ReactJS Menu Component Divider</h4>
      <Menu>
        <MenuItem text="Algorithms" />
  
        <MenuDivider className={Classes.ELEVATION_0} />
        <MenuItem text="Data Structures" />
  
        <MenuDivider className={Classes.BREADCRUMBS} />
        <MenuItem text="GATE" />
        <MenuDivider className={Classes.ELEVATION_4} />
        <MenuItem text="Web Technologies" />
      </Menu>
    </div>
  );
}
  
export default App;

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

npm start

Выход:

Пример 2: Ко всем компонентам MenuDivider мы добавляем разные className и разные значения для title.

App.js

Javascript

import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu, Classes, MenuItem, MenuDivider } 
    from "@blueprintjs/core";
  
function App() {
  return (
    <div className="App">
      <h4>ReactJS Menu Component divider</h4>
      <Menu>
        <MenuDivider title="USER" 
            className={Classes.MENU_HEADER} />
        <MenuItem text="Login" />
        <MenuItem text="Register" />
        <MenuDivider title="Courses" 
            className={Classes.ELEVATION_2} />
        <MenuItem text="For Students" />
        <MenuItem text="All Courses" />
      </Menu>
    </div>
  );
}
  
export default App;

npm start

Выход:

Ссылка: https://blueprintjs.com/docs/#core/components/menu.menu-divider

Picked

Разделитель компонентов меню React.js Blueprint

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ