App-Dokumentations-Widget – React

wir haben bereits einige der vorteile der kontextbezogenen dokumentation docid\ kaktzkspgot5omqceohl3 im vorherigen kapitel erklärt dieser leitfaden dient als alternative für react und nextjs apps, um das archbee app widget auf elegantere weise zu integrieren app widget integrieren installieren sie unser npm paket https //www npmjs com/package/@archbee/app widget # with npm $ npm install save @archbee/app widget \# or with yarn $ yarn add @archbee/app widget wenn das paket installiert ist, gehen sie zu ihrer jsx/tsx datei und instanziieren sie die komponente react import react from 'react'; import { archbeeappwidget, abwidgetref } from '@archbee/app widget' function app() { const widgetref = useref\<abwidgetref>(null); return ( \<div> \<archbeeappwidget ref={widgetref} spaceid={ / published space id / } onwidgetopen={() => { / / }} // callback function called after widget has open onwidgetclose={() => { / / }} // callback function called after widget has open \> \<button type='button' onclick={() => { \<! opens widget > widgetref current? open(); }}> open \</button> \<button type='button' onclick={() => { \<! closes widget > widgetref current? close(); }}> close \</button> \<button type='button' onclick={() => { \<! gets the instance of the widget if needed for various event manipulations > widgetref current? instance(); }}> get widget instance \</button> \</archbeeappwidget> \</div> ); } sie können die informationen auch aus den space einstellungen entnehmen wählen sie ihren space im editor aus klicken sie auf das zahnradsymbol (⚙️), um zu den einstellungen zu gelangen gehen sie zu widget integration klicken sie auf den tab react und anschließend auf die kopierschaltfläche und fügen sie den code in ihre tsx/ jsx datei ein jetzt übernimmt das widget alles im hintergrund keine sorge, alles ist gebündelt und minifiziert es ist ein lediglich 56kb großer download und wird asynchron geladen, sodass ihre nutzer keinen unterschied bemerken komponenten‑props eigenschaft typ erforderlich beschreibung spaceid zeichenkette erforderlich geben sie die gewünschte id an, um ihre dokumente zu laden docid zeichenkette optional das dokument, in dem sie die widget dokumentation öffnen möchten wenn docid übergeben wird, wird widgettype ignoriert und es wird im docs modus geöffnet, unabhängig von der übergebenen eigenschaft shareabletoken zeichenkette optional übergeben sie das shareabletoken aus ihren privaten links, um ihre dokumente zu schützen classname zeichenkette optional css klassen an den div wrapper übergeben widgettype 'docs' | 'search' optional der standardwert ist docs dies öffnet das widget mit dem gewünschten verhalten der typ docs öffnet das widget mit dem standardverhalten, search öffnet eine suchleiste mit ki unterstützung (falls im abonnement enthalten) hidenavbar boolean optional blendet die obere navigationsleiste des widget modals ein oder aus standardmäßig ist die navigationsleiste sichtbar wenn sie sie nicht sehen möchten, übergeben sie den wert true , andernfalls lassen sie es einfach weg loadingstrategy 'eager' | 'lazy' optional der standardwert ist lazy ladestrategie für das widget bubble unsichtbar | fragen optional der standardwert ist unsichtbar wenn auf fragen gesetzt, wird unten rechts auf dem bildschirm eine blase angezeigt wenn jemand darauf klickt, öffnet sich das such widget bubbleplaceholder zeichenkette optional der platzhalter, der im blasenbereich angezeigt wird wenn er nicht übergeben wird, wird der standardwert eine frage stellen angezeigt anchor zeichenkette optional sie können eine class , id oder einen path zu einem dom element angeben, an dem das widget verankert und instanziiert werden soll es wird am ersten gefundenen element im dom verankert, falls mehrere elemente mit demselben pfad vorhanden sind der bereitgestellte container sollte position relative besitzen, da das widget basierend auf dem ersten relativen elternelement angezeigt wird z b anchor "#my container" / anchor " container class" onwidgetopen void optional callback, das aufgerufen wird, nachdem das widget geöffnet wurde onwidgetclose void optional callback, das aufgerufen wird, nachdem das widget geschlossen wurde freigabefähige tokens sind verfügbar im scaling‑plan https //www archbee com/pricing lesen sie mehr über öffentliche zugriffskontrollen docid\ lx0x8z ikcde5v6tshjkz ref‑methoden wenn ref nicht an archbeeappwidget übergeben wird, öffnen kinder automatisch das modal‑pop‑up, nachdem sie angeklickt wurden eigenschaft typ beschreibung öffnen methode öffnet das widget programmatisch schließen methode schließt das widget programmatisch instanz methode gibt die instanz des widgets zurück