前端项目实战叁佰捌拾陆react-admin和material ui-material ui tabs案例

前端歌谣

于 2023-09-07 08:58:40 发布

阅读量49

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132468200

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

本文展示了如何在React应用中使用Material-UI库的Tabs组件，并演示了如何设置带有WrappedLabel的选项卡。状态管理通过useState和handleChange函数实现切换选项卡的功能。

摘要由CSDN通过智能技术生成

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

export default function TabsWrappedLabel() {
  const [value, setValue] = React.useState('one');

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="wrapped label tabs example"
      >
        <Tab
          value="one"
          label="New Arrivals in the Longest Text of Nonfiction that should appear in the next line"
          wrapped
        />
        <Tab value="two" label="Item Two" />
        <Tab value="three" label="Item Three" />
      </Tabs>
    </Box>
  );
}