App-dokumentasie-legstuk - React

4 min

Ons het reeds sommige van die voordele van kontekstuele dokumentasie in die vorige hoofstuk verduidelik. Hierdie gids dien as ’n alternatief vir React- en NextJS-toepassings om die Archbee-app-widget op ’n meer elegante manier te integreer.

Installeer ons npm-pakket:

# met npm
$ npm install --save @archbee/app-widget

# of met yarn
$ yarn add @archbee/app-widget

Wanneer die pakket geïnstalleer is, gaan na u jsx/tsx-lêer en instansieer die komponent:

import React from 'react';
import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget'

function App() {
const widgetRef = useRef<AbWidgetRef>(null);

  return (
    <div>
        <ArchbeeAppWidget
            ref={widgetRef}
            spaceId={ /** gepubliseerde space-id **/ }
            onWidgetOpen={() => { /** ... **/ }} // terugroepfunksie wat geroep word nadat widget oopgemaak is
            onWidgetClose={() => { /** ... **/ }} // terugroepfunksie wat geroep word nadat widget oopgemaak is
      >
        <button type='button' onClick={() => {
        <!-- Maak widget oop -->
            widgetRef.current?.open();
        }}>
          Open
        </button>
        
        <button type='button' onClick={() => {
        <!-- Maak widget toe -->
            widgetRef.current?.close();
        }}>
          Close
        </button>
        
        <button type='button' onClick={() => {
        <!-- Kry die instansie van die widget indien nodig vir verskeie gebeurtenismanipulasies. -->
            widgetRef.current?.instance();
        }}>
          Get widget instance
        </button>
      </ArchbeeAppWidget>
    </div>
  );
}

U kan ook na die inligting verwys vanaf Spasie-instellings:

Kies u Ruimte binne die redigeerder.
Klik op die ratikoon (⚙️) om na Settings te gaan.
Gaan na Widget-integrasie.
Klik op die React-oortjie en dan op die kopieerknoppie, en plak die kode in u .tsx/.jsx-lêer

Nou sal die widget alles agter die skerms hanteer. Moenie bekommerd wees nie, alles is gebundel en geminifiseer. Dit is slegs ’n 56Kb-aflaai en dit laai asynchroon, so u gebruikers sal nie ’n verskil opmerk nie.

Komponent-eienskappe

Eienskap	Tipe	Vereis	Beskrywing
spaceId	string	vereis	Gee die verlangde id deur om u docs te laai.
docId	string	opsioneel	Die doc waar u die widget docs wil oopmaak. Indien docId deurgegee word, word widgetType geïgnoreer; dit sal in dokumente-modus oopmaak ongeag die prop wat deurgegee is.
deelbareToken	string	opsioneel	Gee die shareableToken van u private skakels deur om u docs te beskerm.
className	string	opsioneel	Gee CSS-klasse deur aan die div-omhulsel.
widgetType	'dokumente' \| 'soek'	opsioneel	Die verstekwaarde is dokumente. Dit maak die widget met die verlangde gedrag oop. dokumente-tipe sal die widget met die verstekgedrag oopmaak, soek sal 'n soek-widgetbalk oopmaak wat 'n soekbalk met AI-ondersteuning wys (indien dit by u intekening ingesluit is).
versteekNavigasiebalk	boolese	opsioneel	Dit wys of versteek die boonste navigasiebalk van die widget-modal. By verstek is die navigasiebalk sigbaar. Indien u nie die navigasiebalk wil sien nie, gee dit deur met die waar-waarde, anders slaan dit net oor.
laaiStrategie	'gretig' \| 'lui'	opsioneel	Verstekwaarde is lui. Laaistrategie-metode vir widget-laai.
borrel	onsigbaar \| vra	opsioneel	Die verstekwaarde is onsigbaar. Indien gestel op vra, sal dit 'n borrel regs onder op u skerm vertoon. Wanneer iemand daarop klik, sal die soek-widget oopmaak.
bubblePlaceholder	string	opsioneel	Die plekhouer wat in die borrelafdeling vertoon sal word. Indien nie deurgegee nie, sal 'n verstekwaarde van Vra ’n vraag vertoon word.
anker	string	opsioneel	U kan u klas, id of pad verskaf vir 'n DOM-element waar u die widget wil anker en instansieer. Dit sal anker aan die eerste element wat in die DOM gevind word indien veelvuldige elemente met dieselfde path teenwoordig is. Die houer wat verskaf word, moet position: relative hê aangesien die widget vertoon sal word gebaseer op die eerste relatief ouer wat gevind word. bv.: anchor: "#my-container" / anchor: ".container-class"
onWidgetOpen	leegte	opsioneel	Terugroepfunksie wat geroep word nadat die widget oopmaak.
onWidgetClose	leegte	opsioneel	Terugroepfunksie wat geroep word nadat die widget toemaak.

Deelbare tokens is beskikbaar in die Skaalplan. Lees meer oor Openbare toegangskontrolesPublic Access Controls.

Ref-metodes

Indien ref nie aan ArchbeeAppWidget deurgegee word nie, sal child-elements die modale opspringvenster outomaties oopmaak nadat daarop geklik is.

Eienskap	Tipe	Beskrywing
oop	metode	Maak die widget programmaties oop.
maak toe	metode	Maak die widget programmaties toe.
instansie	metode	Gee die instansie van die widget terug.

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.

App-dokumentasie-legstuk - React

Integreer app-widget

Komponent-eienskappe

Ref-metodes