bcf6ef63ad
Some checks failed
📦 Build / build (push) Has been cancelled
🧪 CI Test / test shard (1/4) (push) Has been cancelled
🧪 CI Test / test shard (2/4) (push) Has been cancelled
🧪 CI Test / test shard (3/4) (push) Has been cancelled
🧪 CI Test / test shard (4/4) (push) Has been cancelled
🧪 CI Test / test (push) Has been cancelled
🧪 CI Test / eslint (push) Has been cancelled
🧪 CI Test / typecheck (push) Has been cancelled
🔫 Sync to Pro / dispatch-sync (push) Has been cancelled
🔮 Sync Mirror / sync (push) Has been cancelled
50 lines
1.8 KiB
Markdown
50 lines
1.8 KiB
Markdown
# @univerjs/ui-adapter-web-component
|
|
|
|
[](https://npmjs.com/package/@univerjs/ui-adapter-web-component)
|
|
[](https://npmjs.com/package/@univerjs/ui-adapter-web-component)
|
|
[](https://npmjs.com/package/@univerjs/ui-adapter-web-component)
|
|
|
|
`@univerjs/ui-adapter-web-component` adapts Univer UI services for Web Component integrations.
|
|
|
|
## Package Overview
|
|
|
|
| Package | UMD global | CSS | Locales | Facade entry |
|
|
| --- | --- | :---: | :---: | :---: |
|
|
| `@univerjs/ui-adapter-web-component` | `UniverUiAdapterWebComponent` | No | No | No |
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
pnpm add @univerjs/ui-adapter-web-component
|
|
# or
|
|
npm install @univerjs/ui-adapter-web-component
|
|
```
|
|
|
|
Keep all `@univerjs/*` packages on the same version.
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
import { UniverWebComponentAdapterPlugin } from '@univerjs/ui-adapter-web-component';
|
|
|
|
univer.registerPlugin(UniverWebComponentAdapterPlugin);
|
|
```
|
|
|
|
Register custom elements with the `web-component` framework option. Runtime props are assigned to the created element as DOM properties, which supports object values such as `data` and `extraProps`.
|
|
|
|
```ts
|
|
class MyPopup extends HTMLElement {
|
|
set data(value: { label?: string } | undefined) {
|
|
this.textContent = value?.label ?? '';
|
|
}
|
|
}
|
|
|
|
univerAPI.registerComponent('my-popup', MyPopup, { framework: 'web-component' });
|
|
```
|
|
|
|
## Resources
|
|
|
|
- [Documentation](https://docs.univer.ai)
|
|
- [NPM package](https://npmjs.com/package/@univerjs/ui-adapter-web-component)
|
|
- [GitHub repository](https://github.com/dream-num/univer)
|