1

を使用して、material-uiを使用してナビゲーション バーを作成していTabます。私のタブ ナビゲーション バーは、 Master.jsxとほぼ同じです。

import React from 'react';
import {
  AppCanvas,
  IconButton,
  EnhancedButton,
  Mixins,
  Styles,
  Tab,
  Tabs,
  Paper} from 'material-ui';

const {StylePropable} = Mixins;
const {Colors, Spacing, Typography} = Styles;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;


const Master = React.createClass({
  mixins: [StylePropable],

  getInitialState() {
    let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme);
    // To switch to RTL...
    // muiTheme.isRtl = true;
    return {
      muiTheme,
    };
  },

  propTypes: {
    children: React.PropTypes.node,
    history: React.PropTypes.object,
    location: React.PropTypes.object,
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object,
  },

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme,
    };
  },

  getStyles() {
    let darkWhite = Colors.darkWhite;
    return {
      footer: {
        backgroundColor: Colors.grey900,
        textAlign: 'center',
      },
      a: {
        color: darkWhite,
      },
      p: {
        margin: '0 auto',
        padding: 0,
        color: Colors.lightWhite,
        maxWidth: 335,
      },
      github: {
        position: 'fixed',
        right: Spacing.desktopGutter / 2,
        top: 8,
        zIndex: 5,
        color: 'white',
      },
      iconButton: {
        color: darkWhite,
      },
    };
  },

  componentWillMount() {
    let newMuiTheme = this.state.muiTheme;
    newMuiTheme.inkBar.backgroundColor = Colors.yellow200;
    this.setState({
      muiTheme: newMuiTheme,
      tabIndex: this._getSelectedIndex()});
    let setTabsState = function() {
      this.setState({renderTabs: !(document.body.clientWidth <= 647)});
    }.bind(this);
    setTabsState();
    window.onresize = setTabsState;
  },

  componentWillReceiveProps(nextProps, nextContext) {
    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
    this.setState({
      tabIndex: this._getSelectedIndex(),
      muiTheme: newMuiTheme,
    });
  },

  render() {
    let styles = this.getStyles();

    let githubButton = (
      <IconButton
        iconStyle={styles.iconButton}
        iconClassName="muidocs-icon-custom-github"
        href="https://github.com/callemall/material-ui"
        linkButton={true}
        style={styles.github} />
    );

    let githubButton2 = (
      <IconButton
        iconStyle={styles.iconButton}
        iconClassName="muidocs-icon-custom-github"
        href="https://github.com/callemall/material-ui"
        linkButton={true}/>
    );
    return (
      <AppCanvas>
        {githubButton}
        { this._getTabs() }

        {this.props.children}
      </AppCanvas>
    );
  },

  _getTabs() {
    let styles = {
      root: {
        backgroundColor: Colors.cyan500,
        position: 'fixed',
        height: 64,
        top: 0,
        right: 0,
        zIndex: 1101,
        width: '100%',
      },
      container: {
        position: 'absolute',
        right: (Spacing.desktopGutter / 2) + 48,
        bottom: 0,
      },
      span: {
        color: Colors.white,
        fontWeight: Typography.fontWeightLight,
        left: 45,
        top: 22,
        position: 'absolute',
        fontSize: 26,
      },
      svgLogoContainer: {
        position: 'fixed',
        width: 300,
        left: Spacing.desktopGutter,
      },
      svgLogo: {
        width: 65,
        backgroundColor: Colors.cyan500,
        position: 'absolute',
        top: 20,
      },
      tabs: {
        width: 425,
        bottom: 0,
      },
      tab: {
        height: 64,
      },
    };

    const materialIcon =
      <EnhancedButton
        style={styles.svgLogoContainer}
        linkButton={true}
        href="/#/home">
        <img style={this.prepareStyles(styles.svgLogo)} src="images/material-ui-logo.svg"/>
        <span style={this.prepareStyles(styles.span)}>material ui</span>
      </EnhancedButton>

    return (
      <div>
        <Paper
          zDepth={0}
          rounded={false}
          style={styles.root}>
          {materialIcon}
          <div style={this.prepareStyles(styles.container)}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}>
              <Tab
                value="1"
                label="GETTING STARTED"
                style={styles.tab}
                route="/get-started" />
              <Tab
                value="2"
                label="CUSTOMIZATION"
                style={styles.tab}
                route="/customization"/>
              <Tab
                value="3"
                label="COMPONENTS"
                style={styles.tab}
                route="/components"/>
            </Tabs>
          </div>
        </Paper>
      </div>
    );
  },

  _getSelectedIndex() {
    return this.props.history.isActive('/get-started') ? '1' :
      this.props.history.isActive('/customization') ? '2' :
        this.props.history.isActive('/components') ? '3' : '0';
  },

  _handleTabChange(value, e, tab) {
    this.props.history.pushState(null, tab.props.route);
    this.setState({tabIndex: this._getSelectedIndex()});
  },
});

export default Master;

基本的に、、、およびを削除AppBarしAppLeftNavましFullWidthSectionた。

唯一の問題は、下のTabsいくつかの要素が隠れていることです。下の図を参照してください。

タブ ナビゲーション バー

私は何か間違ったことをしたに違いない、何かアイデアはありますか？ありがとう！

4

2 に答える 2

0

ルート スタイルは固定されています。要素が上にくっつきます。それを除く。

于 2015-12-22T15:15:09.950 に答える
0

OK、私は正しい解決策であるpage-with-nav.jsxpaddingTop: Spacing.desktopKeylineIncrement + 'px',で見つけました。

ナビゲーション タブの下の要素が覆われている理由は、固定位置の要素がドキュメント フローから削除され、スペースを占有しないためです。したがって、ヘッダーが存在しないかのように、要素は先頭から始まります。あなたがしなければならないことは、パディングまたはマージンを使用して、ヘッダーが通常のフローにあった場合に占有されていたスペースを占有することです.

于 2015-12-22T19:46:34.580 に答える