App-Dokumentations-Widget - React

wir haben einige der vorteile der kontextbezogenen dokumentation docid\ kaktzkspgot5omqceohl3 bereits im vorherigen kapitel erklärt diese anleitung 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 weltraum im editor aus klicken sie auf das zahnrad symbol (⚙️), um zu den einstellungen zu gelangen gehen sie zu widget integration klicken sie auf den react tab und dann auf die kopier schaltfläche und fügen sie den code in ihre tsx/ jsx datei ein nun übernimmt das widget alles hinter den kulissen keine sorge, alles ist gebündelt und minimiert es ist ein download von nur 56kb und wird asynchron geladen, sodass ihre benutzer keinen unterschied bemerken werden komponenten props eigenschaft typ erforderlich beschreibung spaceid zeichenkette erforderlich übergeben sie die gewünschte id, um ihre dokumente zu laden docid zeichenkette optional das dokument, in dem sie die widget dokumentation öffnen möchten wenn docid übergeben wird, wird widgettyp ignoriert es wird unabhängig von der übergebenen eigenschaft im dokumente modus geöffnet shareabletoken zeichenkette optional übergeben sie das shareabletoken aus ihren privaten links, um ihre dokumente zu schützen classname zeichenkette optional übergeben sie css klassen an den div wrapper widgettyp 'docs' | 'suche' optional der standardwert ist dokumente damit wird das widget mit dem gewünschten verhalten geöffnet dokumente öffnet das widget mit dem standardverhalten, suche öffnet eine such widget leiste, die eine suchleiste mit ki unterstützung anzeigt (falls in ihrem abonnement enthalten) hidenavbar boolean optional zeigt oder verbirgt die obere navigationsleiste im widget modal standardmäßig ist die navigationsleiste sichtbar wenn sie die navigationsleiste nicht sehen möchten, übergeben sie den wert wahr , andernfalls lassen sie diese eigenschaft einfach weg loadingstrategy 'eifrig' | 'träge' optional der standardwert ist faul ladestrategiemethode für das laden des widgets blase unsichtbar | fragen optional der standardwert ist unsichtbar wenn auf fragen gesetzt, wird unten rechts auf ihrem bildschirm eine blase angezeigt wann immer jemand darauf klickt, öffnet sich das such widget bubbleplaceholder zeichenkette optional der platzhalter, der im bubble bereich angezeigt wird wenn nicht übergeben, wird ein standardwert von eine frage stellen angezeigt anker zeichenkette optional sie können ihre klasse , id oder pfad zu einem dom element angeben, an dem das widget verankert und instanziiert werden soll es wird an das erste element im dom verankert, wenn mehrere elemente mit demselben pfad vorhanden sind der angegebene container sollte position relative besitzen, da das widget basierend auf dem ersten relativ elternteil angezeigt wird z b anker "#my container" / anker " container class" onwidgetopen leer optional callback, das aufgerufen wird, nachdem das widget geöffnet wurde onwidgetclose leer optional callback, das aufgerufen wird, nachdem das widget geschlossen wurde freigabefähige tokens sind im scaling plan https //www archbee com/pricing verfügbar lesen sie mehr über kontrollen für öffentlichen zugriff docid\ lx0x8z ikcde5v6tshjkz ref methoden wenn ref nicht an archbeeappwidget übergeben wird, öffnen kinder beim anklicken automatisch das modale pop up eigenschaft typ beschreibung offen methode öffnet das widget programmgesteuert schließen methode schließt das widget programmgesteuert instanz methode gibt die instanz des widgets zurück