⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

components

Resizable Elements

A way to provide resizing.

Overview

This component allows for multiple elements to be resized by the user.

import ResizableElements from '@datacamp/waffles-resizable-elements';
import { Paragraph } from '@datacamp/waffles-text';

function Playground(): JSX.Element {
  return (
    <ResizableElements orientation="row">
      <Paragraph>
        This is a whole lot of text in a box that can be resized.
      </Paragraph>
      <Paragraph>
        This is a whole lot of text in a box that can be resized.
      </Paragraph>
      <Paragraph>
        This is a whole lot of text in a box that can be resized.
      </Paragraph>
    </ResizableElements>
  );
}

import ResizableElements from '@datacamp/waffles-resizable-elements';
import { Paragraph } from '@datacamp/waffles-text';

function Playground(): JSX.Element {
  return (
    <ResizableElements orientation="row">
      <Paragraph>
        This is a whole lot of text in a box that can be resized.
      </Paragraph>
      <Paragraph>
        This is a whole lot of text in a box that can be resized.
      </Paragraph>
      <Paragraph>
        This is a whole lot of text in a box that can be resized.
      </Paragraph>
    </ResizableElements>
  );
}

Live

Props

ResizableElements

Name	Value	Default	Description
children	ReactReactNode	Required	The elements to make "resizable". They will each be rendered inside a div that can change in size.
collapsedSize	number	30	The size of a "collapsed" element in pixels.
initialProportions	number		An array of percentage values. This should be the same length as the number of elements. This determines the initial sizes of the elements. When not provided the elements will default to equal sizes.
orientation	'row' \| 'column'	'row'	The layout of the child elements.

Imports

You can import following components or utilities from this module:

import ResizableElements, { CollapseContext } from '@datacamp/waffles-resizable-elements';