API REFERENCE

InsetSidebar Builder

Inset sidebar is created to stay inside a container, see blog tutorial

create

Before you register a config, you need to create an edge sidebar with an id and props.

Interface

type create = (
  sidebarId: string,
  props: { anchor: 'left' | 'right' }
) => IInsetSidebarRegistry;

Usage Example

scheme.configureInsetSidebar(builder => {
  builder.create('primarySidebar', { anchor: 'left' }); // this will return a registry
});

After you calling this function, you can register a config by chaining register methods. There are 3 register methods that you can use

registerStickyConfig

Sticky inset sidebar is used for content navigator that is not too long (at least you can see all of the content in sidebar without scrolling) This is an example of websites that use StickyInsetSidebar (sidebar on the right hand-side)

Interface

type registerStickyConfig = (
  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
  config: {
    width: number(px) | 'rem' | 'em' | 'x%',
    top: number(px) | 'rem' | 'em' | 'x%',
  }
) => IInsetSidebarRegistry;

Usage Example

scheme.configureInsetSidebar(builder => {
  builder
    .create('primarySidebar', { anchor: 'left' })
    .registerFixedConfig('lg', {
      width: 256, // recommended width
      top: '4rem'
    });
  // you can register more breakpoint, if needed.
});

Config

  • width
    • type : number(px) | ‘rem’ | ‘em’ | ‘x%’
    • required : yes
    • description : css width of the Paper component inside InsetSidebar
  • top
    • type : number(px) | ‘rem’ | ‘em’ | ‘x%’
    • default : 0
    • description : distance between top and sidebar content when user scroll down

registerFixedConfig

You need fixed inset sidebar when you want to separate sidebar from content and you want to have background that cover all of the sidebar’s side to the edge of browser. User can scroll content separately from sidebar, this is benefit when you want the content in sidebar to fix because it is important to user and the content can be longer than the sidebar.

Interface

type registerFixedConfig = (
  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
  config: {
    width: number(px) | 'rem' | 'em',
    headerMagnetEnabled?: boolean
  }
) => IInsetSidebarRegistry;

Usage Example

scheme.configureInsetSidebar(builder => {
  builder
    .create('primarySidebar', { anchor: 'left' })
    .registerFixedConfig('md', {
      width: 256, // recommended width
      headerMagnetEnabled: true,
    });
  // you can register more breakpoint, if needed.
});

Config

  • width
    • type : number(px) | ‘rem’ | ‘em’ (% is not recommend for this variant)
    • required : yes
    • description : css width of the Paper component inside InsetSidebar
  • headerMagnetEnabled
    • type : boolean
    • default : false
    • description : if true sidebar will snap to top (only valid if header’s variant is relative)

registerAbsoluteConfig

This variant is for specific use case when you want to have a 100vh application that each part can be scrolled separately.

Interface

type registerFixedConfig = (
  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
  config: {
    width: number(px) | 'rem' | 'em' | 'x%',
  }
) => IInsetSidebarRegistry;

Usage Example

scheme.configureInsetSidebar(builder => {
  builder
    .create('primarySidebar', { anchor: 'left' })
    .registerFixedConfig('md', {
      width: '30%', // % is recommended for this variant
      headerMagnetEnabled: true,
    });
  // you can register more breakpoint, if needed.
});

hide

This is the same as hide function in edge sidebar builder


update

This is the same as update function in edge sidebar builder