Creazione di schema di dettaglio principale che nasconde la vista di dettaglio su dispositivi mobili utilizzando framework di progettazione reattivi

Question

Sto cercando di utilizzare il modello di dettaglio principale in cui la vista principale di master contiene un elenco di elementi e facendo clic su di esso carica tutte le informazioni relative a quell'elemento in vista dettagliata. Funziona bene usando sia bootstrap che fondotinta. Posso anche nascondere la vista di dettaglio per i cellulari.

Quello che mi piacerebbe fare è quando si fa clic su un elemento nella vista principale. Voglio cambiare la vista della vista dei dettagli nel cellulare. Penso che sia possibile con un po 'di jquery nascondere la vista principale e mostrare la vista di dettaglio sul cellulare. Non sono sicuro che sia l'approccio giusto, mi piacerebbe sapere come le persone hanno affrontato questo problema. Qualsiasi angularjs/reagire suggerimenti specifici sarebbe ancora meglio.

Answer 1

Il mio approccio sarebbe quello di avere il className della vista Master determinato dallo stato contenuto nel componente che lo racchiude. Qualcosa di simile a;

<MasterView className={this.state.masterViewClass} /> 

(ovviamente modificate per rispondere il vostro codice, è probabile che vorrebbe applicare questo tag specifici piuttosto che l'intero elemento di reagire).

Facendo clic su un elemento della vista principale, modificarlo di conseguenza masterViewClass, facendo leva sui bootstrap Responsive Utilities per nascondere gli elementi che non si desidera mostrare.