observeResize

The observeResize function allows you to monitor changes in an element's size and execute a callback when the size changes. This function utilizes the ResizeObserver API and implements the singleton pattern for enhanced performance.

Usage

Import the function:

import { observeResize } from 'mdui/functions/observeResize.js';

Example:

// Listen for size changes on document.body
const observer = observeResize(document.body, function(entry, observer) {
  // At this point, document.body's size has changed. You can get the new size from entry.
  console.log(entry);

  // Call this method to stop observing
  observer.unobserve();
});

// You can also call the unobserve method on the function's return value to stop observing
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback)): ObserveResize

The target parameter can be a CSS selector, a DOM element, or a JQ object.

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

In this function, this also refers to ObserveResize.

ObserveResize

{
  unobserve: () => void;
}
MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons