Make the custom menu examples a bit clearer (#3106)
Use the Readme and bg color of elements to make it clearer which menu is being customised. - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a brief release note for your PR here.
This commit is contained in:
Taha
GitHub
parent
dba6d4c414
commit
8d02df8712
20 changed files with 136 additions and 97 deletions
|
|
@ -1,10 +1,29 @@
|
||||||
import { DefaultActionsMenu, TLComponents, Tldraw } from 'tldraw'
|
import {
|
||||||
|
DefaultActionsMenu,
|
||||||
|
DefaultActionsMenuContent,
|
||||||
|
TLComponents,
|
||||||
|
Tldraw,
|
||||||
|
TldrawUiMenuItem,
|
||||||
|
} from 'tldraw'
|
||||||
import 'tldraw/tldraw.css'
|
import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
function CustomActionsMenu() {
|
function CustomActionsMenu() {
|
||||||
return (
|
return (
|
||||||
<div style={{ transform: 'rotate(90deg)' }}>
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
<DefaultActionsMenu />
|
<DefaultActionsMenu>
|
||||||
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
|
<TldrawUiMenuItem
|
||||||
|
id="like"
|
||||||
|
label="Like my posts"
|
||||||
|
icon="external-link"
|
||||||
|
readonlyOk
|
||||||
|
onSelect={() => {
|
||||||
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DefaultActionsMenuContent />
|
||||||
|
</DefaultActionsMenu>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's actions menu.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
The actions menu is a dropdown menu that can be found in the top-left of the tldraw component, or just above the toolbar on smaller screens. It contains actions related to editing shapes such as grouping, rotating or changing shape order. The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
||||||
|
|
|
||||||
|
|
@ -13,15 +13,17 @@ function CustomContextMenu(props: TLUiContextMenuProps) {
|
||||||
return (
|
return (
|
||||||
<DefaultContextMenu {...props}>
|
<DefaultContextMenu {...props}>
|
||||||
<TldrawUiMenuGroup id="example">
|
<TldrawUiMenuGroup id="example">
|
||||||
<TldrawUiMenuItem
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
id="like"
|
<TldrawUiMenuItem
|
||||||
label="Like my posts"
|
id="like"
|
||||||
icon="external-link"
|
label="Like my posts"
|
||||||
readonlyOk
|
icon="external-link"
|
||||||
onSelect={() => {
|
readonlyOk
|
||||||
window.open('https://x.com/tldraw', '_blank')
|
onSelect={() => {
|
||||||
}}
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</TldrawUiMenuGroup>
|
</TldrawUiMenuGroup>
|
||||||
<DefaultContextMenuContent />
|
<DefaultContextMenuContent />
|
||||||
</DefaultContextMenu>
|
</DefaultContextMenu>
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's context menu.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The context menu can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
Create some shapes, select them and right click the selection to see the custom context menu. It can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
||||||
|
|
|
||||||
|
|
@ -10,20 +10,24 @@ import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
function CustomDebugMenu() {
|
function CustomDebugMenu() {
|
||||||
return (
|
return (
|
||||||
<DefaultDebugMenu>
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
<DefaultDebugMenuContent />
|
<DefaultDebugMenu>
|
||||||
<TldrawUiMenuGroup id="example">
|
<DefaultDebugMenuContent />
|
||||||
<TldrawUiMenuItem
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
id="like"
|
<TldrawUiMenuGroup id="example">
|
||||||
label="Like my posts"
|
<TldrawUiMenuItem
|
||||||
icon="external-link"
|
id="like"
|
||||||
readonlyOk
|
label="Like my posts"
|
||||||
onSelect={() => {
|
icon="external-link"
|
||||||
window.open('https://x.com/tldraw', '_blank')
|
readonlyOk
|
||||||
}}
|
onSelect={() => {
|
||||||
/>
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
</TldrawUiMenuGroup>
|
}}
|
||||||
</DefaultDebugMenu>
|
/>
|
||||||
|
</TldrawUiMenuGroup>
|
||||||
|
</div>
|
||||||
|
</DefaultDebugMenu>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's debug menu.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The help menu can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
The debug menu contains helpful menu items for debugging the tldraw component. To show the debug menu, turn on debug mode in the preferences. It can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
||||||
|
|
|
||||||
|
|
@ -11,17 +11,19 @@ import 'tldraw/tldraw.css'
|
||||||
function CustomHelpMenu() {
|
function CustomHelpMenu() {
|
||||||
return (
|
return (
|
||||||
<DefaultHelpMenu>
|
<DefaultHelpMenu>
|
||||||
<TldrawUiMenuGroup id="example">
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
<TldrawUiMenuItem
|
<TldrawUiMenuGroup id="example">
|
||||||
id="like"
|
<TldrawUiMenuItem
|
||||||
label="Like my posts"
|
id="like"
|
||||||
icon="external-link"
|
label="Like my posts"
|
||||||
readonlyOk
|
icon="external-link"
|
||||||
onSelect={() => {
|
readonlyOk
|
||||||
window.open('https://x.com/tldraw', '_blank')
|
onSelect={() => {
|
||||||
}}
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
/>
|
}}
|
||||||
</TldrawUiMenuGroup>
|
/>
|
||||||
|
</TldrawUiMenuGroup>
|
||||||
|
</div>
|
||||||
<DefaultHelpMenuContent />
|
<DefaultHelpMenuContent />
|
||||||
</DefaultHelpMenu>
|
</DefaultHelpMenu>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's help menu.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
The help menu contains options for opening the keyboard shortcuts dialog and changing the language. It can be opened by clicking on the help icon in the bottom right of the screen at larger breakpoints. The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
||||||
|
|
|
||||||
|
|
@ -11,16 +11,18 @@ import 'tldraw/tldraw.css'
|
||||||
function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) {
|
function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) {
|
||||||
return (
|
return (
|
||||||
<DefaultKeyboardShortcutsDialog {...props}>
|
<DefaultKeyboardShortcutsDialog {...props}>
|
||||||
<TldrawUiMenuItem
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
id="like-my-posts"
|
<TldrawUiMenuItem
|
||||||
label="Like my posts"
|
id="like-my-posts"
|
||||||
icon="external-link"
|
label="Like my posts"
|
||||||
readonlyOk
|
icon="external-link"
|
||||||
kbd=":)"
|
readonlyOk
|
||||||
onSelect={() => {
|
kbd=":)"
|
||||||
window.open('https://x.com/tldraw', '_blank')
|
onSelect={() => {
|
||||||
}}
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<DefaultKeyboardShortcutsDialogContent />
|
<DefaultKeyboardShortcutsDialogContent />
|
||||||
</DefaultKeyboardShortcutsDialog>
|
</DefaultKeyboardShortcutsDialog>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's keyboard shortcuts dialog.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The keyboard shortcuts dialog can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
The keyboard shortcuts dialog can be opened via the help menu in the bottom right corner of the tldraw component. It can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
||||||
|
|
|
||||||
|
|
@ -11,17 +11,19 @@ import 'tldraw/tldraw.css'
|
||||||
function CustomMainMenu() {
|
function CustomMainMenu() {
|
||||||
return (
|
return (
|
||||||
<DefaultMainMenu>
|
<DefaultMainMenu>
|
||||||
<TldrawUiMenuGroup id="example">
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
<TldrawUiMenuItem
|
<TldrawUiMenuGroup id="example">
|
||||||
id="like"
|
<TldrawUiMenuItem
|
||||||
label="Like my posts"
|
id="like"
|
||||||
icon="external-link"
|
label="Like my posts"
|
||||||
readonlyOk
|
icon="external-link"
|
||||||
onSelect={() => {
|
readonlyOk
|
||||||
window.open('https://x.com/tldraw', '_blank')
|
onSelect={() => {
|
||||||
}}
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
/>
|
}}
|
||||||
</TldrawUiMenuGroup>
|
/>
|
||||||
|
</TldrawUiMenuGroup>
|
||||||
|
</div>
|
||||||
<DefaultMainMenuContent />
|
<DefaultMainMenuContent />
|
||||||
</DefaultMainMenu>
|
</DefaultMainMenu>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's main menu.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The actions menu can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
The main menu contains important submenus: Edit, Shape, Preferences etc. To open the main menu, click the hamburger icon in the top left corner of the tldraw component. It can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import { TLComponents, Tldraw } from 'tldraw'
|
||||||
import 'tldraw/tldraw.css'
|
import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
function CustomNavigationPanel() {
|
function CustomNavigationPanel() {
|
||||||
return <div className="tlui-navigation-panel">here you are</div>
|
return <div style={{ backgroundColor: 'thistle', padding: '14px' }}>here you are</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
const components: TLComponents = {
|
const components: TLComponents = {
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's navigation panel or remove it entirely.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The navigation panel can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
The navigation panel is in the bottom left of the tldraw component at larger breakpoints. It contains zoom controls and a mini map. It can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
function CustomPageMenu() {
|
function CustomPageMenu() {
|
||||||
return (
|
return (
|
||||||
<div style={{ transform: 'rotate(3.14rad)' }}>
|
<div style={{ transform: 'rotate(3.14rad)', backgroundColor: 'thistle' }}>
|
||||||
<DefaultPageMenu />
|
<DefaultPageMenu />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's page menu, or remove it entirely.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The page menu can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
The page menu contains options for creating and editing pages. To open the page menu, click the page name in the top left of the tldraw component. It can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,9 @@ function CustomQuickActions() {
|
||||||
return (
|
return (
|
||||||
<DefaultQuickActions>
|
<DefaultQuickActions>
|
||||||
<DefaultQuickActionsContent />
|
<DefaultQuickActionsContent />
|
||||||
<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
|
<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
|
||||||
|
</div>
|
||||||
</DefaultQuickActions>
|
</DefaultQuickActions>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,22 +21,26 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultStylePanel {...props}>
|
<DefaultStylePanel {...props}>
|
||||||
<TldrawUiButton
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
type="menu"
|
<TldrawUiButton
|
||||||
onClick={() => {
|
type="menu"
|
||||||
editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true })
|
onClick={() => {
|
||||||
}}
|
editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true })
|
||||||
>
|
}}
|
||||||
<TldrawUiButtonLabel>Red</TldrawUiButtonLabel>
|
>
|
||||||
</TldrawUiButton>
|
<TldrawUiButtonLabel>Red</TldrawUiButtonLabel>
|
||||||
<TldrawUiButton
|
</TldrawUiButton>
|
||||||
type="menu"
|
</div>
|
||||||
onClick={() => {
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true })
|
<TldrawUiButton
|
||||||
}}
|
type="menu"
|
||||||
>
|
onClick={() => {
|
||||||
<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
|
editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true })
|
||||||
</TldrawUiButton>
|
}}
|
||||||
|
>
|
||||||
|
<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
|
||||||
|
</TldrawUiButton>
|
||||||
|
</div>
|
||||||
<DefaultStylePanelContent styles={styles} />
|
<DefaultStylePanelContent styles={styles} />
|
||||||
</DefaultStylePanel>
|
</DefaultStylePanel>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -11,17 +11,19 @@ import 'tldraw/tldraw.css'
|
||||||
function CustomZoomMenu() {
|
function CustomZoomMenu() {
|
||||||
return (
|
return (
|
||||||
<DefaultZoomMenu>
|
<DefaultZoomMenu>
|
||||||
<TldrawUiMenuGroup id="example">
|
<div style={{ backgroundColor: 'thistle' }}>
|
||||||
<TldrawUiMenuItem
|
<TldrawUiMenuGroup id="example">
|
||||||
id="like"
|
<TldrawUiMenuItem
|
||||||
label="Like my posts"
|
id="like"
|
||||||
icon="external-link"
|
label="Like my posts"
|
||||||
readonlyOk
|
icon="external-link"
|
||||||
onSelect={() => {
|
readonlyOk
|
||||||
window.open('https://x.com/tldraw', '_blank')
|
onSelect={() => {
|
||||||
}}
|
window.open('https://x.com/tldraw', '_blank')
|
||||||
/>
|
}}
|
||||||
</TldrawUiMenuGroup>
|
/>
|
||||||
|
</TldrawUiMenuGroup>
|
||||||
|
</div>
|
||||||
<DefaultZoomMenuContent />
|
<DefaultZoomMenuContent />
|
||||||
</DefaultZoomMenu>
|
</DefaultZoomMenu>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@ You can customize tldraw's zoom menu.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
The zoom menu can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
The zoom menu is in the bottom left of the tldraw component, the button to open it is labeled with a percentage indicating the editor's current zoom level. It can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue