RegionResize
Feature

Makes the splitter between grid sections draggable, to let users resize, and collapse/expand the sections.

// enable RegionResize
const grid = new Grid({
  features: {
    regionResize: true
  }
});

If you use two regions, and you would like to prevent resizing/expanding the first (left section, rightmost in RTL), set maxWidth and width to the same value.

// enable RegionResize
const grid = new Grid({
  features: {
    regionResize: true
  },
  subGridConfigs : {
        locked : {
            width : 400,
            // prevent making the left section wider than 400px
            maxWidth : 400
        },
        normal : {
            flex : 1
        }
    }
});

This feature is disabled by default.

Configs

Configs are options you supply in a configuration object when creating an instance of this class

animateCollapseExpand : Booleantrue

DEPRECATED

Deprecated:
7.0.0 Deprecated animateCollapseExpand. Use grid.transition.toggleRegion instead

Set to false to not use transitions when expanding or collapsing a sub grid

Has a corresponding runtime animateCollapseExpand property.
enableDragging : Booleantrue

This flag prevents dragging if set to false but the collapse / expand buttons will still be functional.

Has a corresponding runtime enableDragging property.
showSplitterButtons : Booleantrue

Set to false to hide the splitter's collapse/expand buttons

Has a corresponding runtime showSplitterButtons property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isRegionResize : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of RegionResize class, or subclass thereof.

animateCollapseExpand : Booleantrue

DEPRECATED

Deprecated:
7.0.0 Deprecated animateCollapseExpand. Use grid.transition.toggleRegion instead

Set to false to not use transitions when expanding or collapsing a sub grid

Has a corresponding animateCollapseExpand config.
enableDragging : Booleantrue

This flag prevents dragging if set to false but the collapse / expand buttons will still be functional.

Has a corresponding enableDragging config.
showSplitterButtons : Booleantrue

Set to false to hide the splitter's collapse/expand buttons

Has a corresponding showSplitterButtons config.
isRegionResize : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of RegionResize class, or subclass thereof.

Functions

Functions are methods available for calling on the class

endMove( domEvent )

private

Stop moving splitter.
onElementPointerDown( event )

private

Start moving splitter on mouse down (on splitter).
onPointerMove( event )

private

Move splitter on mouse move.
startMove( splitterElement, domEvent )

private

Begin moving splitter.
toggleTouchSplitter( splitterElement )

private

Adds b-touching CSS class to splitterElements when touched. Removes when touched outside.
updateMove( newClientX )

private

Update splitter position.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

splitterCollapseClick

PREVENTABLE

ON-OWNER

Fired by the Grid when the collapse icon is clicked. Return false to prevent the default collapse action, if you want to implement your own behavior.

Note that this event is triggered on the owning widget:
splitterDragEnd

ON-OWNER

Fired by the Grid after a sub-grid has been resized using the splitter

Note that this event is triggered on the owning widget:
splitterDragStart

ON-OWNER

Fired by the Grid when a sub-grid resize gesture starts

Note that this event is triggered on the owning widget:
splitterExpandClick

PREVENTABLE

ON-OWNER

Fired by the Grid when the expand icon is clicked. Return false to prevent the default expand action, if you want to implement your own behavior.

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onSplitterCollapseClick

PREVENTABLE

ON-OWNER

Called by the Grid when the collapse icon is clicked. Return false to prevent the default collapse action, if you want to implement your own behavior.

Note that this handler is called on the owning widget:
onSplitterDragEnd

ON-OWNER

Called by the Grid after a sub-grid has been resized using the splitter

Note that this handler is called on the owning widget:
onSplitterDragStart

ON-OWNER

Called by the Grid when a sub-grid resize gesture starts

Note that this handler is called on the owning widget:
onSplitterExpandClick

PREVENTABLE

ON-OWNER

Called by the Grid when the expand icon is clicked. Return false to prevent the default expand action, if you want to implement your own behavior.

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-grid-splitter-zindex	Splitter z-index
--b-region-resize-button-color	Color for the expand / collapse buttons showed on hover
--b-region-resize-splitter-color	Splitter color
--b-region-resize-splitter-width	Splitter width
Collapsed
--b-region-resize-splitter-collapsed-width	Splitter width when collapsed
Hovered
--b-region-resize-button-hover-color	Color for the expand / collapse buttons showed on hover
--b-region-resize-splitter-hover-color	Splitter color when hovered
--b-region-resize-splitter-width-hover	Splitter width when hovering (also used as the invisible interactable area width)
Touched
--b-region-resize-splitter-touch-width-hover	Splitter width when touched (also used as the invisible touch area width)

id: regionResize

Source path

Grid/feature/RegionResize.js

Demo

examples/features

RegionResize
Feature

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

RegionResize Feature

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

RegionResize
Feature