React Suite 栏组件

React Suite 提供了多种栏组件，用于将页面分为不同的区域或者用于导航。

引入方式

import { Nav, Navbar, NavItem, Dropdown } from 'rsuite';

Navbar

Navbar 组件用于创建一个顶部导航栏，可以包含多个 NavItem 和 Dropdown 组件。

<Navbar>
  <Navbar.Header>
    <a href="#">React Suite</a>
  </Navbar.Header>

  <Navbar.Body>
    <Nav>
      <NavItem href="#">Home</NavItem>
      <NavItem href="#">Products</NavItem>
      <Dropdown title="About">
        <Dropdown.Item>Company</Dropdown.Item>
        <Dropdown.Item>Team</Dropdown.Item>
        <Dropdown.Item>Contact Us</Dropdown.Item>
      </Dropdown>
    </Nav>
  </Navbar.Body>
</Navbar>

Nav

Nav 组件用于创建一个水平导航条，可以包含多个 NavItem 和 Dropdown 组件。

<Nav>
  <NavItem href="#">Home</NavItem>
  <NavItem href="#">Products</NavItem>
  <Dropdown title="About">
    <Dropdown.Item>Company</Dropdown.Item>
    <Dropdown.Item>Team</Dropdown.Item>
    <Dropdown.Item>Contact Us</Dropdown.Item>
  </Dropdown>
</Nav>

NavItem

NavItem 组件用于创建一个导航条目。

<NavItem href="#">Home</NavItem>

Dropdown

Dropdown 组件用于创建一个下拉菜单，可以包含多个 Dropdown.Item 组件。

<Dropdown title="About">
  <Dropdown.Item>Company</Dropdown.Item>
  <Dropdown.Item>Team</Dropdown.Item>
  <Dropdown.Item>Contact Us</Dropdown.Item>
</Dropdown>

Dropdown.Item

Dropdown.Item 组件用于创建一个下拉菜单中的选项。

<Dropdown.Item>Company</Dropdown.Item>

总结

React Suite 的栏组件提供了多种不同类型的导航栏和导航条，可以满足各种不同的需求。使用起来非常简单，通过组合不同的组件，可以轻松创建出自己想要的导航栏。