@acto/react-navbar 中文文档教程

Question

React Navbar

响应式 React 导航栏组件

这是一个用于 React 的简单、可扩展的 Navbar 组件。 我构建它是因为我意识到我在每个项目中都从头开始创建导航栏。

它是响应式的，导航栏项目在移动设备上折叠成汉堡菜单。

Install

npm install --save @ovieokeh/react-navbar

Available Props

您可以通过传入以下道具来自定义导航栏的外观和内容：

Navbar Props

name	type	default value	isRequired
className	string		false
menuClassName	string		false
brand	JSX.Element		true
leftLinks	JSX.Element		false
rightLinks	JSX.Element		false
theme	ThemeProps		false
shouldHideOnScroll	boolean	true	false
shouldAnimate	boolean	true	false

如果传入 className 道具，您可以在自定义 css 中设置此类样式以自定义导航栏的外观更。

ThemeProps

prop	type	default value
mainColor	string	"#333333"
backgroundColor	string	"#ffffff"
menuBgColor	string	"#ffffff"
height	string	"55px"
sliderWidth	string	"100%"

Usage

使用

• live CodeSandbox here (JS)
• live codeSandbox here (TS)

import * as React from 'react'
import Navbar from '@ovie/react-navbar'

const navTheme = {
  mainColor: '#52b788',
  menuBgColor: '#edf7f3'
}

const navBrand = <a href={ROUTES.HOME}>Base Corp.</a>

const leftLinks = (
  <>
    <a href={ROUTES.PLANS}>Our Plans</a>
    <a href={ROUTES.FAQ}>How It Works</a>
    <a href={ROUTES.MENU}>Our Menus</a>
  </>
)

const rightLinks = (
  <>
    <a href={ROUTES.SIGNUP}>Get Started</a>
    <a href={ROUTES.SIGNIN}>Sign In</a>
  </>
)

const Example = () => {
  return (
    <div className="app">
      <Navbar
        className="navbar" // style .navbar in your css
        menuClassName="navbar--menu" // style .navbar--menu in your css
        brand={navBrand}
        theme={navTheme}
        leftLinks={leftLinks}
        rightLinks={rightLinks}
      />
    </div>
  )
}

License

Apache-2.0 © Ovie Okeh