<div className={classes.root}> <AppBar position="static" color="inherit"> <Tabs value={value} onChange={(e, tabValue) => setValue(tabValue)}> <Tab classes={{
function NavBar(props) { return ( <Tabs> <Tab label="New user" value={Form} ></Tab> <Tab label="Exisisting users" /> </Tabs> ) }
const TabContainer = ({ value }) => ( <AppBar position="static"> <Tabs value={value}> <Tab label="Item One" component={Link} to="/" /> <Tab label="Item Two" component={Link} to="/page2" /> <Tab label="Item Three" component={Link} to="/page3" /> </Tabs> </AppBar> )
render() { const { classes } = this.props; const { value } = this.state; return ( <Paper className={classes.root}> <Head name="Menus" /> <Tabs value={value} onChange={this.handleChange} indicatorColor="primary" textColor="primary" > <Tab label="Edit Menus" /> </Tabs> {value === 0 && <EditMenus />} </Paper> ); }
export default function TabNavigation({handleClose}) { const [value, setValue] = React.useState(1); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <MyContainer> <Tabs orientation="vertical" value={value} onChange={handleChange} aria-label="simple tabs example" > / <CustomTab label="이벤트설정" disabled={true} /> <CustomTab label="기본설정" {...allyProps(1)} /> </Tabs> <TabContent value={value} index={1}> <GeneralSetting handleClose={handleClose} /> </TabContent> </MyContainer> ); }
function TabGroup({showQnABadge = true, showPollBadge}) { const {tabIdx, selectTabIdx} = useTabs(QUESTION_TAB_IDX); return ( <TabGroupStyle> <Tabs value={tabIdx} onChange={selectTabIdx} variant="fullWidth"> <Tab icon={<QnATabIcon showBadge={showQnABadge} />} /> <Tab icon={<PollTabIcon showBadge={showPollBadge} />} /> </Tabs> <TabBody hidden={tabIdx !== QUESTION_TAB_IDX}> <QuestionsProvider> <QuestionContainer /> </QuestionsProvider> </TabBody> <TabBody hidden={tabIdx !== POLL_TAB_IDX}> <PollsProvider> <PollContainer /> </PollsProvider> </TabBody> </TabGroupStyle> ); }
export default function SimpleTabs() { const classes = useStyles(); const [value, setValue] = React.useState(0); // first tab const handleChange = (_event, newValue) => { setValue(newValue); }; return ( <div className={classes.root}> <AppBar position="static"> <Tabs value={value} onChange={handleChange} aria-label="simple tabs example"> <Tab label="Learn Redux" {...a11yProps(0)} /> <Tab label="Login" {...a11yProps(1)} /> <Tab label="Users" {...a11yProps(2)} /> </Tabs> </AppBar> <TabPanel value={value} index={0}> <Logo/> </TabPanel> <TabPanel value={value} index={1}> <Login/> </TabPanel> <TabPanel value={value} index={2}> <Grid/> </TabPanel> </div> ); }
function App() { return ( <div className="App"> <header className="App-header"> <Route path="/" render={({ location }) => ( <Tabs component={'div'} value={location.pathname}> <Tab value={"/"} label={'Main'} component={Link} to={'/'}/> <Tab value={"/story"} label={'Story'} component={Link} to={'/story'} /> <Tab value={"/sortsa"} label={'Sortsa'} component={Link} to={'/sortsa'} /> </Tabs> )} /> <React.Suspense fallback={<Loader/>}> <Route exact path={"/"} render={() => <p>Frontpage</p>} /> <Route path={"/story"} component={Story} /> <Route path={"/sortsa"} component={Sortsa} /> </React.Suspense> </header> </div> ); }
function TabContainer({ children, value: valueProp }) { const [value, setValue] = useState(); const onChange = (e, value) => { setValue(value); }; if (value === undefined) { setValue(valueProp); } return ( <Fragment> <Tabs value={value} onChange={onChange}> {Children.map(children, child => ( <Tab label={child.props.label} /> ))} </Tabs> {Children.map(children, (child, index) => index === value ? child : null )} </Fragment> ); }
const Header = () => { const classes = useStyles(); const [activeTab, setActiveTab] = React.useState(0); const handleChange = (event, tab) => { setActiveTab(tab); }; return ( <Paper className={classes.paper}> <Tabs value={activeTab} onChange={handleChange} indicatorColor="primary" textColor="primary" > <Tab label="INFO" to="/" component={Link} /> <Tab label="Settings" to="/settings" component={Link} /> <Tab label="Integration" to="/integration" component={Link} /> </Tabs> </Paper> ); }
function App() { return ( <div className="App"> <header className="App-header"> <Route path="/" render={({ location }) => ( <Tabs component={'div'} value={location.pathname}> <Tab value={"/"} label={'Main'} component={Link} to={'/'}/> <Tab value={"/story"} label={'Story'} component={Link} to={'/story'} /> <Tab value={"/sortsa"} label={'Sortsa'} component={Link} to={'/sortsa'} /> </Tabs> )} /> <Switch> <Route exact path={"/"} render={() => <p>Frontpage</p>} /> <Route path={"/story"} component={Story} /> <Route path={"/sortsa"} component={Sortsa} /> </Switch> </header> </div> ); }
function TabAlignment({ classes, width }) { const [value, setValue] = useState(0); const onChange = (e, value) => { setValue(value); }; return ( <div className={classes.root}> <Tabs value={value} onChange={onChange} variant={['xs', 'sm'].includes(width) ? null : 'fullWidth'} centered > <Tab label="Item One" /> <Tab label="Item Two" /> <Tab label="Item Three" /> </Tabs> </div> ); }
function App() { return ( <div className="App"> <header className="App-header"> <Route path="/" render={({ location }) => ( <Tabs component={'div'} value={location.pathname}> <Tab value={"/"} label={'Main'} component={Link} to={'/'}/> <Tab value={"/story"} label={'Story'} component={Link} to={'/story'} /> <Tab value={"/sortsa"} label={'Sortsa'} component={Link} to={'/sortsa'} /> </Tabs> )} /> <Switch> <Route exact path={"/"} render={() => <p>Frontpage</p>} /> <Route path={"/story"} component={Story} /> <Route path={"/sortsa"} component={Sortsa} /> </Switch> </header> </div> ); }
function App() { return ( <div className="App"> <header className="App-header"> <Route path="/" render={({ location }) => ( <Tabs component={'div'} value={location.pathname}> <Tab value={"/"} label={'Main'} component={Link} to={'/'}/> <Tab value={"/story"} label={'Story'} component={Link} to={'/story'} /> <Tab value={"/sortsa"} label={'Sortsa'} component={Link} to={'/sortsa'} /> </Tabs> )} /> <React.Suspense fallback={<Loader/>}> <Route exact path={"/"} render={() => <p>Frontpage</p>} /> <Route path={"/story"} component={Story} /> <Route path={"/sortsa"} component={Sortsa} /> </React.Suspense> </header> </div> ); }
function App() { return ( <div className="App"> <header className="App-header"> <Route path="/" render={({ location }) => ( <Tabs component={'div'} value={location.pathname}> <Tab value={"/"} label={'Main'} component={Link} to={'/'}/> <Tab value={"/story"} label={'Story'} component={Link} to={'/story'} /> <Tab value={"/sortsa"} label={'Sortsa'} component={Link} to={'/sortsa'} /> </Tabs> )} /> <Switch> <Route exact path={"/"} render={() => <p>Frontpage</p>} /> <Route path={"/story"} component={Story} /> <Route path={"/sortsa"} component={Sortsa} /> </Switch> </header> </div> ); }