Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

rc-dock

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-dock

dock layout for react component


Version published
Weekly downloads
5.5K
decreased by-17.34%
Maintainers
1
Weekly downloads
 
Created

Dock Layout for React Component

alt text

Usage

rc-tabs

import DockLayout from 'rc-dock'

...

defaultLayout = {
  dockbox: {
    mode: 'horizontal',
    children: [
      {
        tabs: [
          {id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
        ]
      }
    ]
  }
};

render() {
  return <DockLayout defaultLayout={defaultLayout}/>
}

types

LayoutData 🗎

PropertyTypeCommentsDefault
dockboxBoxDatamain dock boxempty BoxData
floatboxBoxDatamain float box, children can only be PanelDataempty BoxData

BoxData 🗎

a box is the layout element that contains other boxes or panels

PropertyTypeCommentsDefault
mode'horizontal' | 'vertical' | 'float'layout mode of the box
children(BoxData | PanelData)[]children boxes or panelsrequired

PanelData 🗎

a panel is a visiaul container with tabs button in the title bar

PropertyTypeCommentsDefault
tabsTabData[]children tabsrequired
panelLockPanelLockaddition information of a panel, this prevents the panel from being removed when there is no tab inside, a locked panel can not be moved to float layer either

TabData 🗎

PropertyTypeCommentsDefault
idstringunique idrequired
titlestring | ReactElementtab titlerequired
contentReactElement | (tab: TabData) => ReactElementtab contentrequired
closableboolwhether tab can be closedfalse
groupstringtabs with different tab group can not be put in same panel, more options for the group can be defined as TabGroup in DefaultLayout.groups

DockLayout API

get the ref of the DockLayout component to use the following API

saveLayout 🗎

save layout

saveLayout(): SavedLayout 

loadLayout 🗎

load layout

 loadLayout(savedLayout: SavedLayout): void

dockMove 🗎

move a tab or a panel, if source or target is already in the layout, you can use the find method to get it with id first

dockMove(source: TabData | PanelData, target: TabData | PanelData | BoxData, direction: DropDirection): void;

find 🗎

find PanelData or TabData by id

find(id: string): PanelData | TabData;

updateTab 🗎

update a tab with new TabData

returns false if the tab is not found

updateTab(id: string, newTab: TabData): boolean;

FAQs

Package last updated on 10 Jan 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts