react-sidebar

  • L6_514232
    了解作者
  • 1.6MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-03 14:39
    上传日期
@bapana/React侧边栏 完全可定制的现代侧边栏,内置轻量级和市场上可用的现代库 安装 npm install --save @bapana/react-sidebar 用法 import React from 'react' // Sidebar Component import Sidebar from '@bapana/react-sidebar' import '@bapana/react-sidebar/lib/index.css' // Icons for the menu and sub menu items import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faAddressBook , faAddressCard , faBookmark , faR
react-sidebar-master.zip
内容介绍
# @bapana/react-sidebar > Completely customizable modern sidebar built with light weight and modern libraries available in the market [![NPM](https://img.shields.io/npm/v/@bapana/react-sidebar.svg)](https://www.npmjs.com/package/@bapana/react-sidebar) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ## Install ```bash npm install --save @bapana/react-sidebar ``` ## Usage ```jsx import React from 'react' // Sidebar Component import Sidebar from '@bapana/react-sidebar' import '@bapana/react-sidebar/lib/index.css' // Icons for the menu and sub menu items import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faAddressBook, faAddressCard, faBookmark, faRetweet } from '@fortawesome/free-solid-svg-icons' const ExampleComponent = () => { const brandName = { name: 'Hello', logoPath: '/images/logo.png' } const menuList = [ { name: 'Home', icon: <FontAwesomeIcon icon={faAddressBook} />, to: '/', hasChildren: false, subMenu: [] }, { name: 'Dashboard', icon: <FontAwesomeIcon icon={faAddressCard} />, to: '/dashboard', hasChildren: true, subMenu: [ { name: 'Board', icon: <FontAwesomeIcon icon={faBookmark} />, to: '/board' }, { name: 'Report', icon: <FontAwesomeIcon icon={faRetweet} />, to: '/report' } ] } ] return <Sidebar brandName={brandName} menuList={menuList} /> } ``` ## Styles Customization Passing the _theme_ property to Sidebar component as below will adopt the given color patterns | Key | Description | | ----------- | ---------------------------- | | header | Sidebar Header color code | | menuItem | Menu items color code | | expandArrow | Menu expand arrow color code | | toggle | Toggle arrow color code | | sidebar | Sidebar color code | > below is the default color code ```js theme: { header: { color: '#bdc3c7', hoverColor: '#ecf0f1', backgroundColor: '#222f3e' }, menuItem: { color: '#bdc3c7', hoverColor: '#ecf0f1', active: '#1abc9c', activeHoverColor: '#1dd1a1' }, expandArrow: { color: '#ecf0f1' }, toggle: { color: '#bdc3c7', hoverColor: '#ecf0f1' }, sidebar: { backgroundColor: '#222f3e', color: '#bdc3c7' } } ``` ## License MIT © [Parthiban Baskar](https://github.com/parthikrb)
评论
    相关推荐
    • npm-install:用于npm的Cloud Native Buildpack
      Paketo NPM安装Cloud Native Buildpack NPM安装CNB利用安装在中的工具来管理应用程序依赖性。 积分 NPM安装CNB提供node_modules作为依赖项。 下游buildpack可以通过生成如下所示的文件来要求node_modules依赖项: ...
    • RAX:使用Web技术制作的开源C ++ IDE
      通过网络技术制作的开源C ++ IDE。 使用“ npm install”来获取所有依赖项。 您还应该安装g ++编译器。 使用“ npm start”预览RAX或使用“ npm run make”构建它。 随时为回购做贡献。 Imgur画廊: ://imgur....
    • car-sharing-project
      汽车共享项目 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 check path in your ide npm run lint 自定义配置 请参阅。
    • identity-generator:具有控制台Web应用程序的电子邮件访问权限的高级身份生成器npm模块
      npm install --save identity-generator 用法 const identity = require ( 'identity-generator' ) identity . generate ( ) . then ( data => { console . log ( data ) } ) 这将生成一个完全随机的标识,并...
    • npm_module:粘合剂实施为NPM模块
      dhcp npm模块 将粘合剂实现为NPM模块,以用于NextJS项目。 该模块旨在用作服务器端渲染应用程序的一部分。 它获取针对所消费内容计划的广告,并将其用作Freewheel Ad Server或Google ad Manager的自定义参数。 ...
    • hexlet-ide:hexlet 的 Web IDE
      npm i --save hexlet-ide 2. require hexlet-ide frontend module var HexletIde = require("hexlet-ide/src/editor/main"); 3. Create widget var widget = HexletIde.create(document.getElementById("ide"), {...
    • tiny::upside-down_face:Npm软件包-删除字符串中的所有空格
      $ npm install @bamblehorse/tiny 用法 const tiny = require ( "@bamblehorse/tiny" ) ; tiny ( "So much space!" ) ; //=> "Somuchspace!" tiny ( 1337 ) ; //=> Uncaught TypeError: Tiny wants a string! // at ...
    • treeline, 在 Treeline IDE中,用于处理风帆应用和machinepacks的CLI工具.zip
      treeline, 在 Treeline IDE中,用于处理风帆应用和machinepacks的CLI工具 treeline( 译): 网站开始 命令行实用程序,用于在Treeline中使用帆应用程序和机器。安装 $ npm install -g treeline这将允许你在命令行中...
    • dynamic-watermark:使用npm包在图像上添加图像或文本水印,即动态水印
      动态水印是npm水印模块,用于在图像上添加水印。 它可以在给定位置添加图像以及文本水印。 在添加水印方面做得很好。 npm install dynamic-watermark --save 成功安装动态水印后,请执行以下步骤: 步骤1:包含...
    • d3-convention:D3公约编码为npm
      D3编码为npm软件包。 来自想法“分叉” 安装 d3-convention依赖d3作为对等方依赖项 npm install d3 d3-convention 例子 var c = require ( 'd3-convention' ) ( ) c . svg . append ( 'rect' ) . attr ( { width ...