小编Bri*_*y G的帖子

将@ Material-UI选项卡用作导航栏

对编码空间来说还很新。我尝试到处寻找该问题的答案,尽管我找到了很多答案,但没有一个对我有用。

我的问题是我想将@ Material-UI选项卡组件用作NavBar,而我似乎只能1.将选项卡变成可以使用但没有动画或指示器的静态链接,或者2.保留动画但就更改页面而言,没有任何功能。

我已经尝试过thisthisthis以及更多内容,以及其中每个答案中的许多答案。

编辑是一个Git回购。

这是我的NavBar组件,当前处于状态#2,它具有动画,但没有功能:

import React from 'react';
import { Paper, Tabs, Tab } from '@material-ui/core';

const navStyle= {
    backgroundColor: '#220000',
    color: '#fff',
}

export class NavBar extends React.Component {
    state = {
        value: 0,
    };

handleChange = (event, value) => {
    event.preventDefault();
    this.setState({ value });
    console.log(value)
};

render() {      
    return (
        <div>
            <Paper>
                <Tabs
                    value={this.state.value}
                    onChange={this.handleChange}
                    indicatorColor={"secondary"}
                    // textColor="secondary"
                    centered
                    style={navStyle}
                >
                    <Tab label="Home" href='/' />
                    <Tab label="About" …
Run Code Online (Sandbox Code Playgroud)

javascript navigation navbar reactjs material-ui

5
推荐指数
1
解决办法
1567
查看次数

标签 统计

javascript ×1

material-ui ×1

navbar ×1

navigation ×1

reactjs ×1