SplitterLayout
<SplitterLayout> ist eine React Komponente, die es ermöglicht, zwei Kindkomponenten in einem horizontalen
oder vertikalen Layout anzuordnen. Die Größe der Kindkomponenten kann durch den Benutzer per Drag & Drop verändert werden.
import { SplitterLayout } from '@5minds/processcube_app_sdk/client';
import '@5minds/processcube_app_sdk/client/components/SplitterLayout.css';
export default function Home() {
return (
<SplitterLayout vertical percentage secondaryInitialSize={30}>
<Content />
<Description />
</SplitterLayout>
);
}Props
Hier die Props, die die Komponente <SplitterLayout> akzeptiert:
| Prop | Beispiel | Type | Required |
|---|---|---|---|
className | className="vertical-split" | String | - |
vertical | vertical={true} | Boolean | - |
percentage | percentage={true} | Boolean | - |
primaryIndex | primaryIndex={0} | Integer (px/%) | - |
primaryMinSize | primaryMinSize={30} | Integer (px/%) | - |
secondaryMinSize | secondaryMinSize={30} | Integer (px/%) | - |
secondaryDefaultSize | secondaryDefaultSize={30} | Integer (px/%) | - |
secondaryInitialSize | secondaryInitialSize={30} | Integer (px/%) | - |
onSizeChanged | onSizeChanged={handleSizeChange} | Function | - |
onDragStart | onDragStart={handleDragStart} | Function | - |
onDragEnd | onDragEnd={handleDragEnd} | Function | - |
className
Benutzerdefinierte Klassen, die zur Komponente hinzugefügt werden sollen.
<SplitterLayout className="splitter-layout">
<Content />
<Description />
</SplitterLayout>vertical
Standardwert: false.
Legt fest, ob das Layout vertikal oder horizontal ist.
<SplitterLayout vertical>
<Content />
<Description />
</SplitterLayout>percentage
Standardwert: false.
Legt fest, ob die Größen der Kindkomponenten als Verhältnis in Prozent oder Pixeln angegeben werden.
Wird im Zusammenhang mit primaryMinSize, secondaryMinSize, secondaryDefaultSize und secondaryInitialSize verwendet.
<SplitterLayout percentage secondaryInitialSize={30}>
<Content />
<Description />
</SplitterLayout>primaryIndex
Gibt als Index an welches Kindkomponente die primäre ist.
<SplitterLayout primaryIndex={0}>
<Content />
<Description />
</SplitterLayout>primaryMinSize
Die minimale Größe der primären Kindkomponente. In Prozent oder Pixeln, abhängig von der Einstellung percentage.
<SplitterLayout primaryMinSize={300}>
<Content />
<Description />
</SplitterLayout>secondaryMinSize
Die minimale Größe der sekundären Kindkomponente. In Prozent oder Pixeln, abhängig von der Einstellung percentage.
<SplitterLayout secondaryMinSize={300}>
<Content />
<Description />
</SplitterLayout>secondaryDefaultSize
Die Standardgröße der sekundären Kindkomponente. In Prozent oder Pixeln, abhängig von der Einstellung percentage.
<SplitterLayout secondaryDefaultSize={300}>
<Content />
<Description />
</SplitterLayout>secondaryInitialSize
Die Anfangsgröße der sekundären Kindkomponente. In Prozent oder Pixeln, abhängig von der Einstellung percentage.
<SplitterLayout secondaryInitialSize={300}>
<Content />
<Description />
</SplitterLayout>onSizeChanged
Wird ausgelöst, wenn die Größe der sekundären Kindkomponente durch einen Benutzer per Drag & Drop geändert wird.
Erhält einen Parameter, der die neue Größe der sekundären Kindkomponente zur Zeit der Änderung als Integer in
Pixeln oder Prozent enthält, abhängig von der Einstellung percentage.
<SplitterLayout onSizeChanged={(size) => console.log(`Size: ${size}`)}>
<Content />
<Description />
</SplitterLayout>onDragStart
Wird ausgelöst, wenn die Größe der sekundären Kindkomponente durch einen Benutzer per Drag & Drop geändert wird.
Erhält einen Parameter, der die Größe der sekundären Kindkomponente vor der Änderung als Integer in Pixeln oder Prozent enthält,
abhängig von der Einstellung percentage.
<SplitterLayout onDragStart={(before) => console.log(`Before: ${before}`)}>
<Content />
<Description />
</SplitterLayout>onDragEnd
Wird ausgelöst, wenn die Größe der sekundären Kindkomponente durch einen Benutzer per Drag & Drop geändert wurde.
Erhält zwei Parameter, die die Größe der sekundären Kindkomponente vor und nach der Änderung als Integer in Pixeln oder Prozent enthalten,
abhängig von der Einstellung percentage.
<SplitterLayout onDragEnd={(before, after) => console.log(`Before: ${before}, After: ${after}`)}>
<Content />
<Description />
</SplitterLayout>Methoden
Die Komponente <SplitterLayout> bietet folgende Methoden, die über die Instanz der Komponente aufgerufen werden können:
setSecondaryPaneSize(size: number)
Setzt die Größe der sekundären Kindkomponente auf den angegebenen Wert. Kann beispielweise genutzt werden, um die Größe der sekundären Kindkomponente auf Werte zu setzen, die durch einen Slider oder ein Eingabefeld bestimmt werden.
import { useRef } from 'react';
import { SplitterLayout } from '@5minds/processcube_app_sdk/client';
import '@5minds/processcube_app_sdk/client/components/SplitterLayout.css';
export default function Home() {
const splitterRef = useRef<SplitterLayout>(null);
return (
<>
<button onClick={() => splitterRef.current?.setSecondaryPaneSize(25)}>Set Size</button>
<SplitterLayout vertical percentage secondaryInitialSize={50} ref={splitterRef}>
<Content />
<Description />
</SplitterLayout>
</>
);
}maximizeSecondaryPane()
Maximiert die sekundäre Kindkomponente. Kann nur genutzt werden, wenn percentage auf true gesetzt ist.
import { useRef } from 'react';
import { SplitterLayout } from '@5minds/processcube_app_sdk/client';
import '@5minds/processcube_app_sdk/client/components/SplitterLayout.css';
export default function Home() {
const splitterRef = useRef<SplitterLayout>(null);
return (
<>
<button onClick={() => splitterRef.current?.maximizeSecondaryPane()}>Maximize</button>
<SplitterLayout vertical percentage secondaryInitialSize={50} ref={splitterRef}>
<Content />
<Description />
</SplitterLayout>
</>
);
}reset()
Setzt die Größen der Kindkomponenten auf die Standardgrößen zurück.
import { useRef } from 'react';
import { SplitterLayout } from '@5minds/processcube_app_sdk/client';
import '@5minds/processcube_app_sdk/client/components/SplitterLayout.css';
export default function Home() {
const splitterRef = useRef<SplitterLayout>(null);
return (
<>
<button onClick={() => splitterRef.current?.reset()}>Reset</button>
<SplitterLayout vertical percentage secondaryInitialSize={50} ref={splitterRef}>
<Content />
<Description />
</SplitterLayout>
</>
);
}isReset()
Gibt zurück, ob die Größen der Kindkomponenten den Standardgrößen entsprechen.
import { useRef } from 'react';
import { SplitterLayout } from '@5minds/processcube_app_sdk/client';
import '@5minds/processcube_app_sdk/client/components/SplitterLayout.css';
export default function Home() {
const splitterRef = useRef<SplitterLayout>(null);
return (
<>
<button onClick={() => console.log(splitterRef.current?.isReset())}>Is Reset</button>
<SplitterLayout vertical percentage secondaryInitialSize={50} ref={splitterRef}>
<Content />
<Description />
</SplitterLayout>
</>
);
}Styling
Die Farben der Komponente können über CSS Variablen angepasst werden. Folgende Variablen stehen zur Verfügung:
| Variable | Beschreibung |
|---|---|
| —app-sdk-splitter-layout-background-color | Hintergrundfarbe des Layouts |
| —app-sdk-splitter-layout-splitter-color | Farbe des Splitters |
| —app-sdk-splitter-layout-splitter-hover-color | Farbe des Splitters beim Hovern |
| —app-sdk-splitter-layout-splitter-changing-color | Farbe des Splitters während der Größenänderung |
Beispiel
Um die Farben der Komponente anzupassen, können die CSS Variablen wie folgt überschrieben werden:
:root {
--app-sdk-splitter-layout-background-color: #ffffff;
--app-sdk-splitter-layout-splitter-color: #000000;
--app-sdk-splitter-layout-splitter-hover-color: #ff0000;
--app-sdk-splitter-layout-splitter-changing-color: #00ff00;
}
/* dark mode */
.dark,
.dark * {
--app-sdk-splitter-layout-background-color: #000000;
--app-sdk-splitter-layout-splitter-color: #ffffff;
--app-sdk-splitter-layout-splitter-hover-color: #00ff00;
--app-sdk-splitter-layout-splitter-changing-color: #ff0000;
}