响应式

QResponsive是一个组件,它强制内容根据其宽度保持纵横比。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

提示

  • 组件可以与任何内容一起使用,只要您指定只有一个直接子级。如果您需要在其中包含多个元素,请将它们包装在一个<div>中。
  • 您有责任确保您的内容不会溢出容器。

WARNING

不要在已经具有ratio属性的Quasar组件上使用它,比如QImg或QVideo,或者是具有强制高度的组件。

基础

Basic usage

Flex行

请注意,我们使用的是垂直对齐(items start),而不是默认的(stretch),这样flexbox不会强制每个QResponsive组件的高度。

Basic usage

在某些组件上

下面只是几个例子。QResponsive不限于QCard和QCarousel。

On QCard
On QCardSection
On QTable

请注意,当我们在QCarousel上使用QResponseve时,我们不会为QCarousel提供一个height属性,因为QResponsive负责处理这个问题。

On QCarousel

Maximum height

通过CSS类或内联直接在QResponsive组件上应用max height(或max width等)。请记住,您仍然有责任确保内容不会溢出容器。

On QCard

QResponsive API

Loading API...
Please wait...