AspectRatioAPI
React AspectRatio 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例展示
Import
import AspectRatio from '@mui/joy/AspectRatio';
// or
import { AspectRatio } from '@mui/joy';閱讀關於最小化 bundle size 的指南，以瞭解它們之間的差異。
原生元件的 Props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children | node | - | 若未設定 |
| color | 'danger' | 'neutral' | 'primary' | 'success' | 'warning' | 'neutral' | 元件的色彩。它支援對此元件有意義的主題色彩。 若要瞭解如何新增自己的色彩，請查看主題元件—擴展色彩。 |
| component | elementType | - | 用於根節點的元件。可以是字串（用於 HTML 元素）或元件。 |
| flex | bool | false | 預設情況下，AspectRatio 會維持其內容的長寬比。當容器為彈性水平列 (flex row) 且您希望 AspectRatio 填滿其容器的高度時，請將此 prop 設定為 |
| maxHeight | number | string | - | 元素的最大計算高度（非 CSS 高度）。 |
| minHeight | number | string | - | 元素的最小計算高度（非 CSS 高度）。 |
| objectFit | '-moz-initial' | 'contain' | 'cover' | 'fill' | 'inherit' | 'initial' | 'none' | 'revert-layer' | 'revert' | 'scale-down' | 'unset' | 'cover' | 第一個子元素的 CSS object-fit 值。 |
| ratio | number | string | '16 / 9' | 元素的長寬比。目前的實作使用 padding 而非 CSS aspect-ratio，因為瀏覽器支援度的考量。https://caniuse.dev.org.tw/?search=aspect-ratio |
| slotProps | { content?: func | object, root?: func | object } | {} | 用於內部每個 slot 的 props。 |
| slots | { content?: elementType, root?: elementType } | {} | 用於內部每個 slot 的元件。 請參閱下方的Slots API 以瞭解更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面以瞭解更多詳細資訊。 |
| variant | 'outlined' | 'plain' | 'soft' | 'solid' | string | 'soft' | 要使用的全域 variant。 若要瞭解如何新增自己的 variants，請查看主題元件—擴展 variants。 |
ref 傳遞至根元素。主題預設 props
您可以使用 JoyAspectRatio 透過主題變更此元件的預設 props。
若要瞭解如何自訂 slot，請查看覆寫元件結構指南。
| Slot 名稱 | Class name | 預設元件 | 描述 |
|---|---|---|---|
| root | .MuiAspectRatio-root | 'div' | 渲染 root 的元件。 |
| content | .MuiAspectRatio-content | 'div' | 渲染 content 的元件。 |
這些 class name 對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。
| Class name | Rule name | 描述 |
|---|---|---|
| .MuiAspectRatio-colorContext | colorContext | 當觸發色彩反轉時，套用至根元素的 Class name。 |
| .MuiAspectRatio-colorDanger | colorDanger | 如果 color="danger"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-colorNeutral | colorNeutral | 如果 color="neutral"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-colorPrimary | colorPrimary | 如果 color="primary"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-colorSuccess | colorSuccess | 如果 color="success"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-colorWarning | colorWarning | 如果 color="warning"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-variantOutlined | variantOutlined | 如果 variant="outlined"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-variantPlain | variantPlain | 如果 variant="plain"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-variantSoft | variantSoft | 如果 variant="soft"，則套用至 content 元素的 Class name。 |
| .MuiAspectRatio-variantSolid | variantSolid | 如果 variant="solid"，則套用至 content 元素的 Class name。 |
您可以使用以下其中一種自訂選項來覆寫元件的樣式
- 使用全域 class name。
- 在自訂主題中使用 rule name 作為元件
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。