Splitter component allows you to resize two panels.
Experiment with all the properties of the Splitter component in real time.
Minimum size of the first panel (px or %).
Maximum size of the first panel (px or %).
Initial size of the first panel (px or %).
Direction of the splitter.
import { Splitter } from "lambda-ui-components";
export default function App() {
return (
<Splitter >
<div style={{ backgroundColor: "#f0f0f0" }}>Panel 1</div>
<div style={{ backgroundColor: "#e0e0e0" }}>Panel 2</div>
</Splitter>
);
}Prop | Default | Type |
|---|---|---|
direction | "horizontal" | "horizontal" | "vertical" |
min | 100 | number | string |
max | 600 | number | string |
initial | 200 | number | string |
children | undefined | ReactNode[] | ReactNode |