Utilizzo del menu fisso e della barra laterale di Semantic in React

Sto tentando di utilizzare il menu fisso e la barra laterale di Semantic-UI insieme al framework React. Mi piacerebbe ottenere gli stessi risultati della pagina Documenti della Semantic-UI (nei display Tablet e Mobile) con un menu fisso in alto e una barra laterale sinistra sovrapposta quando attivata.Utilizzo del menu fisso e della barra laterale di Semantic in React

Ho messo insieme un esempio di quella qui: https://jsfiddle.net/bullwinkle/m3hr5v36/

Funziona, ma semantico-UI non piace il layout, e fornisce i seguenti errori in console:

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element 
Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class="ui inverted left vertical sidebar menu" data-reactid=".0.0">…</div>

Così Semantic-UI sposta il layout in modo che .sidebar e .pusher siano figli diretti di <body>. Questo non è esattamente il modo di reagire.

Come spiegato qui:

Semantic UI sidebar throws console errors with ReactJS when render app to body

si avrebbe bisogno di definire un contesto personalizzato per la barra laterale. OK, così ho fatto che nella barra laterale di inizializzazione:

componentDidMount() { 
    $('.ui.sidebar').sidebar({ 
     transition: 'overlay', 
     context: $('#layout') 
    }); 
},

(vedere la quarta revisione della jsfiddle, non posso postare link più a causa della bassa rep)

che fissa i messaggi di errore , ma ora il menu principale non è più fisso e la barra laterale scorre insieme al contenuto. Ho provato tutto il possibile per ottenere semantico-UI e reagire al gioco bene, ma sto ovviamente manca qualcosa

fonte

2015-10-11 Bullwinkle

Hai mai funzionato? – Jack

stesso problema. ancora nessuna soluzione –

ho avuto lo stesso problema con Ember, genera i seguenti: DIVS

<div data-label="layer-div" style="display: none;"></div> 
<div data-label="preview-div" style="pointer-events: none; display: none;"></div>

... prima del contenuto, che crea problemi per la barra laterale, in quanto il contenuto deve essere wrapper in una classe PUSHER in modo che la barra laterale possa PUSH sopra quando si apre.

Quindi, React sta aggiungendo alcuni contenuti extra al di fuori della tua classe di spinta, questo è quello che si lamenta.

{{!-- Pusher means that the sidebar will push it out of the way --}} 
<div class="ui grid pusher">

Se avete qualsiasi contenuto prima della classe di spinta, con l'eccezione del div barra laterale, si otterrà l'errore. Dai un'occhiata alla tua fonte, vedrai che Semantic-ui ha creato una seconda classe di spinta per avvolgere il contenuto generato dalla reazione.

fonte

2015-12-18 00:03:41 eric

Utilizzo del menu fisso e della barra laterale di Semantic in React

risposta

Problemi correlati