响应式
QResponsive是一个组件,它强制内容根据其宽度保持纵横比。
QResponsive API
用法
提示
- 组件可以与任何内容一起使用,只要您指定只有一个直接子级。如果您需要在其中包含多个元素,请将它们包装在一个
<div>
中。 - 您有责任确保您的内容不会溢出容器。
WARNING
不要在已经具有ratio
属性的Quasar组件上使用它,比如QImg或QVideo,或者是具有强制高度的组件。
基础
Flex行
请注意,我们使用的是垂直对齐(items start
),而不是默认的(stretch
),这样flexbox不会强制每个QResponsive组件的高度。
在某些组件上
下面只是几个例子。QResponsive不限于QCard和QCarousel。
请注意,当我们在QCarousel上使用QResponseve时,我们不会为QCarousel提供一个height
属性,因为QResponsive负责处理这个问题。
Maximum height
通过CSS类或内联直接在QResponsive组件上应用max height(或max width等)。请记住,您仍然有责任确保内容不会溢出容器。