Sidebar
The Sidebar component is accessible as a Reactium.Handle object. You can gain access to the Sidebar by doing the following:
import React from 'react';
import Reactium, { useHandle } from 'reactium-core/sdk';
const SidebarToggleButton = () => {
const Sidebar = useHandle('RTKSidebar');
return (
<button onClick={() => Sidebar.toggle()}>
Toggle Sidebar
</button>
);
};
Property | Type | Description |
collapsed | Boolean | The collapsed state of the Sidebar |
expanded | Boolean | The expanded state of the Sidebar |
Collapse the Sidebar if it is expanded. The
collapse and collapsed events are triggered.
Returns a Promise that resolves when the collapse animation is complete.import React, { useEffect } from 'react';
import Reactium, { useHandle } from 'reactium-core/sdk';
const SidebarCollapseButton = () => {
const Sidebar = useHandle('RTKSidebar');
useEffect(() => {
Sidebar.addEventListener('collapse', console.log);
Sidebar.addEventListener('collapsed', console.log);
return () => {
Sidebar.removeEventListener('collapse', console.log);
Sidebar.removeEventListener('collapsed', console.log);
};
}, [Sidebar]);
return (
<button onClick={() => Sidebar.collapse()}>
Collapse Sidebar
</button>
);
};
Expand the Sidebar if it is collapsed. The
expand and expanded events are triggered.
Returns a Promise that resolves when the expand animation is complete. import React, { useEffect } from 'react';
import Reactium, { useHandle } from 'reactium-core/sdk';
const SidebarExpandButton = () => {
const Sidebar = useHandle('RTKSidebar');
useEffect(() => {
Sidebar.addEventListener('expand', console.log);
Sidebar.addEventListener('expanded', console.log);
return () => {
Sidebar.removeEventListener('expand', console.log);
Sidebar.removeEventListener('expanded', console.log);
};
}, [Sidebar]);
return (
<button onClick={() => Sidebar.expand()}>
Expand Sidebar
</button>
);
};
Triggered when the collapse animation starts as a side effect of
collapse() or toggle()Triggered when the collapse animation is completed as a side effect of
collapse() or toggle() Triggered when the expand animation starts as a side effect
expand() or toggle()Triggered when the expand animation is completed as a side effect of
collapse() or toggle()Triggered during the expand/collapse animation. The current width of the sidebar is provided as a property on the event.
Last modified 2yr ago