/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/tabs/ScrollableTabsButtonVisible.js
43 строки
1 KB
danilo leal
[docs] Fix maxWidth of scrollable Tabs demos (#31285)
03 мар 2022, 13:38
Не верифицирован
03 мар 2022, 13:38
7eab27c
Код
Авторство
О чём код?
import * as React from 'react'; import Box from '@mui/material/Box'; import Tabs, { tabsClasses } from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; export default function ScrollableTabsButtonVisible() { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <Box sx={{ flexGrow: 1, maxWidth: { xs: 320, sm: 480 }, bgcolor: 'background.paper', }} > <Tabs value={value} onChange={handleChange} variant="scrollable" scrollButtons aria-label="visible arrows tabs example" sx={{ [`& .${tabsClasses.scrollButtons}`]: { '&.Mui-disabled': { opacity: 0.3 }, }, }} > <Tab label="Item One" /> <Tab label="Item Two" /> <Tab label="Item Three" /> <Tab label="Item Four" /> <Tab label="Item Five" /> <Tab label="Item Six" /> <Tab label="Item Seven" /> </Tabs> </Box> ); }