Feature

Persistent Behavior

This feature is specifically for PersistentEdgeSidebar. There are 3 behaviors that you can set. These behaviors is not about the EdgeSidebar itself but they define how other components (Header, Content and Footer) adjusts when PersistentEdgeSidebar open.

Example usage

scheme.configureHeader(builder => {
  builder
    .registerConfig('xs', {
      position: 'sticky',
    });
});

scheme.configureEdgeSidebar(builder => {
  builder
    .create('primarySidebar', { anchor: 'left' })
    .registerPersistentConfig('md', {
      width: 256,
      collapsible: true,
      collapsedWidth: 64,
      persistentBehavior: 'fit', // 'flexible' | 'none',
    });
});

Persistent behavior has effect on these components including Header, Content and Footer. From now on, let’s call them objects. You can also specify an object to persistentBehavior to specify behavior to each object.

scheme.configureEdgeSidebar(builder => {
  builder
    .create('primarySidebar', { anchor: 'left' })
    .registerPersistentConfig('md', {
      width: 256,
      collapsible: true,
      collapsedWidth: 64,
      persistentBehavior: {
        header: 'fit',
        content: 'flexible',
        footer: 'none'
      }
    });
});

use header to target Header (if you don’t specify id), content to target Content and footer to target Footer (They are fixed id).


Fit

gif

when edge sidebar open, the object’s width will be reduce and margin (left | right) will increase. That makes the object’s content to remain within browser and no overflow.


Flexible

gif

when edge sidebar open, the object’s width remains the same but margin increase. You will see the object move left or right depends on sidebar’s anchor. Since width is not changed, use can scroll horizontally. This behavior might be a good use case for mobile.


None

gif

the object’s width and margin will not change or you can say that the object is not affected by EdgeSidebar