Breakpoints

Components have built-in support for breakpoints. You can use them to change the behavior of components at different screen resolutions, using the breakpoints option.

new Toast({
  // ...
  limit: 3,
  position: "bottom-end",
  breakpoints: {
    1024: {
      limit: 5,
      position: "top-end",
    },
  },
});

One of the useful features of breakpoints is the ability to destroy components at specific resolutions. To do this, you need to pass the destroy property with the value true in the breakpoint settings object.

new Collapse("#my-collapse", {
  destroy: true,
  breakpoints: {
    1024: {
      destroy: false,
    },
  },
});

When a breakpoint is triggered, a breakpoint event fires.