Ví dụ tích hợp framework

Mọi cách tích hợp đều tuân theo một quy tắc: đăng ký Orbz một lần trong mã trình duyệt, sau đó hiển thị và điều khiển trực tiếp phần tử tùy chỉnh <orb-z>. Gói không bao gồm bộ điều hợp riêng cho framework.

JavaScript thuần


import "@neongate-ai/orbz/browser";
import type { OrbzElement } from "@neongate-ai/orbz";
 
const orb = document.querySelector<OrbzElement>("orb-z");
if (orb) orb.state = "listening";


<orb-z state="idle" size="300px"></orb-z>

React


import "@neongate-ai/orbz/browser";
import { useState } from "react";
import type { OrbzState } from "@neongate-ai/orbz";
 
export function Assistant() {
  const [state, setState] = useState<OrbzState>("idle");
 
  return (
    <>
      <orb-z state={state} size="300px" />
      <button type="button" onClick={() => setState("listening")}>Listen</button>
    </>
  );
}

Khai báo orb-z trong React.JSX.IntrinsicElements như hướng dẫn trong tài liệu React và Next.js.

Next.js


"use client";
 
import "@neongate-ai/orbz/browser";
 
export function AssistantPresence() {
  return <orb-z state="thinking" size="300px" />;
}

Vue

Đăng ký trong điểm khởi đầu của ứng dụng và đánh dấu thẻ là phần tử tùy chỉnh trong cấu hình trình biên dịch Vue:


import "@neongate-ai/orbz/browser";
import { createApp } from "vue";
import App from "./App.vue";
 
createApp(App).mount("#app");


<orb-z :state="state" :size="`${size}px`" />

Svelte


import "@neongate-ai/orbz/browser";


<orb-z {state} size={`${size}px`}></orb-z>

Angular

Nhập mô-đun đăng ký trước khi khởi chạy ứng dụng và bật lược đồ phần tử tùy chỉnh:


import "@neongate-ai/orbz/browser";
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 
@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: "app-root",
  template: `<orb-z [attr.state]="state"></orb-z>`
})
export class AppComponent {
  state = "idle";
}

Các ví dụ trực tuyến giữ nguyên giao diện và bố cục trong khi dùng mô hình trạng thái gốc của từng framework.