Button

ボタンは、ユーザーが定義したアクションをトリガーできるようにする基本要素です。 できます。ボタンは 5 種類あります。次の表に、 5 種類のボタンの外観と、各ボタンを使用する場所 できます。

タイプ	デザイン	目的
塗りつぶし	テキストにコントラストの強い無地の背景。	高強調ボタン。「submit」など、アプリケーションでのメイン アクションに使用します。[保存]をクリックしますシャドウ効果でボタンの重要性が強調されます。
塗りつぶしの色調	サーフェスに合わせて背景色が変わります。	主要なアクションや重要なアクションにも使用できます。塗りつぶしボタンは視覚的に目立つようにし、「カートに追加」などの機能に適している[ログイン] をタップします。
やや高い	影を付けることで目立ちます。	色調ボタンと同様の役割を果たします。エレベーションを大きくすると、ボタンがより目立つようになります。
枠線付き	塗りつぶしなしの枠線を表示します。	中強調のボタン、重要なアクションが含まれるが、主要ではないアクションが含まれるボタン。他のボタンと組み合わせて、「キャンセル」などの二次的なアクションを示すことができますまたは [戻る] をタップします。
テキスト	背景や枠線のないテキストを表示します。	低強調のボタン。ナビゲーション リンクなどの重要度の低い操作や、「詳細」などの二次的機能に最適です。または [詳細を表示] を選択します。

次の図は、マテリアル デザインの 5 種類のボタンを示しています。

図 1. 5 つのボタン コンポーネント。

API サーフェス

• onClick: ユーザーがボタンを押すと呼び出される関数。
• enabled: false の場合、このパラメータによりボタンが表示されます。 非アクティブな状態です
• colors: 使用する色を決定する ButtonColors のインスタンス。 クリックします。
• contentPadding: ボタン内のパディング。

塗りつぶしボタン

塗りつぶしボタン コンポーネントは、基本的な Button コンポーザブルを使用します。内容 塗りつぶしの色が自動的に設定されます。次のスニペットは、 コンポーネントを実装します。

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

注: カスタムボタンを作成する場合は、Button コンポーザブルを使用します。

これを実装すると次のようになります。

<ph type="x-smartling-placeholder">

</ph>

図 2.塗りつぶしボタン。

塗りつぶしの色調ボタン

塗りつぶしの色調ボタン コンポーネントは、FilledTonalButton コンポーザブルを使用します。 デフォルトでは色調で塗りつぶされます。

次のスニペットは、このコンポーネントの実装方法を示しています。

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

これを実装すると次のようになります。

<ph type="x-smartling-placeholder">

</ph>

図 3.色調ボタン。

枠線付きボタン

枠線付きボタン コンポーネントは、OutlinedButton コンポーザブルを使用します。これは、 デフォルトでは枠線付きで表示されます。

次のスニペットは、このコンポーネントの実装方法を示しています。

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

これを実装すると次のようになります。

<ph type="x-smartling-placeholder">

</ph>

図 4.枠線付きボタン。

立体ボタン

浮き上がりボタン コンポーネントは ElevatedButton コンポーザブルを使用します。機能 デフォルトで高度効果を表すシャドウ。これは、 枠線付きのボタンのような形です。

次のスニペットは、このコンポーネントの実装方法を示しています。

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

これを実装すると次のようになります。

<ph type="x-smartling-placeholder">

</ph>

図 5.立体的なボタン。

テキストボタン

テキストボタン コンポーネントでは、TextButton コンポーザブルを使用します。このボタンを押すまで、 テキストのみで表示されます。デフォルトでは、無地の塗りつぶしや枠線はありません。

次のスニペットは、このコンポーネントの実装方法を示しています。

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

これを実装すると次のようになります。

<ph type="x-smartling-placeholder">

</ph>

図 6.テキストボタン。

参考情報

• フローティング アクション ボタン
• マテリアル UI のドキュメント