Quick Start: Installing and Customizing TMS ToolPanelsTMS ToolPanels are a versatile set of components designed to help developers and designers build modular, configurable panel interfaces quickly. This guide walks you through installing TMS ToolPanels, configuring them for common use cases, and customizing appearance and behavior to fit your application’s needs. It’s aimed at developers with basic familiarity with JavaScript frameworks and CSS; examples use modern tooling but remain framework-agnostic where possible.
What are TMS ToolPanels?
TMS ToolPanels are UI modules that provide collapsible, dockable, and configurable panels often used for settings, tools, inspectors, and contextual controls. They typically include features such as:
- Panel collapsing/expanding
- Resizing and docking
- Tabbed panels and nested panels
- Keyboard shortcuts and accessibility support
- Persistence of layout and state
Prerequisites
Before you begin:
- Node.js (v14+) and npm or yarn installed.
- Basic knowledge of HTML, CSS, and JavaScript.
- Optional: familiarity with a front-end framework (React, Vue, Angular) if you plan to integrate ToolPanels into such projects.
Installation
Install via npm or yarn. Replace package-name with the actual TMS ToolPanels package name if different.
# npm npm install tms-toolpanels --save # yarn yarn add tms-toolpanels Include the CSS in your project (adjust path to match your build system):
<link rel="stylesheet" href="node_modules/tms-toolpanels/dist/tms-toolpanels.css"> Or import in your JS/CSS bundle:
import 'tms-toolpanels/dist/tms-toolpanels.css'; import TmsToolPanels from 'tms-toolpanels'; Basic Usage (Vanilla JS)
Create a simple layout with two panels: a left tools panel and a right inspector.
<div id="app"> <div id="left-panel" class="tms-panel">Tools</div> <div id="main-area">Main Content</div> <div id="right-panel" class="tms-panel">Inspector</div> </div> Initialize ToolPanels:
import TmsToolPanels from 'tms-toolpanels'; const manager = new TmsToolPanels.Manager({ container: document.getElementById('app'), panels: [ { id: 'left', element: document.getElementById('left-panel'), position: 'left', size: 300 }, { id: 'right', element: document.getElementById('right-panel'), position: 'right', size: 350 }, ], persistLayout: true, }); Integrating with React
Install the package (as above) and use provided React components or wrap the vanilla API.
Example using a hypothetical React wrapper:
import React from 'react'; import { ToolPanelsProvider, Panel } from 'tms-toolpanels/react'; import 'tms-toolpanels/dist/tms-toolpanels.css'; function App() { return ( <ToolPanelsProvider options={{ persistLayout: true }}> <Panel id="left" position="left" size={280}>Tools</Panel> <div className="main">Main content</div> <Panel id="right" position="right" size={340}>Inspector</Panel> </ToolPanelsProvider> ); } If no React bindings exist, initialize inside a useEffect and attach to DOM nodes.
Basic Customization
- Collapsible panels
- Enable collapse behavior via options:
manager.setPanelOptions('left', { collapsible: true }); - Resizable panels
- Change resize handles and min/max sizes:
manager.setPanelOptions('right', { resizable: true, minSize: 200, maxSize: 600 }); - Tabs and nested panels
- Create tabbed content by adding multiple child panels with the same dock target:
manager.addPanel({ id: 'layers', title: 'Layers', parent: 'left' }); manager.addPanel({ id: 'tools', title: 'Tools', parent: 'left' }); manager.enableTabs('left'); - Keyboard shortcuts
- Bind custom shortcuts to toggle panels:
manager.bindShortcut('Ctrl+\', () => manager.togglePanel('left')); Theming and Styling
Override CSS variables or classes shipped with the package. Common variables:
- –tms-panel-bg
- –tms-panel-border
- –tms-panel-header-bg
- –tms-panel-accent
Example overriding in your CSS:
:root { --tms-panel-bg: #0f1724; --tms-panel-header-bg: #0b1220; --tms-panel-accent: #4f46e5; } .tms-panel { font-family: Inter, Arial, sans-serif; } For deeper customization, target component classes or use a style-in-JS solution to inject styles at runtime.
Accessibility
Ensure panels are navigable via keyboard and readable by screen readers:
- Add ARIA roles (region, button) to headers and controls.
- Ensure focus trap when panels open modally.
- Provide visible focus outlines and sufficient contrast.
Example:
<div role="region" aria-labelledby="left-title" tabindex="-1" id="left-panel"> <h2 id="left-title">Tools</h2> ... </div> Persistence and State
Persist layout and panel state (open/closed, sizes, active tabs) in localStorage or your server.
manager.on('layoutChange', layout => { localStorage.setItem('tmsLayout', JSON.stringify(layout)); }); const saved = JSON.parse(localStorage.getItem('tmsLayout')); if (saved) manager.restoreLayout(saved); For multi-user apps, store layouts per user on the backend and restore after authentication.
Advanced Features
- Docking and undocking: allow panels to float as separate windows.
- Animation hooks: customize open/close transitions.
- Remote loading: lazy-load heavy panel content when opened.
- Plugin system: extend tool panels with custom tool types.
Troubleshooting
- Panels not initializing: ensure container is present and CSS is loaded before init.
- Resize jumping: check conflicting CSS (box-sizing, padding) and ensure correct sizing model.
- State not persisting: confirm storage limits and JSON serializable state.
Example: Full Minimal App
<!doctype html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="node_modules/tms-toolpanels/dist/tms-toolpanels.css"> <style> body, html, #app { height: 100%; margin: 0; } #main-area { padding: 16px; } </style> </head> <body> <div id="app"> <div id="left-panel" class="tms-panel"><h2>Tools</h2></div> <div id="main-area">Main content</div> <div id="right-panel" class="tms-panel"><h2>Inspector</h2></div> </div> <script type="module"> import TmsToolPanels from './node_modules/tms-toolpanels/dist/tms-toolpanels.esm.js'; const manager = new TmsToolPanels.Manager({ container: document.getElementById('app'), panels: [ { id: 'left', element: document.getElementById('left-panel'), position: 'left', size: 280 }, { id: 'right', element: document.getElementById('right-panel'), position: 'right', size: 340 }, ], persistLayout: true }); </script> </body> </html> Conclusion
Getting started with TMS ToolPanels involves installing the package, including its styles, initializing panels in your app, and then progressively customizing behavior, styling, and persistence. Start with a simple left/right layout, add collapsible and resizable behavior, and iterate with theming and accessibility adjustments to match your product.
Leave a Reply