如何使用 react-sidebar-ui 为你的下一个 React 项目构建侧边栏
React-sidebar-ui
我想在我的一个项目中添加一个侧边栏，所以我首先搜索了一下是否有现成的组件，但没有找到我喜欢的。于是，我决定自己构建一个，然后像 npm 包一样发布，以便其他人可以贡献和使用它。
在这里，我将解释如何使用它，如果您在 GitHub 上点个星，我将不胜感激。页面底部有一个代码库的链接。
安装
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，，，，，lightbluepurpleaquapeachisCollapsed- 添加侧边栏的起始位置（无论是否折叠）classes- 如果您想为组件添加自定义样式，请添加自定义类
下拉项
bgColor-更改侧边栏的颜色可以是black，，，，，lightbluepurpleaquapeachvalues- 将显示的项目classes- 如果您想为组件添加自定义样式，请添加自定义类
物品
bgColor-更改侧边栏的颜色可以是black，，，，，lightbluepurpleaquapeachclasses- 如果您想为组件添加自定义样式，请添加自定义类
标识
image- 图片的 URLimageText- 图像的 alt 标签classes- 如果您想为组件添加自定义样式，请添加自定义类
输入项
type- 输入字段的类型placeholder- 输入字段的占位符classes- 如果您想为组件添加自定义样式，请添加自定义类
贡献
欢迎大家贡献代码！任何审核、功能/拉取请求，只要你想贡献，都欢迎！
鏂囩珷鏉ユ簮锛�https://dev.to/svetloslav15/build-sidebar-for-your-next-react-project-with-react-sidebar-ui-20ik
