Side panel
Hidden panels
Implement a side panel that doesn't appear in tabs and opens programmatically
Built-in hidden panels
Polotno includes several internal hidden panels that are not shown in the tab bar but open programmatically via store.openSidePanel(name). These panels are triggered by toolbar buttons (e.g. clicking "Effects" in the image toolbar opens the effects panel).
| Panel name | Description | Triggered by |
|---|---|---|
effects | Image/element filters and effects editor | Toolbar "Effects" |
animation | Animation settings for selected element | Toolbar "Animate" |
image-clip | Image clipping / mask editor | Toolbar "Apply mask" |
// Open the built-in effects panel for the selected element
store.openSidePanel('effects');
// Open the animation panel
store.openSidePanel('animation');
// Open the image clip/mask panel
store.openSidePanel('image-clip');How to implement your own hidden panel?
You can create custom hidden panels that don't appear in the tab bar but open based on user actions, similar to the built-in ones above.
To implement a hidden panel:
// define the new custom section
const CustomSection = {
name: 'custom-text',
// use "empty" tab that will render nothing
Tab: () => null,
// we need observer to update component automatically on any store changes
Panel: observer(({ store }) => {
const text = store.selectedElements[0]?.text;
return (
<div>
<InputGroup
value={text}
onChange={() => {
store.selectedElements[0].set({ text: e.target.value });
}}
/>
</div>
);
}),
};
// add new section to side bar
const sections = [...DEFAULT_SECTIONS, CustomSection];
// use mobx reaction to react to selection changes
reaction(
() => {
const textSelected = store.selectedElements[0]?.type === 'text';
return textSelected;
},
// we can use result returned from reaction
(textSelected) => {
if (textSelected) {
store.openSidePanel('custom-text');
}
}
);
export const App = () => {
return (
<PolotnoContainer className="polotno-app-container">
<SidePanelWrap>
<SidePanel store={store} sections={sections} />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} downloadButtonEnabled />
<Workspace store={store} />
<ZoomButtons store={store} />
</WorkspaceWrap>
</PolotnoContainer>
);
};For the demo, try to create a text element. As soon as it is selected, you will see a new side panel opened.