GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 02:01:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
storybook/code/addons/measure/README.md
Kyle Gach 975ad7604b Update TOC to use heading type 
- Rename `introduction.md`, `overview.md`, `how-to-contribute.md` pages -> `index.md` pages
- Add all-new `index.md` pages for Sharing and API
- Find/replace `introduction.md`/`overview.md` -> `index.md`
- Find/replace `/introduction`/`/overview` -> `/`
- Add `hideRendererSelector: true` to frontmatter of (some) pages that aren't conditional on renderer
2023-11-27 20:57:51 -07:00

1.1 KiB
Raw Blame History

Storybook Addon Measure

Storybook addon for inspecting layouts and visualizing the box model.

  1. Press the m key to enable the addon:

  2. Hover over a DOM node

  3. Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.

Usage

This addon requires Storybook 6.3 or later. Measure is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-measure

Add "@storybook/addon-measure" to the addons array in your .storybook/main.js:

export default {
  addons: ['@storybook/addon-measure'],
};

Inspiration