@arcgis/core

import type { BreakpointOrientation, Breakpoints, BreakpointSize } from "./types.js"; export interface BreakpointsOwnerProperties extends Partial<Pick<BreakpointsOwner, "breakpoints" | "heightBreakpoint" | "widthBreakpoint">> {} /** * A mixin that adds [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints), [heightBreakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#heightBreakpoint), [orientation](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#orientation) and * [widthBreakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#widthBreakpoint) properties to [View2D](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#breakpoints) and [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#breakpoints) classes. * * @since 4.0 */ export abstract class BreakpointsOwner { constructor(...args: any[]); /** * A convenience property used for defining the breakpoints on the [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) * and [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view. The sizes specified here determine the values of * the [widthBreakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#widthBreakpoint) and [heightBreakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). * Instead of listening for the view's size and/or resizes property, * you can set up a watch handler for either the [widthBreakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#widthBreakpoint) or * [heightBreakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#heightBreakpoint) properties of the view. * * > [!WARNING] * > * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional * > information on working with this. * * @see [Sample: Responsive apps using CSS](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/) * @see [MDN Web docs: Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) * @example * // 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: * } * } * ); */ accessor breakpoints: Breakpoints; /** * A convenience property indicating the general size of the view's height. This value is * determined based on where the view's [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) falls in the ranges defined * in the [breakpoints](#breakpoints) property. See the table below * for a list of possible values. Use the [breakpoints](#breakpoints) property to * override the default thresholds. * * > [!WARNING] * > * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional * > information on working with this. * * Possible Value | Description | Default thresholds (pixels) * ---------------|-------------|---------------------------- * xsmall | The [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) of the view is smaller than the value set in the `xsmall` [breakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | < 545 * small | The [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) of the view is between the values set in the `xsmall` and `small` [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | 545 - 768 * medium | The [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) of the view is between the values set in the `small` and `medium` [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | 769 - 992 * large | The [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) of the view is between the values set in the `medium` and `large` [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | 993 - 1200 * xlarge | The [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height) of the view is larger than the value set in the `large` [breakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | > 1200 * * @see [Sample: Responsive apps using CSS](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/) * @example * reactiveUtils.watch( * () => view.heightBreakpoint === "xsmall", * () => { * // clear the view's default UI components if * // the app is used on a mobile device * view.ui.components = []; * } * ); */ accessor heightBreakpoint: BreakpointSize; /** * A convenience property indicating the view's orientation. See the table below for a list of possible values. * * > [!WARNING] * > * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional * > information on working with this. * * Possible Value | Description * ---------------|------------ * landscape | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is greater than its [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height). * portrait | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is equal to or smaller than its [height](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#height). */ get orientation(): BreakpointOrientation; /** * A convenience property indicating the general size of the view's width. This value is * determined based on where the view's [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) falls in the ranges defined * in the [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints) property. See the table below * for a list of possible values. Use the [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints) property to * override the default thresholds. * * > [!WARNING] * > * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional * > information on working with this. * * Possible Value | Description | Default thresholds (pixels) * ---------------|-------------|------------------- * xsmall | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is smaller than the value set in the `xsmall` [breakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | < 545 * small | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is between the values set in the `xsmall` and `small` [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | 545 - 768 * medium | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is between the values set in the `small` and `medium` [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | 769 - 992 * large | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is between the values set in the `medium` and `large` [breakpoints](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | 993 - 1200 * xlarge | The [width](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#width) of the view is larger than the value set in the `large` [breakpoint](https://developers.arcgis.com/javascript/latest/references/core/views/BreakpointsOwner/#breakpoints). | > 1200 * * @see [Sample: Responsive apps using CSS](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/) * @example * reactiveUtils.when( * () => view.widthBreakpoint === "xsmall", * () => { * // clear the view's default UI components if * // the app is used on a mobile device * view.ui.components = []; * } * ); */ accessor widthBreakpoint: BreakpointSize; }