Vuetify

商店

企业版

使用 Vuetify 的时候,你可以根据窗口的尺寸设定应用的布局。例如,我们可以使用特定的 grid 属性或者与指定的断点相关的助手类 (i.e. display) 设定布局。Vuetify 提供了 5 个预先定义的断点,你也可以根据自己的需要修改他们。

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Vuetify将有效的断点转换为应用程序内的可访问对象。这将允许您根据视口的大小应用特定的属性和特性。您可以通过$vuetify.breakpoint访问这个对象。

您可以定义自己的断点阈值像素值,但目前需要两个步骤:1. 要更新样式,您将必须覆盖 $grid-breakpoints SASS 变量(请参见 SASS variables)。 2. 若要在事物的 javascript 端使用相同的值,则必须在应用程序引导期间将它们传递给它们,如下所示:

该对象包含与您已经习惯使用的栅格系统相同的语义属性。让我们尝试一个真实世界的例子。您有一个v-dialog组件,您想要在移动设备上转换成一个全屏对话框。通常情况下,您需要将视野大小绑定在观察者上,和/或在页面加载时进行检查。

这是很多的样板文字。即使您选择使用内置的 v-resize 指令,仍然必须定义调整大小的方法。使用 breakpoint 对象,您可以完全跳过这个逻辑并重新构建您的应用程序。

We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!