diff --git a/README.md b/README.md index adc7b7a8..42159e79 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,67 @@ export const App = () => ( ); ``` -### Styling +If you want more control over the behaviour of the individual panes you can use the `Allotment.Pane` component. This includes setting the minimum and maximum size of a pane, as well as whether to enable snapping behaviour. + +```jsx + + + + + + + + +``` + +## Allotment props + +### defaultSizes + +An array of initial sizes of the panes. If the sum of the sizes differs from the size of the container then the panes' sizes will be scaled proportionally. + +```jsx + +
+
+ +``` + +### maxSize (default: `Infinity`) + +Maximum size of any pane. + +### minSize (default: `30`) + +Minimum size of any pane. + +### snap + +Enable snap to zero for all panes. + +### vertical (default: `false`) + +Direction to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally. + +### onChange + +Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. + +## Allotment.Pane props + +### maxSize + +Maximum size of this pane. Overrides `maxSize` set on parent component. + +### minSize + +Minimum size of this pane. Overrides `minSize` set on parent component. + +### snap + +Enable snap to zero for this pane. Overrides `snap` set on parent component. + +## Styling Allotment uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for styling. You can customize the following default variables.