TimePickerToolbarAPI
React TimePickerToolbar 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
示範
匯入
import { TimePickerToolbar } from '@mui/x-date-pickers/TimePicker';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers-pro';透過閱讀此關於最小化套件大小的指南，瞭解差異。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| onViewChange* | func | - | 點擊工具列時呼叫的回呼函數 簽名： function(view: TView) => void
|
| view* | 'hours' | 'meridiem' | 'minutes' | 'seconds' | - | 目前可見的選擇器檢視。 |
| views* | Array<'hours' | 'meridiem' | 'minutes' | 'seconds'> | - | 可用的檢視。 |
| classes | object | - | 覆寫或擴展應用於元件的樣式。 請參閱下方CSS 類別 API 以瞭解更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及其他 CSS 樣式的系統 prop。 請參閱 `sx` 頁面 以瞭解更多詳細資訊。 |
| toolbarFormat | string | - | 工具列日期格式。 |
| toolbarPlaceholder | node | "––" | 工具列值預留位置 — 當值為空時顯示。 |
元件無法保留 ref。
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiTimePickerToolbar-ampmLabel | ampmLabel | 應用於子午線標籤元素的樣式。 |
| .MuiTimePickerToolbar-ampmLandscape | ampmLandscape | 應用於橫向模式下子午線選擇元素的樣式。 |
| .MuiTimePickerToolbar-ampmSelection | ampmSelection | 應用於子午線選擇元素的樣式。 |
| .MuiTimePickerToolbar-hourMinuteLabel | hourMinuteLabel | 應用於時間區段元素的樣式。 |
| .MuiTimePickerToolbar-hourMinuteLabelLandscape | hourMinuteLabelLandscape | 應用於橫向模式下時間區段元素的樣式。 |
| .MuiTimePickerToolbar-hourMinuteLabelReverse | hourMinuteLabelReverse | 應用於 "rtl" 主題模式下時間區段元素的樣式。 |
| .MuiTimePickerToolbar-root | root | 應用於根元素的樣式。 |
| .MuiTimePickerToolbar-separator | separator | 應用於分隔符號元素的樣式。 |
您可以使用以下自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中元件的
styleOverrides屬性 的一部分。
原始碼
如果您在本頁中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。