QToggle 元件是用戶輸入的另一個基本元素。 您可以使用它來開啟和關閉設定、功能或 true/false 輸入。

用法

基本

使用 color 屬性來控制切換的顏色。

帶有標籤

保留顏色

帶有圖示

自訂模型值

您可以使用自訂值，而不是預設的 true / false 值。

不確定狀態

在以下範例中，當您按一下第一個 QToggle 時，它會開始在 true/false 之間切換。 另一方面，第二個 QToggle 在 toggle-indeterminate 的協助下，在三種狀態（不確定/true/false）之間切換。 您可以選擇性地設定屬性 indeterminate-value，否則不確定值將被視為 null。

切換順序

預設情況下，QToggle 在切換時遵循此鏈：不確定 -> 已勾選 -> 未勾選。 但是，您可以通過 toggle-order 屬性來更改此行為。 此屬性決定狀態的順序，可以是 tf（預設）或 ft（t 代表 true/已勾選狀態，而 f 代表 false/未勾選狀態）。

切換順序為

• 如果 toggle-indeterminate 為 true，則：不確定 -> 第一個狀態 -> 第二個狀態 -> 不確定（並重複）
• 否則（沒有 toggle-indeterminate）：不確定 -> 第一個狀態 -> 第二個狀態 -> 第一個狀態 -> 第二個狀態 -> …

陣列模型

如果您有多個用於選擇的切換開關，則可以使用陣列作為所有切換開關的模型，並在每個切換開關上指定 val 屬性。 如果切換開關被勾選，則其 val 將插入到陣列中，反之亦然。

深色設計

停用

尺寸

除了以下標準尺寸外，您還可以通過 size 屬性定義自己的尺寸（最後一個是自訂尺寸）。

搭配 QOptionGroup

搭配 QItem

原生表單提交

當處理具有 action 和 method 的原生表單時（例如，當將 Quasar 與 ASP.NET 控制器一起使用時），您需要在 QToggle 上指定 name 屬性，否則 formData 將不會包含它（如果應該包含）- 所有值都將轉換為字串（原生行為，因此請勿使用物件值）