0.4.12 • Published 4 days ago
@elementor/editor-panels v0.4.12
Editor Panels
!WARNING This package is under development and not ready for production use.
Usage
Creating panel contains 3 steps:
- Creating the panel component
// components/my-panel.tsx
import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels';
export default function MyPanel() {
return (
<Panel>
<PanelHeader>
<PanelHeaderTitle>{ /* Panel title */ }</PanelHeaderTitle>
</PanelHeader>
<PanelBody>
{ /* Here should be all the content of the panel */ }
</PanelBody>
</Panel>
);
}
- Creating an instance of the panel
// panel.ts
import { createPanel } from '@elementor/editor-panels';
import MyPanel from './components/my-panel';
export const {
panel,
usePanelStatus,
usePanelActions,
} = createPanel( {
id: 'my-panel',
component: MyPanel
} );
- Registering the panel
// init.ts
import { registerPanel } from '@elementor/editor-panels';
import { panel } from './panel';
function init() {
registerPanel( panel );
}
// index.ts
import init from './init';
init();
Using panel actions and state
To change or read the state of a panel (open/close), you can use 2 hooks that are being returned
from the createPanel()
function.
Let's assume that we have a button that should open the panel when clicked, and close it when clicked again.
// components/my-panel-button.tsx
import { usePanelStatus, usePanelActions } from '../panel';
export default function MyPanelButton() {
const { isOpen, isBlocked } = usePanelStatus();
const { open, close } = usePanelActions();
return (
<button onClick={ isOpen ? close : open } disabled={ isBlocked }>
{ isOpen ? 'Close panel' : 'Open panel' }
</button>
);
}
0.4.12
4 days ago
0.4.11
5 days ago
0.4.10
27 days ago
0.4.9
2 months ago
0.4.8
3 months ago
0.4.7
3 months ago
0.4.6
4 months ago
0.3.0
8 months ago
0.2.1
9 months ago
0.2.0
9 months ago
0.4.5
6 months ago
0.4.4
6 months ago
0.4.1
8 months ago
0.1.4
10 months ago
0.4.0
8 months ago
0.1.3
11 months ago
0.4.3
7 months ago
0.1.6
10 months ago
0.4.2
7 months ago
0.1.5
10 months ago
0.1.2
11 months ago
0.1.1
11 months ago
0.1.0
11 months ago