BreakpointsOwner

A convenience property used for defining the breakpoints on the height and width of the view. The sizes specified here determine the values of the widthBreakpoint and heightBreakpoint properties depending on the view's size.

Setting up breakpoints can aid in responsive app design. It does this by watching width and height breakpoints. This is helpful as it removes the need for multiple @media calls. Instead of listening for the view's size and/or resizes property, you can set up a watch handler for either the widthBreakpoint or heightBreakpoint properties of the view.

See also

• Sample: Responsive apps using CSS

• MDN Web docs: Media Queries

// Instead of watching the size or resizing properties
reactiveUtils.watch(() => view.size, () => {});
reactiveUtils.watch(() => view.resizing, () => {});

// Set up a watch handle for breakpoint
reactiveUtils.watch(
  () => view.widthBreakpoint,
  (breakpoint) => {
    switch (breakpoint) {
      case "xsmall":
      // do something
        break;
      case "small":
      case "medium":
      case "large":
      case "xlarge":
      // do something else
        break;
      default:
    }
  }
);

A convenience property indicating the general size of the view's height. This value is determined based on where the view's height falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

Possible Value	Description	Default thresholds (pixels)
xsmall	The height of the view is smaller than the value set in the xsmall breakpoint.	< 545
small	The height of the view is between the values set in the xsmall and small breakpoints.	545 - 768
medium	The height of the view is between the values set in the small and medium breakpoints.	769 - 992
large	The height of the view is between the values set in the medium and large breakpoints.	993 - 1200
xlarge	The height of the view is larger than the value set in the large breakpoint.	> 1200

See also

• Sample: Responsive apps using CSS

reactiveUtils.watch(
  () => view.heightBreakpoint === "xsmall",
  () => {
    // clear the view's default UI components if
    // the app is used on a mobile device
    view.ui.components = [];
  }
);

A convenience property indicating the view's orientation. See the table below for a list of possible values.

Possible Value	Description
landscape	The width of the view is greater than its height.
portrait	The width of the view is equal to or smaller than its height.

A convenience property indicating the general size of the view's width. This value is determined based on where the view's width falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

Possible Value	Description	Default thresholds (pixels)
xsmall	The width of the view is smaller than the value set in the xsmall breakpoint.	< 545
small	The width of the view is between the values set in the xsmall and small breakpoints.	545 - 768
medium	The width of the view is between the values set in the small and medium breakpoints.	769 - 992
large	The width of the view is between the values set in the medium and large breakpoints.	993 - 1200
xlarge	The width of the view is larger than the value set in the large breakpoint.	> 1200

See also

• Sample: Responsive apps using CSS

reactiveUtils.when(
  () => view.widthBreakpoint === "xsmall",
  () => {
    // clear the view's default UI components if
    // the app is used on a mobile device
    view.ui.components = [];
  }
);