React.js蓝图可折叠列表组件Props

React.js蓝图 是一个前端UI工具包。它非常优化并且在构建数据密集型桌面应用程序的复杂界面方面非常受欢迎。

React.js蓝图可折叠列表组件用于显示一定数量的项目，并将其余项目包装在下拉菜单中。它提供了更好的用户界面。

React.js蓝图Props:

className: 将类名以空格分隔的列表传递给子元素。
children: 列表的内容。
collapseFrom: 表示项目折叠的方向。
dropdownProps: 表示要传递给下拉菜单的props。
dropdownTarget: 作为下拉菜单的元素。
visibleItemClassName: 将类名以空格分隔的列表传递给子元素。
visibleItemCount: 表示可见项目的数量。
visibleItemRenderer: 用于渲染项目的回调函数。

语法:

<CollapsibleList > ... </CollapsibleList >

先决条件:

介绍和安装 ReactJS
ReactJS Blueprint MenuItem

创建React应用程序和模块安装:

步骤1: 创建react项目文件夹，为此打开终端，输入命令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： 在创建项目文件夹（即project）之后，通过使用以下命令切换到它。

cd project

步骤3： 现在通过以下命令安装依赖项:

npm install @blueprintjs/core

项目结构：

它将看起来像这样。

React.js蓝图可折叠列表组件Props

示例1： 我们正在从“@blueprintjs/core”导入CollapsibleList、MenuItem和Classes。为了应用组件的默认样式，我们导入“@blueprintjs/core/lib/css/blueprint.css”。

我们添加了CollapsibleList组件，并传入了六个MenuItem组件，为text属性传入不同的值。对于CollapsibleList，我们传入了className、dropdownTarget、visibleItemRenderer和visibleItemcount属性的值。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { CollapsibleList, MenuItem, Classes } 
    from "@blueprintjs/core"; 
  
function App() { 
  
    return ( 
        <div style={{ 
            padding: 30 
        }}> 
            <h3> 
                ReactJS Blueprint CollapsibleList 
                Component Props 
            </h3> 
            <CollapsibleList 
                className={Classes.BREADCRUMBS} 
                dropdownTarget={<span 
                    className={Classes.BREADCRUMBS_COLLAPSED} />} 
                visibleItemRenderer={() => { }} 
                visibleItemCount={2} 
            > 
                <MenuItem text="Login" /> 
                <MenuItem text="User" /> 
                <MenuItem text="Profile" /> 
                <MenuItem text="Jobs" /> 
                <MenuItem text="Articles" /> 
                <MenuItem text="Contest" /> 
            </CollapsibleList> 
        </div > 
    ); 
} 
  
export default App;

运行应用程序的步骤：

从项目的根目录使用以下命令运行应用程序。

npm start

输出：

React.js蓝图可折叠列表组件Props

示例2： 我们从“@blueprintjs/core”导入CollapsibleList、MenuItem和Classes。为了应用组件的默认样式，我们导入“@blueprintjs/core/lib/css/blueprint.css”。

我们添加了CollapsibleList组件，并添加了六个MenuItem组件，为text属性传递不同的值。对于CollapsibleList，我们为className、dropdownTarget、visibleItemRenderer、visibleItemClassName和collapseForm属性传递了值。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { CollapsibleList, MenuItem, Classes,  
        Boundary } from "@blueprintjs/core"; 
  
function App() { 
  
    return ( 
        <div style={{ 
            padding: 30 
        }}> 
            <h3> 
                ReactJS Blueprint CollapsibleList  
                Component Props 
            </h3> 
  
            <CollapsibleList 
                className={Classes.BREADCRUMBS} 
                dropdownTarget={<span className= 
                    {Classes.BREADCRUMBS_COLLAPSED} />} 
                visibleItemRenderer={() => { }} 
                collapseFrom={Boundary.END} 
                visibleItemClassName={Classes.ELEVATION_0} 
            > 
                <MenuItem text="Login" /> 
                <MenuItem text="User" /> 
                <MenuItem text="Profile" /> 
                <MenuItem text="Jobs" /> 
                <MenuItem text="Articles" /> 
                <MenuItem text="Contest" /> 
            </CollapsibleList> 
        </div > 
    ); 
} 
  
export default App;

运行应用程序的步骤: 从项目的根目录中使用下面的命令运行应用程序。