layouts
View in MarkdownSourceAn app state of the layouts.
You can obtain the layouts state and integrate it with React components.
You can change the layout components with Layout Manager.
Data Structure
A map of Record<string, LayoutComponents> where:
string: The layout nameLayoutComponents: An array of React component class names
Get the layouts state manually:
const { layouts } = inkdrop.store.getState()
Connect the state with your React component:
import { useSelector } from 'react-redux'
const selector = ({ layouts }) => layouts
const MyComponent = props => {
const layouts = useSelector(selector)
// render
}
Example values
{
"main:full": [
"ModalLayout",
"SideBarLayout",
"NoteListBarLayout",
"EditorLayout"
],
"main:slim": [
"ModalLayout",
"NoteListBarLayout",
"EditorLayout"
],
"main:distraction-free": [
"ModalLayout",
"EditorLayout"
],
"sidebar": [
...
}
Available Layouts
main:full
The main layout that consists of 3 columns.
Default values
[
"ModalLayout",
"SideBarLayout",
"NoteListBarLayout",
"EditorLayout"
]
main:slim
The main layout that consists of 2 columns.
Default values
[
"ModalLayout",
"NoteListBarLayout",
"EditorLayout"
]
main:distraction-free
The main layout for distraction-free mode.
Default values
[
"ModalLayout",
"EditorLayout"
]
sidebar
The sidebar layout
Default values
[
"SideBarHeader",
"SideBarNavigation",
"SideBarSyncStatusView",
"SideBarPluginUpdatesNotificationView"
]
sidebar-menu
The menu layout of sidebar
Default values
[
"SideBarMenuItemAllNotes",
"SideBarMenuSectionNotebooks",
"SideBarMenuBookListRoot",
"SideBarMenuItemTrash",
"SideBarMenuSectionStatus",
"SideBarMenuStatusList",
"SideBarMenuSectionTags",
"SideBarMenuTagList"
]
sidebar-workspace-menu
The menu layout of sidebar workspace menu
Default values
[
"SidebarWorkspaceMenuTitle",
"SideBarWorkspaceMenuAllNotes",
"SideBarMenuSectionNotebooks",
"SideBarWorkspaceMenuBookList",
"SideBarMenuSectionStatus",
"SidebarWorkspaceMenuStatusList",
"SideBarMenuSectionTags",
"SidebarWorkspaceMenuTagList"
]
note-list-bar
The menu layout of note list bar
Default values
[
"NoteListHeader",
"NoteListSearchBar",
"NoteListBarContainer"
]
note-list-bar:trash
The trash menu layout of note list bar
Default values
[
"NoteListHeader",
"NoteListBarContainer"
]
mde
The mde layout
Default values
[
"Editor"
]
editor
The editor layout
Default values
[
"EditorDrawer",
"EditorFloatingActions",
"EditorHeaderLayout",
"EditorMetaLayout",
"EditorToolbar",
"MDELayout",
"MDESearchBar",
"EditorStatusBarLayout"
]
editor-header
The header layout of the editor
Default values
[
"EditorHeaderTitleInput",
"EditorHeaderMore"
]
editor-meta
The meta pane layout of the editor
Default values
[
"EditorMetaNotebook",
"EditorMetaStatusPicker",
"EditorMetaTags"
]
modal
The layout for modal components
Default values
[
"NewNotebookDialog",
"DeleteNotebookDialog",
"RenameNotebookDialog",
"TagSettingsDialog",
"DeleteTagDialog",
"AssistiveErrorDialog",
"MoveNotesDialog",
"MoveNotebookDialog",
"EmptyTrashDialog",
"ShareNoteDialog",
"NoteRevisionsDialog"
]
editor-toolbar
The toolbar layout of the editor
Default values
[]
editor-drawer-menu
The editor drawer menu items
Default values
[
"EditorDrawerSectionHeaderNoteInformation",
"EditorDrawerMenuItemNotebook",
"EditorDrawerItemStatus",
"EditorDrawerItemTags",
"EditorDrawerItemCreatedDate",
"EditorDrawerItemUpdatedDate",
"EditorDrawerSeparator-1",
"EditorDrawerSectionHeaderActions",
"EditorDrawerActionButtonDuplicate",
"EditorDrawerActionButtonCopyNoteLink",
"EditorDrawerActionButtonPinToTop",
"EditorDrawerActionButtonOpenNoteInSeparateWindow",
"EditorDrawerSeparator-2",
"EditorDrawerActionButtonDeleteNote",
"EditorDrawerActionButtonRevisionHistory",
"EditorDrawerSeparator-3",
"EditorDrawerActionButtonShare"
]
editor-status-bar
The status bar layout of the editor
Default values
[]
editor-floating-actions
The floating action buttons on the editor
Default values
[
"EditorFloatingActionTogglePreview",
"EditorFloatingActionToggleSideBySide"
]