Il miglior frammento di codice del componente del menu React 19

Blog

Il miglior frammento di codice del componente del menu React 19

1.Barre laterali reattive

Implementazione minima di barre laterali reattive. Questo progetto è in qualche modo un esperimento di ricerca sul modo più conveniente per implementare barre laterali reattive.



Barre laterali reattive

Priorità



  • Design semplice, facile da capire.
  • Design reattivo:
    • In modalità orizzontale le barre laterali dovrebbero spingere da parte il contenuto principale.
    • In modalità verticale dovrebbero coprire il contenuto principale.
  • Il trigger della barra laterale non dovrebbe muoversi quando viene cliccato;
    questo è fastidioso per l'utente.
  • La barra laterale dovrebbe essere 'pronta' quando viene visualizzata,
    e non riorganizzare il suo contenuto durante l'apertura.
    (Questo è visivamente distratto, ma un'implementazione molto comune;
    per esempio. barre laterali a larghezza variabile con larghezza: 0 quando chiuso)

Dimostrazione dal vivo: https://davidde.github.io/sidebars/

[View on GitHub](https://github.com/davidde/sidebars 'View on GitHub')

2. Reagire basso

Primitivo per costruire cose come menu a discesa e pop-over di suggerimenti. Fondamentalmente qualsiasi tipo di livello che può essere attivato. Concentrati su come dovrebbe essere il tuo livello e lascia che react-laag si occupi di dove e quando mostrarlo.



Reagire basso

Caratteristiche

  • Crea i tuoi suggerimenti / menu a discesa / pop-over / ecc ...
  • Non supponente per quanto riguarda lo stile o le animazioni
  • Altamente personalizzabile
  • Solo ~5kb minimizzati e compressi con gzip
  • Zero dipendenze
  • Costruito con dattiloscritto / fornito con definizioni dattiloscritte
  • Si integra bene con altre librerie
  • Regola automaticamente il posizionamento del tuo livello per adattarlo allo schermo
  • Funziona con contenitori di scorrimento annidati
  • Osserva e reagisce ai cambiamenti nelle dimensioni

Dimostrazione dal vivo: https://www.react-laag.com/

Visualizza su GitHub

3. Menu contestuale ereditabile React

Componente del menu contestuale semplice per reagire mostrando tutti i menu principali ereditati con compatibilità SSR.

Menu contestuale Reagisci ereditabile

Perché un altro menu contestuale?
Perché nessuno di quelli esistenti ha soddisfatto i miei requisiti:

  • Possibilità di ereditare e includere menu contestuali dei genitori
  • Possibilità di visualizzare le voci di menu in base all'evento del browser
  • Rendi i menu appena in tempo
  • Semplice da usare
  • Semplice da animare con css
  • Non rompere SSR

Visualizza su GitHub

4.Menu dati reazione

Allineamento basato su suggerimenti con renderer e factory personalizzati.

Mai tagliato da altri componenti o bordi dello schermo.

video

Visualizza su GitHub

5. Reagisci menu ad albero semplice

Ispirato da Downshift, un componente React Tree Menu semplice, guidato dai dati e leggero che:

Menu Reagisci ad albero semplice

  • non dipende da alcun framework dell'interfaccia utente
  • completamente personalizzabile con oggetti di rendering e oggetti di controllo
  • consente la ricerca

Dimostrazione dal vivo: https://iannbing.github.io/react-simple-tree-menu/?path=/story/treemenu--default-usage
Visualizza su GitHub

6.Pulsante del menu Reagisci Aria

Un componente React che ti aiuterà a creare un pulsante di menu accessibile
Un componente React (insieme di componenti, in realtà) che ti aiuterà a creare pulsanti di menu accessibili fornendo interazioni da tastiera e attributi ARIA allineati con il WAI-ARIA Menu Button Design Pattern.

Pulsante Menu Reagisci Aria

Dimostrazione dal vivo: https://davidtheclark.github.io/react-aria-menubutton/demo/

Visualizza su GitHub

7.Menù Cheeseburger

Questo componente fornisce solo il menu scorrevole, non il pulsante dell'hamburger. Per il tuo pulsante suggerirei di reagire-hamburger-menu.
Menu Cheeseburger

Dimostrazione
https://codesandbox.io/s/qxL744Qx2

Visualizza su GitHub

8.Elenco menu Reazione

Questo progetto è un insieme di componenti per la creazione di menu con. Questo progetto funziona bene per i menu a discesa e di completamento automatico. I menu sono correttamente accessibili dalla tastiera e include lucidi come i menu delle applicazioni desktop consolidati hanno come sottomenu ben educati che rimangono aperti anche se l'utente sposta brevemente il mouse su altre voci di menu mentre si sposta verso il menu a discesa del sottomenu.

Elenco menu Reagisci

Questo progetto differisce da altri progetti simili perché consente la presenza di elementi arbitrari nel menu, inclusa la possibilità di nidificare le voci di menu in altri elementi e consente voci di menu personalizzate che prendono il controllo del cursore.

Questo progetto non include molti stili CSS per i menu. Devi portare il tuo CSS. Questo rende questo progetto ottimo per chi cerca di abbinare lo stile esistente della propria applicazione. È consigliabile che l'applicazione crei componenti wrapper attorno ai componenti di questo progetto che aggiungono il CSS dell'applicazione.

Visualizza su GitHub

come aggiungere github a linkedin

9. Menu a scorrimento orizzontale React

Componente del menu a scorrimento orizzontale per React
Questo è un componente del menu a scorrimento orizzontale per React. Il componente Menu ha una larghezza adattiva, basta impostare la larghezza per il contenitore padre. La larghezza degli articoli sarà determinata dagli stili CSS. Nota: non impostare il margine per l'involucro dell'articolo, utilizzare invece il riempimento. Può usare il margine per l'elemento elemento quelli che passi come oggetti di scena.

Per la navigazione puoi utilizzare le frecce, la rotellina del mouse o semplicemente trascinare gli elementi.

Componente restituisce la posizione degli elementi, l'elemento selezionato e l'evento clic dai callback.

Possibile posizione predefinita impostata e elemento selezionato all'inizializzazione.

Aggiungi una stella se ti piace il progetto :)
Menu a scorrimento orizzontale Reagisci

Demo su Codesandbox

Visualizza su GitHub

10.Menu a tendina React Bootstrap

Un semplice menu a discesa per React, con il trigger dell'icona Bootstrap. Un semplice menu a discesa per React. Comunemente utilizzato come menu 'Impostazioni utente' sui siti Web in cui gli utenti accedono.

Menu a discesa React Bootstrap

Visualizza su GitHub

11.Menu Reagisci all'infinito

Un componente di reazione che mostra un menu profondo illimitato
Menu Reagisci all'Infinito

**Dimostrazione dal vivo: ** http://socialtables.github.io/react-infinity-menu/

Visualizza su GitHub

12. Reagire Contestualizzare

Aggiungi facilmente un menu di scelta rapida alla tua app di reazione. Un menu contestuale dichiarativo per React!

Reagire Contestualizzare

Visualizza su GitHub

13. Cassetto React Motion

Cassetto di navigazione costruito con il fantastico react-motion di @chenglou e react-hammerjs di @JedWatson

Cassetto React Motion

Visualizza su GitHub

14. Menu Reagisci Push

reagisci menu push multi livello

Reagisci Spingi Menu

Visualizza su GitHub

15. Menu Reagisci Metis

Un componente di menu pronto all'uso per React. Un componente di menu pronto / semplice da usare, altamente personalizzabile, aggiornabile, supportato da ajax, animato e progettato per materiali per React
Menu Reagisci Metis

Dimostrazione dal vivo https://alpertuna.github.io/react-metismenu/

Visualizza su GitHub

16.Menu fuori tela per React

Menu fuori tela per React
Menu fuori tela per React

Dimostrazione dal vivo http://vutran.github.io/react-offcanvas/

Visualizza su GitHub

17. Barra laterale Reagisci 2.3

React Sidebar è un componente della barra laterale per React 0.14+. Offre le seguenti caratteristiche:

Reagire barra laterale 2.3

  • La barra laterale può scorrere sul contenuto principale o agganciarsi accanto ad esso.
  • Tocco abilitato: scorri per aprire e chiudere la barra laterale come su un'app mobile nativa.
  • Facile da combinare con le query multimediali per mostrare la barra laterale solo quando la larghezza dello schermo è sufficiente (vedi esempio).
  • Funziona sia a sinistra che a destra.
  • Piccole dimensioni:<2.5kB gzipped
  • Licenza MIT

Visualizza su GitHub

18. Menu Burger Reagisci

Un componente React della barra laterale fuori dalla tela con una raccolta di effetti e stili che utilizzano transizioni CSS e animazioni del percorso SVG.
Usando Redux? Dai un'occhiata a redux-burger-menu per una facile integrazione di react-burger-menu nel tuo progetto.

Menu Burger Reagisci

Dimostrazione dal vivo http://negomi.github.io/react-burger-menu/

Visualizza su GitHub

19. Menu a tendina nativo React

Un componente per react-native ( iOS ). Facile da usare. Un componente per reagire-nativo.It è molto facile da usare.

Menu a discesa Reagisci nativo

Visualizza su GitHub

come acquistare axion

#reactjs #javascript