為何捐款
API 瀏覽器
響應式

QResponsive 是一個組件,它強制內容根據其寬度保持縱橫比。

載入 QResponsive API...

用法

提示

  • 此組件可用於任何內容,只要您指定僅一個直接子元素。 如果您需要在其中放入多個元素,請將它們包裝在 <div> 中。
  • 您有責任確保您的內容不會溢出容器。

警告

請勿在已具有 ratio 屬性的 Quasar 組件上使用它,例如 QImg 或 QVideo,或在具有強制高度的組件上使用。

基本

基本用法



彈性列

請注意,以下我們使用的是垂直對齊方式 (items-start),而不是預設值 (stretch>),這樣 flexbox 就不會強制每個 QResponsive 組件的高度。

基本用法



在某些組件上

以下僅是一些範例。 QResponsive 不僅限於 QCard 和 QCarousel。

在 QCard 上



在 QCardSection 上



在 QTable 上



請注意,當我們在 QCarousel 上使用 QResponsive 時,我們不會提供 height 屬性,因為 QResponsive 會處理該問題。

在 QCarousel 上



最大高度

通過 CSS 類別或內聯方式直接在 QResponsive 組件上應用最大高度(或最大寬度等)。 請記住,您仍有責任確保內容不會溢出容器。

在 QCard 上