8df5a22ad9
This PR adds an example that shows you how to make your dialogs pop outside of the Tldraw component and go fullscreen. Closes TLD-2191 ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Try out the "External dialog" example. 2. Open the keyboard shortcuts dialog (or any dialog). 3. The dialog should be centered in the browser window, not just the tldraw component. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Dev: Added an example for dialogs that go outside the component.
13 lines
303 B
TypeScript
13 lines
303 B
TypeScript
import { Tldraw } from '@tldraw/tldraw'
|
|
import '@tldraw/tldraw/tldraw.css'
|
|
|
|
// This CSS file overrides the default styles for dialogs
|
|
import './external-dialog.css'
|
|
|
|
export default function ExternalDialog() {
|
|
return (
|
|
<div style={{ margin: 32, width: 600, height: 400 }}>
|
|
<Tldraw />
|
|
</div>
|
|
)
|
|
}
|