响应式ui的视图

UI组件可以响应设备宽度. 色差可以很容易的用视觉测试这些情况 Viewports 参数. 这有助于定义要捕获的一个或多个视口大小. 使用视图需要故事书 4.0或晚.

一个故事的视图

要设置一个视口,请指定一个或多个屏幕 宽度彩色.Viewports 参数:

MyComponent / /添加.故事.js MyComponent |添加.故事.ts

进口 MyComponent  '.MyComponent /添加';

出口 默认的 {
  组件: MyComponent,
};

常量 Template = (arg游戏) => <MyComponent {...arg游戏} />;

出口 常量 StoryName = Template.绑定({});
StoryName.arg游戏={
  : '道具'
};
StoryName.参数 = {
  //设置一个故事级别的彩色视图.
  彩色: { Viewports: [320, 1200] },
};

当彩色捕捉到你的故事,它将创造 两个 构建的快照,在每个视图上设置浏览器. 这些视口将分别处理,具有独立的基线和不同的批准.

一个组件的所有故事的视图

多亏了内置的故事书 参数 API,你也可以将viewport指向一组故事,甚至整个故事书. 要将一组视图应用到所有组件的故事,请使用:

MyComponent / /添加.故事.js MyComponent |添加.故事.ts

进口 MyComponent  '.MyComponent /添加';

出口 默认的 {
  组件: MyComponent,
  参数: {
    //在组件级别设置彩色视图.
    彩色: { Viewports: [320, 1200] },
  },
}

常量 Template = (arg游戏) => <MyComponent {...arg游戏} />;

出口 常量 StoryName = Template.绑定({});
StoryName.arg游戏 = {
  : '道具'
};

出口 常量 SecondStoryName = (arg游戏) = Template.绑定({});
SecondStoryName.arg游戏 = {
  : '换道具'
};


常见问题

我可以选择什么视图?

视口可以是320到1800像素之间的任何整数.

我可以控制视口的高度吗?

十博体育备用网址截取组件的完整截图,即使它已经流出了屏幕. 在截屏时,浏览器的高度通常不会有什么不同. 如果你的应用不是这样,请通过应用内聊天十博体育备用网址

我如何给我的故事书中的所有组件分配全局视图?

在大多数情况下,十博体育备用网址不建议这样做,因为每个视口都是独立处理的,快照也必须这样被批准. 但是如果你真的想为整个故事书的使用分配视图 参数 在你的 .故事书/预览.js:

// .故事书/预览.js

出口 常量 参数 = {
  //全局设置彩色视图.
  彩色: { Viewports: [320, 1200] },
};
友情链接: 1 2 3 4 5 6 7 8 9 10