ReactJS MDBootstrap 切换组件

ReactJS MDBootstrap 切换组件是一组可高度定制的交互式组件，提供了一种简单的方法来在 React 应用程序中切换内容。

优点

• 可高度定制
• 可在任何设备上使用
• 提供多种切换效果
• 响应式布局

安装

安装 ReactJS MDBootstrap 切换组件很简单，只需在终端（macOS 或 Linux）或命令提示符（Windows）中执行以下命令：

npm install --save mdbreact

使用

为了使用组件，您需要在项目中导入所需的组件并将其包装在父组件中。以下是一个示例，其中包括两个选项卡：

import React, { Component } from 'react';
import { MDBTabs, MDBTabsItem, MDBTabsLink } from 'mdb-react-ui-kit';

class App extends Component {
  render() {
    return (
      <MDBTabs>
        <MDBTabsItem>
          <MDBTabsLink>选项卡1</MDBTabsLink>
        </MDBTabsItem>
        <MDBTabsItem>
          <MDBTabsLink>选项卡2</MDBTabsLink>
        </MDBTabsItem>
      </MDBTabs>
    );
  }
}

export default App;

如果您希望在选项卡之间显示不同的内容，可以将其包装在 MDBTabsPanel 组件中，如下所示：

import React, { Component } from 'react';
import { MDBTabs, MDBTabsItem, MDBTabsLink, MDBTabsPanel } from 'mdb-react-ui-kit';

class App extends Component {
  render() {
    return (
      <MDBTabs>
        <MDBTabsItem>
          <MDBTabsLink>选项卡1</MDBTabsLink>
          <MDBTabsPanel>
            <h1>这是选项卡1的内容</h1>
          </MDBTabsPanel>
        </MDBTabsItem>
        <MDBTabsItem>
          <MDBTabsLink>选项卡2</MDBTabsLink>
          <MDBTabsPanel>
            <h1>这是选项卡2的内容</h1>
          </MDBTabsPanel>
        </MDBTabsItem>
      </MDBTabs>
    );
  }
}

export default App;

您可以在选项卡之间使用不同的效果，如下所示：

import React, { Component } from 'react';
import { MDBTabs, MDBTabsItem, MDBTabsLink, MDBTabsPanel } from 'mdb-react-ui-kit';

class App extends Component {
  render() {
    return (
      <MDBTabs pills>
        <MDBTabsItem>
          <MDBTabsLink>选项卡1</MDBTabsLink>
          <MDBTabsPanel>
            <h1>这是选项卡1的内容</h1>
          </MDBTabsPanel>
        </MDBTabsItem>
        <MDBTabsItem>
          <MDBTabsLink>选项卡2</MDBTabsLink>
          <MDBTabsPanel>
            <h1>这是选项卡2的内容</h1>
          </MDBTabsPanel>
        </MDBTabsItem>
      </MDBTabs>
    );
  }
}

export default App;

这里我们将效果设置为 pills，这将使选项卡变成胶囊形状的按钮。

定制

ReactJS MDBootstrap 切换组件非常易于定制。您可以更改按钮的颜色、背景色、边框等等。以下是一个示例，其中更改了选项卡的颜色和激活选项卡的文本颜色：

import React, { Component } from 'react';
import { MDBTabs, MDBTabsItem, MDBTabsLink, MDBTabsPanel } from 'mdb-react-ui-kit';

class App extends Component {
  render() {
    return (
      <MDBTabs
        pills
        color='warning'
        activeColor='dark'
      >
        <MDBTabsItem>
          <MDBTabsLink>选项卡1</MDBTabsLink>
          <MDBTabsPanel>
            <h1>这是选项卡1的内容</h1>
          </MDBTabsPanel>
        </MDBTabsItem>
        <MDBTabsItem>
          <MDBTabsLink>选项卡2</MDBTabsLink>
          <MDBTabsPanel>
            <h1>这是选项卡2的内容</h1>
          </MDBTabsPanel>
        </MDBTabsItem>
      </MDBTabs>
    );
  }
}

export default App;

结论

ReactJS MDBootstrap 切换组件是一种必须了解的交互式组件。对于需要在多个内容之间进行切换的应用程序来说，它是一种非常有用的工具。它易于使用和定制，您可以轻松地将其添加到 React 应用程序中以增强其功能。