SidePanel provides default set of components for adding new elements into the canvas, changing pages sizes, etc.
import { SidePanel } from 'polotno/side-panel';
const MyPanel = () => {
return (
<div>
<SidePanel store={store} />
</div>
);
};The SidePanel will automatically use full width and height of its parent; you don't have to manually adjust its size. You can just setup the size of parent <div> with CSS.
How to customize side panel tabs?
You can pass sections property to <SidePanel /> component to specify all available tabs manually. Here is the default UI:
import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
const MyPanel = () => {
return (
<div>
<SidePanel store={store} sections={DEFAULT_SECTIONS} />
</div>
);
};And this is how you can define it manually:
import { observer } from 'mobx-react-lite';
import { SidePanel } from 'polotno/side-panel';
// import existing section
import { TextSection } from 'polotno/side-panel';
// import default tab component
import { SectionTab } from 'polotno/side-panel';
// import our own icon
import FaShapes from '@meronex/icons/fa/FaShapes';
// define the new custom section
const CustomSection = {
name: 'custom',
Tab: (props) => (
<SectionTab name="Custom" {...props}>
<FaShapes icon="new-text-box" />
</SectionTab>
),
// we need observer to update component automatically on any store changes
Panel: observer(({ store }) => {
return (
<div>
<p>Here we will define our own custom tab.</p>
<p>Elements on the current page: {store.activePage?.children.length}</p>
</div>
);
}),
};
// we will have just two sections
const sections = [CustomSection, TextSection];
const CustomSidePanel = () => {
return (
<SidePanel store={store} sections={sections} defaultSection="custom" />
);
};