Materyal-UI Çekmecesi, açıkken diğer içeriği 'sıkıştırmak' için nasıl kullanılır?

Question

Eğer css ve Malzeme kullanıcı arayüzüne aşina olan herkes bu konuda yardımcı olabilir. Temelde, açıldığında sayfa içeriğinin üstünden kayma değil, sayfa içeriği çekmecenin etrafında uyuyor, yani sıkıyor veya genişliyor bir Malzeme UI Çekmecesi bileşenini uygulamaya çalışıyorum. Projemde bootstrap satırları ve kapsayıcılar kullanıyorum, ancak bunu başarmak için onları nasıl kullanacağımı bilmiyorum. İşte benim bileşeni nasıl yerleştirildiğine açıklanmıştır:

<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> 

Not 'üst' özelliği Ben App Bar üst başlık alanı açık veya yakın çekmece görünür kalmasını istediğiniz sırf olduğunu. Her zaman olduğu gibi herhangi bir yardım inanılmaz olurdu! Şerefe

UPDATE: Benim için çalışan bir tür hacky çözümü buldum. Harika 'stillenmiş bileşenler' kütüphanesini kullanarak (stillerinizin içinden geçtiğiniz dinamik prodüksiyonlara göre değişikliklere izin verir), bir 'daraltılmış' pervane kabul eden bir sarmalayıcı bileşeni oluşturabilirdim. genişlik (150). Herkes stumbles ve onlar ilgileniyorsanız burada styled- bileşenlerindeki benim kod (orada da orada birkaç kopyalanıp yapıştırılan önyükleme konteyner stilleri):

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; 
`; 

Belki bu mükemmel bir çözüm değil ama iyi görünüyor. Bu bir jsFiddle :) senin "hacky" çözüme

Answer 1

Benzer belki belki birisi yardımcı olur, ancak burada Umut: https://jsfiddle.net/88uq8751/3/

aynı prinicipal. İçeriğinizi çekmecenin genişliği ile aynı mesafeye doğru sürükleyin ve aynı geçiş/animasyonu kullanın ... Bu, çeşitli biçimlerde veya genişlikte, kenar boşluğunda, kenarda, mutlak konumda, hatta dönüştürülebilen çeşitli şekillerde gerçekleştirilebilir: çevir ancak aşağıda belirtilen kenar boşluğunu kullandım:

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') 
);