Réagissez les onglets de l'interface utilisateur avec les tiroirs

Question

Je rencontre un problème lors de l'ouverture d'un tiroir dans l'onglet ouvert à l'aide de React et de Material-UI. Je suis capable d'ouvrir le tiroir mais cela se voit dans le premier onglet. Au début, je pensais que c'était quelque chose de mal avec la façon dont j'ai construit mes composants, alors j'ai fait un très simple dans WebpackBin et ça fait la même chose.

Est-ce que quelqu'un a déjà pu le comprendre? Comment puis-je ouvrir le tiroir à l'intérieur du visualiseur d'onglets? Je suis capable de le faire correctement avec les dialogues mais pas avec les onglets.

Voici un exemple de code

class sidebarDrawer extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     }; 
    } 

    render() { 
     return (
      <div>     
       <p>My sidebar content</p> 
      </div> 
     ); 
    } 
} 

class TabComponent extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      slideIndex: 0, 
      open: false, 
     }; 
    } 

    handleChange = (value) => { 
     this.setState({ 
      slideIndex: value, 
     }); 
    }; 

    handleToggle =() => this.setState({open: !this.state.open}); 

    handleClose =() => this.setState({open: false}); 

    render() { 
     let materialUITheme; 
     return (
      <MuiThemeProvider muiTheme={getMuiTheme()}> 
       <div> 
        <Tabs 
         onChange={this.handleChange} 
         value={this.state.slideIndex}> 
         <Tab label="Tab One" value={0} /> 
         <Tab label="Tab Two" value={1} /> 
        </Tabs> 
        <SwipeableViews 
         index={this.state.slideIndex} 
         onChangeIndex={this.handleChange}> 
         <div> 
          <h2 style={styles.headline}>Tabs with slide effect</h2> 
          Swipe to see the next slide.<br /> 
         </div> 
         <div style={styles.slide}> 
          <div> 
           <RaisedButton 
            label="Open Drawer" 
            onClick={this.handleToggle} 
           /> 
           <Drawer 
            docked={false} 
            width={200} 
            open={this.state.open} 
            onRequestChange={(open) => this.setState({open})} 
           > 
            <AppBar 
             title="Playlists" 
             onRightIconButtonTouchTap={this.handleClose} 
             showMenuIconButton={false}/> 
            <sidebarDrawer /> 
           </Drawer> 
          </div> 
         </div> 
        </SwipeableViews> 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
} 

Voici le WebpackBin pour vous de jouer avec. Aller au deuxième onglet. Cliquez sur le bouton. Revenez au premier onglet et vous verrez le tiroir ouvert là.

Merci d'avance les gars.

Answer 1

cela peut être moyen hackish, mais fonctionne

style add position: 'relative' à l'onglet

position de remplacement de <Drawer>

containerStyle={{ position: 'absolute' }} // default is 'fixed' 
overlayStyle={{ position: 'absolute' }} 

travail Webpack Bin