Tài liệu

Workspace card

card là UI gọn của app trong vùng assistant của workspace. Nó không nhận card-specific props; dùng platform hooks cho context, data và actions.

YAML
contributes:
  ui:
    - id: reports-card
      kind: nativeModule
      surface: card
      slot: workspace.assistant-card
      module:
        entry: dist/ui/app.js
        export: ReportsCard
TSX
import { useAppContext } from '@sota/platform';

export function ReportsCard() {
  const { ui } = useAppContext();
  return (
    <section aria-label="Reports">
      <p>Three reports need review.</p>
      <button type="button" onClick={() => ui.openArtifact('reports.viewer', {
        filter: 'needs-review',
      })}>Review</button>
    </section>
  );
}

Hãy responsive theo host thay vì giả định kích thước trang. Dùng workspace page hoặc artifact khi cần canvas lớn.

Mục lục

Esc

Tìm theo tiêu đề và nội dung trong mọi chương.