React MUI TabScrollButton API

React MUI 是一个UI库，提供完全加载的组件，为我们的生产就绪组件提供自己的设计系统。MUI是一个用户界面库，提供预定义和可定制的React组件，以实现更快、更容易的网页开发，这些Material-UI组件是基于谷歌的Material Design。

TabScrollButton 是Material-UI中的一个组件，提供一个按钮，用于在Tabs组件中滚动选项卡。TabScrollButton组件是Tabs组件的一部分，用于在屏幕上有太多选项卡无法容纳时水平滚动选项卡。

属性列表：

direction: 这是一个属性，指定按钮应指示的方向。方向可以是“left”或“right”。
orientation: 这个属性指定组件的方向。方向可以是“vertical”或“horizontal”。
children: 这个属性描述组件的内容。这个属性的类型是一个节点。
classes: 这个属性覆盖或扩展应用到组件的样式。这个属性的类型是一个对象。
disabled: 这是一个布尔属性。如果设置为true，组件将被禁用。这个属性的默认值是false。
sx: 这是一个系统属性，允许您定义系统的覆盖以及额外的CSS样式。这个属性可以是一个函数、对象或布尔变量的数组。也可以只是函数和对象。

CSS列表：

root: 组件的根样式类。可以使用这个类来应用样式到根容器。
vertical: 当orientation属性设置为“vertical”时，可以使用这个类来应用样式到组件。
disabled: 当disabled属性设置为true时，可以使用这个类来应用样式到组件。

语法：

<Tabs variant="scrollable" scrollButtons="auto"> 
    <Tab label="Tab 1"/>
</Tabs>

这是一个带有滚动按钮的选项卡的语法。

安装 React 应用：

步骤1： 使用以下命令创建 React 应用。

npx create-react-app scrollbutton-example

步骤2： 现在进入项目目录。

cd scrollbutton-example

安装 Material-UI： 通过 npm/yarn 安装 Material-UI 的源文件，并它们会负责注入所需的 CSS。

npm install @material-ui/core
OR
yarn add @material-ui/core

项目结构:

React MUI TabScrollButton API

导入 TabScrollButton：

import TabScrollButton from '@mui/material/TabScrollButton';
OR
import { TabScrollButton } from '@mui/material';

运行React应用的步骤:

npm start

示例1: 默认情况下，左右滚动按钮在桌面上自动显示，而在移动设备上隐藏。（基于视口宽度）。

App.js

import { TabScrollButton, Tab, Tabs } from "@mui/material"; 
  
function App() { 
    return ( 
        <> 
            <Tabs 
                variant="scrollable"
                scrollButtons="auto"
                aria-label="scrollable auto tabs example"
            > 
                <Tab label="Tab One" /> 
                <Tab label="Tab Two" /> 
                <Tab label="Tab Three" /> 
                <Tab label="Tab Four" /> 
                <Tab label="Tab Five" /> 
                <Tab label="Tab Six" /> 
                <Tab label="Tab Seven" /> 
                <Tab label="Tab Eight" /> 
            </Tabs> 
        </> 
    ); 
} 
  
export default App;

输出：

React MUI TabScrollButton API

示例2： 现在我们将看到有关强制滚动按钮的内容。在移动设备上，左右滚动按钮不存在。但是我们可以通过使用scrollButtons={true}和allowScrollButtonsMobile属性，来无论视口宽度如何，都能使用左右滚动按钮。

App.js

import { TabScrollButton, Tab, Tabs } from "@mui/material"; 
  
function App() { 
    return ( 
        <> 
            <Tabs 
                variant="scrollable"
                scrollButtons 
                allowScrollButtonsMobile 
                aria-label="scrollable force tabs example"
            > 
                <Tab label="Tab One" /> 
                <Tab label="Tab Two" /> 
                <Tab label="Tab Three" /> 
                <Tab label="Tab Four" /> 
                <Tab label="Tab Five" /> 
                <Tab label="Tab Six" /> 
                <Tab label="Tab Seven" /> 
                <Tab label="Tab Eight" /> 
            </Tabs> 
        </> 
    ); 
} 
  
export default App;

输出:

React MUI TabScrollButton API

示例3： 我们将看到如何阻止滚动按钮。如果使用scrollButtons={false}，则在任何视口中左右滚动按钮将不可见。

App.js

import { TabScrollButton, Tab, Tabs } from "@mui/material"; 
  
function App() { 
    return ( 
        <> 
            <Tabs 
                variant="scrollable"
                scrollButtons={false} 
                aria-label="scrollable prevent tabs example"
            > 
                <Tab label="Tab One" /> 
                <Tab label="Tab Two" /> 
                <Tab label="Tab Three" /> 
                <Tab label="Tab Four" /> 
                <Tab label="Tab Five" /> 
                <Tab label="Tab Six" /> 
                <Tab label="Tab Seven" /> 
                <Tab label="Tab Eight" /> 
            </Tabs> 
        </> 
    ); 
} 
  
export default App;

输出：

React MUI TabScrollButton API