Horizontal scrollende Menükomponente für React

Blog

Horizontal scrollende Menükomponente für React

Reagieren Sie horizontal scrollendes Menü

Beispiel



Demo

Demo auf Codesandbox



Dies ist eine horizontal scrollende Menükomponente für React. Die Menükomponente hat eine adaptive Breite, legen Sie einfach die Breite für den übergeordneten Container fest. Die Breite der Elemente wird von CSS-Stilen bestimmt.

Notiz : Sie haben nicht viel Zeit für ein Support-Projekt. Jede Hilfe wird geschätzt.



Zur Navigation können Sie Pfeile, Mausrad verwenden oder einfach Elemente ziehen.

Position von Komponentenrückgabeelementen, ausgewähltes Element und Klickereignis von Rückrufen.

Mögliche eingestellte Standardposition und ausgewähltes Element bei der Initialisierung.

Fügen Sie einen Stern hinzu, wenn Sie das Projekt mögen :)

wo kann man wabi kaufen

Schnellstart

source-shell npm install --save react-horizontal-scrolling-menu

Im Projekt:

source-js import React, { Component } from 'react'; import ScrollMenu from 'react-horizontal-scrolling-menu'; import './App.css'; // list of items const list = [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' }, { name: 'item4' }, { name: 'item5' }, { name: 'item6' }, { name: 'item7' }, { name: 'item8' }, { name: 'item9' } ]; // One item component // selected prop will be passed const MenuItem = ({text, selected}) => { return {text} ; }; // All items component // Important! add unique key export const Menu = (list, selected) => list.map(el => { const {name} = el; return ; }); const Arrow = ({ text, className }) => { return ( {text} ); }; const ArrowLeft = Arrow({ text: '', className: 'arrow-next' }); const selected = 'item1'; class App extends Component { constructor(props) { super(props); // call it again if items count changes this.menuItems = Menu(list, selected); } state = { selected }; onSelect = key => { this.setState({ selected: key }); } render() { const { selected } = this.state; // Create menu from items const menu = this.menuItems; return ( ); } }

In App.css

source-css-scss .menu-item { padding: 0 40px; margin: 5px 10px; user-select: none; cursor: pointer; border: none; } .menu-item-wrapper.active { border: 1px blue solid; } .menu-item.active { border: 1px green solid; } .scroll-menu-arrow { padding: 20px; cursor: pointer; }

Beispiel

Sie können das Repository klonen und das Demoprojekt ausführen von Beispiele Mappe.

git clone https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu cd react-horizontal-scrolling-menu/examples npm install npm run start

Dinge programmatisch ändern

Sie können über |_+_| . nach links/rechts scrollen und |_+_| Funktionen.

Python Merge-Listen zu einer

Kann andere Eigenschaften im Komponentenstatus abrufen - |_+_|

Kann Klick simulieren mit |_+_|

Kann mit |_+_| . ein Element auswählen und blättern

Fallstricke

  • Menüelemente müssen eine Breite haben, wenn Elemente Bilder enthalten und Bilder noch nicht geladen werden, kann dies problematisch sein. Im Allgemeinen versucht die Komponente, die Breite der Elemente zu bestimmen, wenn dies nicht möglich ist, können Sie der Komponente ref zuweisen und $ref.setInitial() manuell aufrufen, wenn die Elemente mit Sicherheit eine Breite haben.

  • Browser muss unterstützen AnfrageAnimationFrame oder Polyfill verwenden.

  • Es kann im IE nicht funktionieren, und es ist mir egal, ich bin kein Nekrophiler. (Wenn Sie es brauchen, können Sie PR machen, ich werde zusammenführen)

Über

Mein erstes NPM-Projekt. Entschuldigung für mein Englisch.

Jeder Beitrag und jede Korrektur geschätzt. Einfach Repo forken, Commit und PR machen, Tests nicht vergessen.

So drucken Sie eine Methode aus einer anderen Klasse in Java

Beitragen

1 Fork das Repo:

  • Lauf |_+_| im Stammordner
  • Im Stammordner ausführen |_+_|
  • Gehe zum Beispielprojektordner (Beispiele)
  • Lauf |_+_|
  • Lauf |_+_| im Stammordner und danach in Beispielordnern

2 Code schreiben! Fügen Sie eine Funktion hinzu oder beheben Sie einen Fehler.

3 Überprüfen Sie, ob alle Tests bestanden sind, und fügen Sie Tests für Ihren Code hinzu.

  • Sie können |_+_| . verwenden für Lauftests im Watch-Modus

4 Readme und Beispiel aktualisieren (falls erforderlich)

5 Machen Sie Commit und Pull Request

GitHub

Autor: asmyshlyaev177

GitHub: https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu

#reactjs #javascript