@storybook/addon-viewport
- Version 8.6.4
- Published
- 30.4 kB
- 1 dependency
- MIT license
Install
npm i @storybook/addon-viewportyarn add @storybook/addon-viewportpnpm add @storybook/addon-viewportOverview
Build responsive components by adjusting Storybook’s viewport size and orientation
Index
Variables
Functions
Interfaces
Type Aliases
Variables
variable DEFAULT_VIEWPORT
const DEFAULT_VIEWPORT: string;variable INITIAL_VIEWPORTS
const INITIAL_VIEWPORTS: ViewportMap;variable INITIAL_VIEWPORTS_DATA
const INITIAL_VIEWPORTS_DATA: { readonly iphone5: { readonly name: 'iPhone 5'; readonly styles: { readonly height: '568px'; readonly width: '320px' }; readonly type: 'mobile'; }; readonly iphone6: { readonly name: 'iPhone 6'; readonly styles: { readonly height: '667px'; readonly width: '375px' }; readonly type: 'mobile'; }; readonly iphone6p: { readonly name: 'iPhone 6 Plus'; readonly styles: { readonly height: '736px'; readonly width: '414px' }; readonly type: 'mobile'; }; readonly iphone8p: { readonly name: 'iPhone 8 Plus'; readonly styles: { readonly height: '736px'; readonly width: '414px' }; readonly type: 'mobile'; }; readonly iphonex: { readonly name: 'iPhone X'; readonly styles: { readonly height: '812px'; readonly width: '375px' }; readonly type: 'mobile'; }; readonly iphonexr: { readonly name: 'iPhone XR'; readonly styles: { readonly height: '896px'; readonly width: '414px' }; readonly type: 'mobile'; }; readonly iphonexsmax: { readonly name: 'iPhone XS Max'; readonly styles: { readonly height: '896px'; readonly width: '414px' }; readonly type: 'mobile'; }; readonly iphonese2: { readonly name: 'iPhone SE (2nd generation)'; readonly styles: { readonly height: '667px'; readonly width: '375px' }; readonly type: 'mobile'; }; readonly iphone12mini: { readonly name: 'iPhone 12 mini'; readonly styles: { readonly height: '812px'; readonly width: '375px' }; readonly type: 'mobile'; }; readonly iphone12: { readonly name: 'iPhone 12'; readonly styles: { readonly height: '844px'; readonly width: '390px' }; readonly type: 'mobile'; }; readonly iphone12promax: { readonly name: 'iPhone 12 Pro Max'; readonly styles: { readonly height: '926px'; readonly width: '428px' }; readonly type: 'mobile'; }; readonly iphoneSE3: { readonly name: 'iPhone SE 3rd generation'; readonly styles: { readonly height: '667px'; readonly width: '375px' }; readonly type: 'mobile'; }; readonly iphone13: { readonly name: 'iPhone 13'; readonly styles: { readonly height: '844px'; readonly width: '390px' }; readonly type: 'mobile'; }; readonly iphone13pro: { readonly name: 'iPhone 13 Pro'; readonly styles: { readonly height: '844px'; readonly width: '390px' }; readonly type: 'mobile'; }; readonly iphone13promax: { readonly name: 'iPhone 13 Pro Max'; readonly styles: { readonly height: '926px'; readonly width: '428px' }; readonly type: 'mobile'; }; readonly iphone14: { readonly name: 'iPhone 14'; readonly styles: { readonly height: '844px'; readonly width: '390px' }; readonly type: 'mobile'; }; readonly iphone14pro: { readonly name: 'iPhone 14 Pro'; readonly styles: { readonly height: '852px'; readonly width: '393px' }; readonly type: 'mobile'; }; readonly iphone14promax: { readonly name: 'iPhone 14 Pro Max'; readonly styles: { readonly height: '932px'; readonly width: '430px' }; readonly type: 'mobile'; }; readonly ipad: { readonly name: 'iPad'; readonly styles: { readonly height: '1024px'; readonly width: '768px' }; readonly type: 'tablet'; }; readonly ipad10p: { readonly name: 'iPad Pro 10.5-in'; readonly styles: { readonly height: '1112px'; readonly width: '834px' }; readonly type: 'tablet'; }; readonly ipad11p: { readonly name: 'iPad Pro 11-in'; readonly styles: { readonly height: '1194px'; readonly width: '834px' }; readonly type: 'tablet'; }; readonly ipad12p: { readonly name: 'iPad Pro 12.9-in'; readonly styles: { readonly height: '1366px'; readonly width: '1024px' }; readonly type: 'tablet'; }; readonly galaxys5: { readonly name: 'Galaxy S5'; readonly styles: { readonly height: '640px'; readonly width: '360px' }; readonly type: 'mobile'; }; readonly galaxys9: { readonly name: 'Galaxy S9'; readonly styles: { readonly height: '740px'; readonly width: '360px' }; readonly type: 'mobile'; }; readonly nexus5x: { readonly name: 'Nexus 5X'; readonly styles: { readonly height: '660px'; readonly width: '412px' }; readonly type: 'mobile'; }; readonly nexus6p: { readonly name: 'Nexus 6P'; readonly styles: { readonly height: '732px'; readonly width: '412px' }; readonly type: 'mobile'; }; readonly pixel: { readonly name: 'Pixel'; readonly styles: { readonly height: '960px'; readonly width: '540px' }; readonly type: 'mobile'; }; readonly pixelxl: { readonly name: 'Pixel XL'; readonly styles: { readonly height: '1280px'; readonly width: '720px' }; readonly type: 'mobile'; };};variable MINIMAL_VIEWPORTS
const MINIMAL_VIEWPORTS: ViewportMap;Functions
function _default
_default: () => core_dist_types.ProjectAnnotations<core_dist_types.Renderer>;Interfaces
interface Config
interface Config {}interface ModernViewport
interface ModernViewport {}interface Viewport
interface Viewport {}interface ViewportGlobals
interface ViewportGlobals {}property viewport
viewport: { [key: string]: GlobalState;};Viewport configuration
See Also
https://storybook.js.org/docs/essentials/viewport#globals
interface ViewportParameters
interface ViewportParameters {}property viewport
viewport: { /** * Specifies the default orientation used when viewing a story. Only available if you haven't * enabled the globals API. */ defaultOrientation?: 'landscape' | 'portrait'; /** * Specifies the default viewport used when viewing a story. Must match a key in the viewports * (or options) object. */ defaultViewport?: string; /** * Remove the addon panel and disable the addon's behavior . If you wish to turn off this addon * for the entire Storybook, you should do so when registering addon-essentials * * @see https://storybook.js.org/docs/essentials/index#disabling-addons */ disabled?: boolean; /** * Specify the available viewports. The width and height values must include the unit, e.g. * '320px'. */ viewports?: Viewport;};Viewport configuration
See Also
https://storybook.js.org/docs/essentials/viewport#parameters
interface ViewportStyles
interface ViewportStyles {}Type Aliases
type GlobalState
type GlobalState = { /** * When set, the viewport is applied and cannot be changed using the toolbar. Must match the key * of one of the available viewports. */ value: string | undefined; /** * When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to * landscape orientation. */ isRotated: boolean;};type GlobalStateUpdate
type GlobalStateUpdate = Partial<GlobalState>;type InitialViewportKeys
type InitialViewportKeys = keyof typeof INITIAL_VIEWPORTS_DATA;type Styles
type Styles = | ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;type ViewportMap
type ViewportMap = Record<string, Viewport>;Package Files (1)
Dependencies (1)
Dev Dependencies (5)
Peer Dependencies (1)
Badge
To add a badge like this one
to your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/addon-viewport.
- Markdown[](https://www.jsdocs.io/package/@storybook/addon-viewport)
- HTML<a href="https://www.jsdocs.io/package/@storybook/addon-viewport"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3015 ms. - Missing or incorrect documentation? Open an issue for this package.