kopia lustrzana https://github.com/Tldraw/Tldraw
39 wiersze
1.1 KiB
Markdown
39 wiersze
1.1 KiB
Markdown
---
|
|
title: User Interface
|
|
status: published
|
|
author: steveruizok
|
|
date: 3/22/2023
|
|
order: 8
|
|
keywords:
|
|
- ui
|
|
- interface
|
|
- tools
|
|
- shapes
|
|
- custom
|
|
- button
|
|
- toolbar
|
|
- styles
|
|
---
|
|
|
|
## Events
|
|
|
|
The `<Tldraw>` component has a prop, `onUiEvent`, that the user interface will call when certain events occur.
|
|
|
|
```tsx
|
|
function Example() {
|
|
function handleEvent(name, data) {
|
|
// do something with the event
|
|
}
|
|
|
|
return (
|
|
<Tldraw onUiEvent={handleEvent}/>
|
|
)
|
|
}
|
|
```
|
|
|
|
The `onUiEvent` callback is called with the name of the event as a string and an object with information about the event's source (e.g. `menu` or `context-menu`) and possibly other data specific to each event, such as the direction in an `align-shapes` event.
|
|
|
|
Note that `onUiEvent` is only called when interacting with the user interface. It is not called when running commands manually against the app, e.g. `editor.alignShapes()` will not call `onUiEvent`.
|
|
|
|
See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for an example of how to customize tldraw's user interface.
|