𝗜𝗰𝗵 𝗵𝗮𝗯𝗲 𝗱𝗮𝘀 𝗦𝗹𝗮𝘀𝗵-𝗠𝗲𝗻ü 𝘃𝗼𝗻 𝗡𝗼𝘁𝗶𝗼𝗻 𝗶𝗻 𝟳𝟬 𝗭𝗲𝗶𝗹𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗻𝗮𝗰𝗵𝗴𝗲𝗯𝗮𝘂𝘁
Notion fühlt sich wie Magie an. Man tippt einen Schrägstrich und ein Menü erscheint. Man wählt eine Option aus und der Text verwandelt sich.
Ich habe dieses Feature mit 70 Zeilen Vanilla JavaScript nachgebaut. Die Magie dahinter ist einfache Logik.
Tag 9 meiner DesignFromZero-Serie konzentriert sich auf berühmte UIs. Ich baue diese Tools von Grund auf neu nach, um sie zu verstehen.
Die Logik basiert auf drei Teilen:
- Datenmodelle: Ein Dokument ist eine Liste von Blöcken. Jeder Block enthält ein Datenstück. Dies ist sein Typ.
- Der Trigger: Jedes Mal, wenn man tippt, prüft der Code den Text. Wenn der Text mit einem Schrägstrich beginnt, öffnet sich das Menü.
- Der Filter: Das Menü verwendet Schlüsselwörter, um Befehle zu finden. Ein Befehl wie Heading 1 könnte Schlüsselwörter wie h1 oder title haben. Das lässt die Suche intelligent wirken.
Der Code nutzt einen einfachen Trick für die Navigation. Die Verwendung des Modulo-Operators ermöglicht es, die Pfeiltasten zu nutzen, um durch die Liste zu navigieren. Die Auswahl springt vom Ende der Liste wieder zurück zum Anfang.
Wenn man Enter drückt, führt der Code zwei Aufgaben aus:
- Er aktualisiert den Blocktyp in den Daten. CSS übernimmt dann die visuelle Änderung.
- Er löscht den Schrägstrich und den Befehlstext.
Komplexe Funktionen haben oft einfache Grundlagen. Ein Slash-Menü ist einfach nur Daten plus eine Präfix-Prüfung und einen Typenwechsel.
Probiere die Live-Demo hier aus: https://dev48v.infy.uk/design/day9-notion-slash.html
Lies die vollständige Analyse hier: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i