Archbee 重现组件部件

目录

• 安装
• API 文档
• 实例

安装

要安装、使用 小时数字 :

$ pnpm add @archbee/app-widget

如果您需要安装Archbee Control Widget SDK, 您可以找到更多细节 这里。 。 。 .

API 文档

Archbee React 组件部件的主要文档可见于 文档,它描述了API 并举例说明其用法.

实例

以下是Archbee React 部件在应用程序中使用的简单例子

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

function App() {
  return (
    <div>
      <ArchbeeAppWidget
        spaceId={/** published space id **/}
        onWidgetOpen={() => {
          /** ... **/
        }} // callback function called after widget has open
        // onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open
      >
        <button type="button">Open</button>
      </ArchbeeAppWidget>
    </div>
  )
}

ReactDOM.render(<App />, appElement)

也可以采用比较有方案的办法:

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>
  );
}

ReactDOM.render(<App />, appElement);

组件道具

泡泡声

使用 bubble 要浏览整个文档,请选择一个简单的搜索按钮.

查找方法

若为 ref 未转至 ArchbeeAppWidget时,孩子会自动打开模式弹出.

演示文稿

下面是演示设置 代码框,哪个 展示出拱蜂应用的各种特征:

• 演示