跳到內容

PickersCalendarHeaderAPI

React PickersCalendarHeader 組件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

導入

import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
// or
import { PickersCalendarHeader } from '@mui/x-date-pickers';
// or
import { PickersCalendarHeader } from '@mui/x-date-pickers-pro';

透過閱讀這份關於最小化 bundle size 的指南，瞭解它們之間的差異。

Props

原生組件的 Props 也可用。

名稱類型預設描述
classesobject-

覆寫或擴展應用於組件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

formatstring`${adapter.formats.month} ${adapter.formats.year}`

用於顯示日期的格式。

labelIdstring-

日曆文字元素的 Id。它用於建立與日曆 grid 元素的 aria-labelledby 關係。

slotPropsobject{}

用於每個組件插槽的 props。

slotsobject{}

可覆寫的組件插槽。

請參閱下方插槽 API 以瞭解更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

允許定義系統覆寫以及額外 CSS 樣式的系統 prop。

請參閱 `sx` 頁面 以瞭解更多詳細資訊。

ref 被轉發到根元素。

主題預設 Props

您可以使用 MuiPickersCalendarHeader 透過主題更改此組件的預設 props。

插槽

插槽名稱類別名稱預設組件描述
leftArrowIconArrowLeft顯示在左視圖切換按鈕中的圖標。
nextIconButtonIconButton允許切換到右視圖的按鈕。
previousIconButtonIconButton允許切換到左視圖的按鈕。
rightArrowIconArrowRight顯示在右視圖切換按鈕中的圖標。
switchViewButton.MuiPickersCalendarHeader-switchViewButtonIconButton顯示用於在不同日曆視圖之間切換的按鈕。
switchViewIcon.MuiPickersCalendarHeader-switchViewIconArrowDropDown顯示在 SwitchViewButton 中的圖標。當開啟的視圖為 year 時旋轉 180°。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的插槽。

類別名稱規則名稱描述
.MuiPickersCalendarHeader-labellabel應用於標籤元素的樣式。
.MuiPickersCalendarHeader-labelContainerlabelContainer應用於標籤容器元素的樣式。
.MuiPickersCalendarHeader-rootroot應用於根元素的樣式。

您可以使用以下自訂選項之一覆寫組件的樣式

原始碼

如果您在此頁面中找不到資訊，請考慮查看組件的實作以瞭解更多詳細資訊。