当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

react-pro-sidebar

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者长孙德惠

操作系统跨平台

开源组织无

适用人群未知

软件概览

React Pro Sidebar

Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus

Demo

Live preview

Screenshot

Installation

yarn

yarn add react-pro-sidebar

npm

npm install react-pro-sidebar

Usage

import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';

<ProSidebar>
  <Menu iconShape="square">
    <MenuItem icon={<FaGem />}>Dashboard</MenuItem>
    <SubMenu title="Components" icon={<FaHeart />}>
      <MenuItem>Component 1</MenuItem>
      <MenuItem>Component 2</MenuItem>
    </SubMenu>
  </Menu>
</ProSidebar>;

If you are using sass then you can import the styles.scss directly into your scss file

@import '~react-pro-sidebar/dist/scss/styles.scss';

Sidebar Layout

You can take advantage of the sidebar layout components to organize the content of your sidebar

import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar';

<ProSidebar>
  <SidebarHeader>
    {/**
     *  You can add a header for the sidebar ex: logo
     */}
  </SidebarHeader>
  <SidebarContent>
    {/**
     *  You can add the content of the sidebar ex: menu, profile details, ...
     */}
  </SidebarContent>
  <SidebarFooter>
    {/**
     *  You can add a footer for the sidebar ex: copyright
     */}
  </SidebarFooter>
</ProSidebar>;

Custom Styling

There are sets of sass variables available which you can override to define your own styles

You need to include your override variables before importing the scss file

Your custom.scss file should look something like this

// Your variable overrides
$sidebar-bg-color: #1d1d1d;

@import '~react-pro-sidebar/dist/scss/styles.scss';

Available scss variables

$sidebar-bg-color: #1d1d1d !default;
$sidebar-color: #adadad !default;
$sidebar-width: 270px !default;
$sidebar-collapsed-width: 80px !default;
$highlight-color: #d8d8d8 !default;
$submenu-bg-color: #2b2b2b !default;
$submenu-bg-color-collapsed: #2b2b2b !default;
$icon-bg-color: #2b2b2b !default;
$icon-size: 35px !default;
$submenu-indent: 24px !default;
$breakpoint-xs: 480px !default;
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;
$breakpoint-xxl: 1600px !default;

Using nested sub-menus

You can have as many nested menu-items and sub-menus as you like, and the syntax is very simple

<Menu iconShape="square">
  <SubMenu title="Components" icon={<FaGem />}>
    <MenuItem>Component 1</MenuItem>
    <SubMenu title="Sub Component 1" icon={<FaHeart />}>
      {/* you can have more nested submenus ... */}
    </SubMenu>
  </SubMenu>
</Menu>

Using React Router Dom

Here is an example on how to use react router dom in the menu item

import { Link } from 'react-router-dom';

<MenuItem icon={<FaGem />}>
  Dashboard
  <Link to="/" />
</MenuItem>;

API

Component	Prop	Type	Description	Default
ProSidebar	collapsed	boolean	collapsed status of the sidebar	`false`
	rtl	boolean	RTL direction	`false`
	toggled	string	Toggle status of the sidebar when break point is enabled	`false`
	onToggle	`(value:boolean)=>{}`	Callback function called when toggled status changes, happens when overlay is clicked	-
	breakPoint	`xs` \| `sm` \| `md` \| `lg` \| `xl`	Set break point to specify when the sidebar should be responsive	-
	width	number \| string	Width of the sidebar	`270px`
	collapsedWidth	number \| string	Width of the sidebar on collapsed state	`80px`
image	string	Url of the image to use in the sidebar background	-
Menu	iconShape	`'square'` \| `'round'` \| `'circle'`	Shape of the menu icons	-
	popperArrow	boolean	if `true`, an arrow will be displayed when sidebar collapsed to point to sub-menu wrapper	`false`
	innerSubMenuArrows	boolean	if `true`, arrows will be displayed for each inner submenu	`true`
	subMenuBullets	boolean	if `true`, bullets will be displayed for each inner submenu/menuItem	`false`
MenuItem	icon	ReactNode	Icon for the menu item	-
	active	boolean	Set active menu items	`false`
	prefix	ReactNode	Add a prefix to the menuItem	-
	suffix	ReactNode	Add a suffix to the menuItem	-
SubMenu	title	string \| ReactNode	Title for the submenu	-
	icon	ReactNode	Icon for submenu	-
	defaultOpen	boolean	Set if the submenu is open by default	`false`
	open	boolean	Set open value if you want to control the state	-
	prefix	ReactNode	Add a prefix to the submenu	-
	suffix	ReactNode	Add a suffix to the submenu	-
	onOpenChange	`(open: boolean)=>{}`	Callback function called when submenu state changes	-

License

使用案例

react-ant vscode 插件

插件 Ant Design Snippets 如果生成layout快捷键 antlayout + enter function IndexPage() {//布局生成快键antlayout + enter return ( <Layout> <Header>header</Header> <Layout> <Sider>left sidebar</Si
react-Portals

作用一般的React组件总是挂载在父组件的this.props.children上，总是被最近的父组件捕捉到React的根节点上。 Portal是react16提出的将子节点直接渲染React的最顶层方案，portal是真实DOM，存在于DOM tree中，且与在DOM tree中的位置无关用法 import React, { Component } from "react"; export