@gitlab/ui/dist/directives/resize_observer/resize_observer.documentation.js

GitLab UI Components

import examples from './examples';

var description = "# Resize Observer\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to get notified whenever a given element's size (width or height) changes and to retrieve\nthe updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\n(and includes a [polyfill](https://github.com/que-etc/resize-observer-polyfill) to make sure it works in all\n[supported browsers](https://docs.gitlab.com/ee/install/requirements.html#supported-web-browsers)).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect) and the target element whenever a resize\nevent gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n";

var resize_observer_documentation = {
  followsDesignSystem: false,
  description: description,
  examples: examples
};

export default resize_observer_documentation;