如何使用 react-sidebar-ui 为你的下一个 React 项目构建侧边栏

2025-06-10

如何使用 react-sidebar-ui 为你的下一个 React 项目构建侧边栏

React-sidebar-ui

我想在我的一个项目中添加一个侧边栏,所以我首先搜索了一下是否有现成的组件,但没有找到我喜欢的。于是,我决定自己构建一个,然后像 npm 包一样发布,以便其他人可以贡献和使用它。
在这里,我将解释如何使用它,如果您在 GitHub 上点个星,我将不胜感激。页面底部有一个代码库的链接。

React 侧边栏 UI

安装

npm install --save react-sidebar-ui

用法

import React from 'react'
import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'
import 'react-sidebar-ui/dist/index.css';

const App = () => {
  return (
    <div>
      <Sidebar bgColor='black' isCollapsed={false}>
        <Logo
          image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'
          imageName='react logo'/>
        <LogoText>React Sidebar UI</LogoText>
        <DropdownItem
          values={['First', 'Second', 'Third']}
          bgColor={'black'}>
          Menu
        </DropdownItem>

        <Item bgColor='black'>
          <Icon><i className="fas fa-home"/></Icon>
          Home
        </Item>
        <Item bgColor='black'>
          <Icon><i className="fas fa-info"/></Icon>
          About
        </Item>
        <Item bgColor='black'>
          <Icon><i className="fas fa-sitemap"/></Icon>
          My Website
        </Item>
        <Item bgColor='black'>
          <Icon><i className="far fa-address-book"/></Icon>
          Contacts
        </Item>
        <Item bgColor='black'>
          <Icon><i className="fas fa-rss-square"/></Icon>
          Blog
        </Item>
        <InputItem type='text' placeholder={'Search...'}/>
      </Sidebar>
    </div>
  )
};

您应该导入 FontAwesome 才能使用图标。

道具

您可能想要指定的常见道具包括:

侧边栏

  • bgColor-更改侧边颜色可以black,,,,,lightbluepurpleaquapeach
  • isCollapsed- 添加侧边栏的起始位置(无论是否折叠)
  • classes- 如果您想为组件添加自定义样式,请添加自定义类

下拉项

  • bgColor-更改侧边颜色可以black,,,,,lightbluepurpleaquapeach
  • values- 将显示的项目
  • classes- 如果您想为组件添加自定义样式,请添加自定义类

物品

  • bgColor-更改侧边颜色可以black,,,,,lightbluepurpleaquapeach
  • classes- 如果您想为组件添加自定义样式,请添加自定义类

标识

  • image- 图片的 URL
  • imageText- 图像的 alt 标签
  • classes- 如果您想为组件添加自定义样式,请添加自定义类

输入项

  • type- 输入字段的类型
  • placeholder- 输入字段的占位符
  • classes- 如果您想为组件添加自定义样式,请添加自定义类

贡献

欢迎大家贡献代码!任何审核、功能/拉取请求,只要你想贡献,都欢迎!

GitHub 徽标 Svetloslav15 /反应侧边栏-ui

⚛️ React.js 的侧边栏组件

React-sidebar-ui

具有可定制设计的 React 项目的侧边栏组件

新公共管理 JavaScript 样式指南

React 侧边栏 UI 黑色 React 侧边栏 UI Light React 侧边栏 UI 蓝色

安装

npm install --save react-sidebar-ui

用法

 ' react '导入React 导入{ SidebarInputItemDropdownItemIconItemLogoLogoText }' react-sidebar-ui '导入' react-sidebar-ui/dist/index.css ' const App = () => {
   return ( 
 
 
  
    <div>
      <侧边栏 bgColor = '黑色'  isCollapsed = { false } >
        <徽标
          图像= ' https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif '
           imageName = ' react logo ' />
        < LogoText >React 侧边栏 UI</ LogoText >
        < DropdownItem
          = { [ '第一' , '第二' , '第三' ] } 
          bgColor = { '黑色' } >
          菜单
        </下拉项目>

        <项目 bgColor = '黑色' >
          <图标>< i  className =  fas fa-home  />></图标>
        </项目>
        <项目 背景颜色
鏂囩珷鏉ユ簮锛�https://dev.to/svetloslav15/build-sidebar-for-your-next-react-project-with-react-sidebar-ui-20ik
PREV
时间宝贵,估算是关键:如何估算项目
NEXT
Introducing Gitpod – Frictionless Coding on GitHub GenAI LIVE! | June 4, 2025