mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 00:01:17 +08:00
9b1370f3d6
- By default, viewport addon is reading both initial viewports' set and default viewport from
`INITIAL_VIEWPORTS` and `DEFAULT_VIEWPORT` respectively which are exported by the addon
- `configure` function is exported which accepts an object with `defaultViewport` and `viewports`
- Change the default viewport by setting `defaultViewport` property to the key of the viewport (e.g. `configure({ defaultViewport: 'iphone5' })`)
- Replace the entire viewports by setting brand new viewports to `viewports` property (e.g. `configure({ viewports: { brandNewDevice: { ... } } })`)
- Add custom viewports by first merging both the `INITIAL_VIEWPORTS` and your custom viewports, and then pass the result as `viewports` to configure function
57 lines
1.0 KiB
JavaScript
57 lines
1.0 KiB
JavaScript
export const ADDON_ID = 'storybook-addon-viewport';
|
|
export const PANEL_ID = `${ADDON_ID}/addon-panel`;
|
|
export const UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update';
|
|
export const CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure';
|
|
export const INITIAL_VIEWPORTS = {
|
|
iphone5: {
|
|
name: 'iPhone 5',
|
|
styles: {
|
|
height: '568px',
|
|
width: '320px',
|
|
},
|
|
},
|
|
iphone6: {
|
|
name: 'iPhone 6',
|
|
styles: {
|
|
height: '667px',
|
|
width: '375px',
|
|
},
|
|
},
|
|
iphone6p: {
|
|
name: 'iPhone 6 Plus',
|
|
styles: {
|
|
height: '736px',
|
|
width: '414px',
|
|
},
|
|
},
|
|
ipad: {
|
|
name: 'iPad',
|
|
styles: {
|
|
height: '1024px',
|
|
width: '768px',
|
|
},
|
|
},
|
|
galaxys5: {
|
|
name: 'Galaxy S5',
|
|
styles: {
|
|
height: '640px',
|
|
width: '360px',
|
|
},
|
|
},
|
|
nexus5x: {
|
|
name: 'Nexus 5X',
|
|
styles: {
|
|
height: '660px',
|
|
width: '412px',
|
|
},
|
|
},
|
|
nexus6p: {
|
|
name: 'Nexus 6P',
|
|
styles: {
|
|
height: '732px',
|
|
width: '412px',
|
|
},
|
|
},
|
|
};
|
|
export const DEFAULT_VIEWPORT = 'default';
|