响应式容器

QResponsive 是一个组件,它强制内容根据其宽度保持特定的宽高比。

QResponsive API

提示

WARNING

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

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

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

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

通过 CSS 类或内联样式直接在 QResponsive 组件上应用最大高度(或最大宽度等)。请记住,确保内容不会溢出容器仍然是您的责任。

QResponsive 是一个纯展示性的宽高比包裹器，自身没有无障碍表面。