/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/tabs/NavTabs.js
68 строк
2 KB
kimia hajizadeh
[material-ui][docs] Add aria-current for nav tabs demo (#39594)
22 дек 2023, 14:40
Не верифицирован
22 дек 2023, 14:40
9e798d8
Код
Авторство
О чём код?
import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; function samePageLinkNavigation(event) { if ( event.defaultPrevented || event.button !== 0 || // ignore everything but left-click event.metaKey || event.ctrlKey || event.altKey || event.shiftKey ) { return false; } return true; } function LinkTab(props) { return ( <Tab component="a" onClick={(event) => { // Routing libraries handle this, you can remove the onClick handle when using them. if (samePageLinkNavigation(event)) { event.preventDefault(); } }} aria-current={props.selected && 'page'} {...props} /> ); } LinkTab.propTypes = { selected: PropTypes.bool, }; export default function NavTabs() { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { // event.type can be equal to focus with selectionFollowsFocus. if ( event.type !== 'click' || (event.type === 'click' && samePageLinkNavigation(event)) ) { setValue(newValue); } }; return ( <Box sx={{ width: '100%' }}> <Tabs value={value} onChange={handleChange} aria-label="nav tabs example" role="navigation" > <LinkTab label="Page One" href="/drafts" /> <LinkTab label="Page Two" href="/trash" /> <LinkTab label="Page Three" href="/spam" /> </Tabs> </Box> ); }