Button

按鈕是基本元件，可讓使用者觸發定義的 動作。按鈕共有五種。下表說明 這五種按鈕類型的外觀，以及您應該使用哪些選項 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件

類型

外觀

目的

實心

純色背景搭配對比文字。

高強調按鈕。這些專用於應用程式的主要動作，例如「提交」然後按一下 [儲存]陰影效果可強調按鈕的重要性。

實心色調

背景顏色會因表面而異。

也適用於主要或重要動作實心按鈕可提供更多視覺重量和合適功能，例如「加入購物車」和「登入」按鈕。

偏高

加入陰影，讓圖片更醒目。

適用於與色調按鈕類似的角色。調高高度，讓按鈕更醒目。

含外框

邊框不含填充。

中強調按鈕，內含重要但不是主要動作。這些按鈕可以與其他按鈕配對，用於指出次要的替代動作，例如「取消」或「返回」。

文字

顯示沒有背景或邊框的文字。

低強調按鈕，適用於較不重要的動作 (例如導覽連結) 或次要功能 (例如「瞭解詳情」)或「查看詳細資料」

下圖顯示 Material Design 中的五種按鈕類型。

範例說明這五個按鈕元件，並醒目顯示其特點。
圖 1. 五個按鈕元件。

API 介面

  • onClick：使用者按下按鈕時呼叫的函式。
  • enabled：如果為 false，這個參數會導致按鈕顯示為無法使用且處於停用狀態。
  • colors：用於決定按鈕中所用顏色的 ButtonColors 例項。
  • contentPadding：按鈕內的邊框間距。

實心按鈕

填滿的按鈕元件會使用基本 Button 可組合項。預設會以單色填滿。以下程式碼片段示範如何實作元件：

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

此實作方式如下所示：

紫色背景的填滿按鈕，上頭寫著「filled」。
圖 2. 填滿型按鈕。

實心色調按鈕

填滿色調按鈕元件會使用 FilledTonalButton 可組合項。 系統預設會填入色調顏色。

下列程式碼片段說明如何實作元件：

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

此實作方式如下所示：

淺紫色背景的色調按鈕，顯示「fill」(填滿)。
圖 3.色調按鈕。

外框型按鈕

外框的按鈕元件會使用 OutlinedButton 可組合函式。預設會顯示為輪廓。

下列程式碼片段示範如何實作元件：

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

此實作方式如下所示：

透明有外框的按鈕，並加上深框線顯示「外框」。
圖 4.標有外框的按鈕。

升降按鈕

升高的按鈕元件會使用 ElevatedButton 可組合函式。它有 預設情況下的陰影。請注意 基本上就是有陰影的外框按鈕

下列程式碼片段說明如何實作元件：

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

實作內容如下所示：

灰色背景的升起效果按鈕，上方顯示「Elevated」。
圖 5. 凸起的按鈕。

文字按鈕

文字按鈕元件會使用 TextButton 可組合函式。直到按下為止 但僅能以文字顯示根據預設，它沒有實心填充或外框。

下列程式碼片段示範如何實作元件：

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

實作內容如下所示：

文字按鈕，顯示「文字按鈕」
圖 6. 文字按鈕。

其他資源