Jak zdobyć szufladę Material-UI, aby "wycisnąć" inną zawartość po otwarciu?

Question

Jeśli ktokolwiek jest zaznajomiony z css i Materialnym interfejsem użytkownika, wszelka pomoc w tym zakresie byłaby bardzo doceniana. Zasadniczo próbuję zaimplementować komponent Szuflady interfejsu użytkownika, który po otwarciu nie tylko wysuwa się poza zawartość strony, ale raczej treść strony jest zgodna z szufladą, tj. Ściska lub rozszerza się. Używam wierszy bootstrap i kontenerów w moim projekcie, ale nie mam pojęcia, jak bym ich użył, aby to osiągnąć. Oto jak mój składnik jest określone: ​​

<div> 
    <AppBar 
    onLeftIconButtonTouchTap={this.handleToggle} 
     title="Imaginary Company" 
    /> 
    <Row> 
     <QuotesList /> 
    </Row> 
    <Drawer 
    containerStyle={{ top: 64, width:150 }} 
    open={this.state.open} 
    > 
     <MenuItem>Menu Item</MenuItem> 
     <MenuItem>Menu Item 2</MenuItem> 
    </Drawer> 
    </div> 

Zwróć uwagę na „top” Obiekt jest tylko dlatego, że chcę górna powierzchnia tytuł pasku App pozostanie widoczny z szufladą otworzyć lub zamknąć. Jak zwykle każda pomoc byłaby niesamowita! Na zdrowie

AKTUALIZACJA: Znalazłem coś w rodzaju hacky, które działa dla mnie. Korzystając z niesamowitej biblioteki "stylowanych komponentów" (która pozwala na zmianę stylów w oparciu o dynamiczne rekwizyty, które przekazujesz), udało mi się stworzyć składany element, który akceptuje "zwinięty" rekwizyt, z animacją przesuwającą się w prawo równą szufladzie szerokość (150). Jeśli ktoś natknie się na tym i oni zainteresowani tutaj jest mój kod w styled- składników (jest kilka skopiowana i wklejona bootstrap style kontenerów w niej również):

const CollapsibleContainer = styled.div` 
margin-left: auto; 
margin-right: auto; 
padding-left: 15px; 
padding-right: 15px; 
$:after { 
content: ""; 
display: table; 
clear: both; 
} 
position: absolute; 
right: 0; 
left: ${props => props.collapsed ? '150px' : '0'}!important; 
transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 
`; 

Może to nie jest idealnym rozwiązaniem, ale wygląda w porządku. Nadzieję, że to pomoże ktoś może :)

Answer 1

podobne do rozwiązania "hacky" może, ale tu jest jsFiddle: https://jsfiddle.net/88uq8751/3/

samo Prinicipal. Przesuwasz zawartość w prawo w tej samej odległości co szerokość szuflady i używasz tego samego przejścia/animacji ... Można to osiągnąć na wiele sposobów, używając jakiejś formy lub kombinacji szerokości, marginesu, pozycji absolutnej, a nawet przekształcenia: translate , ale użyłem marginLeft poniżej:

const { Drawer, RaisedButton, MuiThemeProvider, getMuiTheme } = MaterialUI; 

class Example extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { drawerOpen: false }; 
    } 

    render() { 
    const contentStyle = { transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' }; 

    if (this.state.drawerOpen) { 
     contentStyle.marginLeft = 256; 
    } 

    return (
     <div> 
     <Drawer open={this.state.drawerOpen}> 
      <div style={{ textAlign: 'right' }}> 
      <RaisedButton onClick={() => this.setState({ drawerOpen: false }) }>X</RaisedButton> 
      </div> 
      {this.props.children} 
     </Drawer> 
     <div style={contentStyle}> 
      <RaisedButton onClick={() => this.setState({ drawerOpen: true }) }>Open</RaisedButton> 
      <p> 
      Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id. 
      </p><p> 
      Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur. 
      </p><p> 
      Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat. 
      </p><p> 
      Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id. 
      </p><p> 
      Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur. 
      </p><p> 
      Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat. 
      </p><p> 
      Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id. 
      </p><p> 
      Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur. 
      </p><p> 
      Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat. 
      </p>   
     </div> 
    </div> 
    ); 
    } 

} 

const App =() => (
    <MuiThemeProvider muiTheme={getMuiTheme() }> 
    <Example /> 
    </MuiThemeProvider> 
); 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
);